Hi have a horizontal div with thumbnail images from my a slide show.
When the active image changes if fires spinAreaDiv.scrollTo(bullet.getPosition().x);. This is working ok.
What is the right syntax to have have a Fx.Scroll working on this?
new Fx.Scroll(spinAreaDiv, {duration: 500}).toElement(bullet.getPosition().x);
gives me "Cannot call method 'getPosition' of null".
What am I doing wrong?
thanks
(using mootools 1.3.2)
This should work:
scrollEff = new Fx.Scroll(spinAreaDiv, {wait: false,duration: 1000,
offset: {'x': -3, 'y': 0},
transition: Fx.Transitions.Quad.easeInOut
});
scrollEff.toElement(bullet);
Related
I have a lottie animation that I have integrated it in my code. I want to show a specific frame on initial load and when the user hover it the animation should start from the beginning and completes it.
This is what I want to show in first load -
And this is the complete animation -
This is my code
let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
});
animationMenu.addEventListener('DOMReady',function(){
animationMenu.playSegments([1,200],true);
});
iconMenu.addEventListener('mouseover', (e) => {
animationMenu.play();
});
This is my fiddle
Can anyone please help me?
It looks like you're using an outdated version of Lottie in this fiddle. Once that's updated you probably want to pass through the initialSgments option instead of using playSegments. In this case you can remove your DOMReady code block entirely and it works as expected. The one issue with your animation is the circle by itself doesn't actually exist. There's a tiny dot of green on the only half frame where that circle is completed before the rest starts animating. 51.5 is the closest from you can get, here's a fiddle showing it
let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
initialSegment: [51.5, 200],
});
iconMenu.addEventListener('mouseover', (e) => {
animationMenu.play();
});
I am using dataviz lib. for creating chart using Keen-io.
The chartType I am using is line and spline when I used
.chartOptions({ curveType: "function",
lineWidth: 10 })
I am not able to see the line width change.
Please Help!!
It'd be great to see a jsfiddle or something showing your issue. I just created a fiddle using chartOptions and lineWidth, and it seems to be working swimmingly for me.
Fiddle: http://jsfiddle.net/aqbtrxa8/11/
Code:
client.draw(query, el, {
chartType: "linechart",
height: 400,
chartOptions: {
lineWidth: 10
}
});
Is there anyway to change default mouseover range? Simple example, I have a map with a bunch o tracks which are 1-2 px wide and are clickable. To click a track and display info you need to click very precisely which can be very annoying. Is there any way to change that tolerance? Just to show what I mean here's my example.
Thanks in advance.
http://members.upcpoczta.pl/w.racek/mapa.html
I'm afraid there is not much you can do about that except for upping the weight on your polylines. It's just the way SVG works, precise. What you also can do, to make selecting a polyline less irritating, is dropping the dasharray. It leads to irregular behaviour on hover because the gaps between the lines don't respond to the mouseover. When hovering you'll think you're on the line but you're not, that can also be very frustrating. See this testcase on Plunker and you'll understand: http://plnkr.co/edit/7WPTWN?p=preview
L.polyline([[0, -180],[0, 180]], {
'dashArray': [10, 50]
})
There is a solution however it's very hacky and performancewise i wouldn't recommend it. For each polyline, add another line, with exactly the same coordinates, make it transparent and set the weight to 10 or more. Hook the mouseovers on the transparent line and use their handlers to change the style of the visible line. Code example:
var visibleLine = L.polyline([[0, -180],[0, 180]], {
'weight': 2,
'opacity': 1,
'dashArray': 3
}).addTo(map);
var transparentLine = L.polyline([[0, -180],[0, 180]], {
'weight': 10,
'opacity': 0
})
.on('mouseover', function (e) {
visibleLine.setStyle({
'color': 'red',
'weight': 4,
'dashArray': 0
});
})
.on('mouseout', function (e) {
visibleLine.setStyle({
color: 'blue',
'weight': 2,
'dashArray': 3
});
})
.addTo(map);
Here's a working example on Plunker: http://plnkr.co/edit/jChoQ0?p=preview
hi sorry completely new to mootools used to jquery, have a container (saved to variable itemContent) which reveals,
after this a function galleryScroll is call which scrolls the element to the container saved to var itemScroll,
want to make sure itemContent is revealed before scroll function is called whats the best way to do this?
thanks
itemContent.reveal({
'height' : '100%',
duration: 1600,
}).addClass('open-content');
// should this fire this in a callback function so it fires once the container is revealed
galleryScroll.toElement(itemScroll);
Fx.Reveal extends Fx and as such, inherits all of it's events.
try via the element setter:
itemCount.set('reveal', {
onComplete: function(){
galleryScroll.toElement(this.element);
}
}.reveal({... });
you can also get the reveal instance:
var fxReveal = itemCount.get('reveal');
this will return the instance and you can set whatever you like to it like usual.
You can enable chaining with the link option.
itemContent.reveal({
'height': '100%',
duration: 1600,
link: 'chain'
}).addClass('open-content');
This example will hide, reveal and then alert. Please note that I need to get the reveal instance as the standard Element in mootools does not implement the Chain class.
document.id('first').set('reveal', {
duration: 'long',
transition: 'bounce:out',
link: 'chain'
}).dissolve().reveal().get('reveal').chain(function(){alert('message');});
To see it in action: http://jsfiddle.net/LKSN8/1/
Okay, so I have a site running Joomla and it is using the mootools 1.11 framework. I've fudged together a working version of this using examples from the mootools 1.2 framework but cannot get the two to co-exist even with the compatibility layer, without breaking other modules in the Joomla site.
Question
I have a couple of divs with a class of ".box_panel" and I have it so that they on mouseover they go from 50% opacity and back to 100% opacity on mouseleave. The problem I'm having is what is the code to set them to 50% onload?
In mootools 1.2 I used:
<body onload="$$('div.box_panel').fade(0.5);">
The code I'm using for the mouseover/mouseleave effects is:
window.addEvent('domready',function() {
//first, apply a class to each of your menu element
//$$('.links') puts every element wearing the .links class into an array
//$$('.links').each is to browse the array an apply a function to... each of them
$$('.box_panel').each(function(el, i) {
//there comes exactly your former fx statement except for
var ExampleFx = new Fx.Style(el, 'opacity', { //the fact i apply the effect on el
wait: false, //and wait: false which make the effect not waiting (very useful on the mouseout or mouseleave function...
opacity: 0.5,
duration: 500,
transition: Fx.Transitions.Quart.easeInOut
});
//and there i apply (always on el) the effect on mouseenter (similar in this case but often better than mouseover)
//and mouseleave (same for mouseenter but concerning mouesout)
el.addEvent('mouseleave', function() { ExampleFx.start(1, 0.5); });
el.addEvent('mouseenter', function() { ExampleFx.start(0.5, 1); });
});
});
Can you not just add ExampleFx.start(1, 0.5); before the last brackets (after the $$('.box_panel')... statement)?
Simple:
$$('.box_panel').effect('opacity', 0.5);
// run this right after your window.addEvent('domready', function() {
Edit: I were a bit wrong here. Mladen Mihajlovic answered completly correct. Also, here are some links for you:
MooTools 1.11 Documentation
MooTools 1.11 Demos