If you check the following link for my working example:
http://jsfiddle.net/xavi3r/Cd8cV/
You can see that when prepend() is invoked the positioning is lost within the animation and the order in which elements are placed seems to get distorted; (check HTML to see output);
$('#container .animateMe').prepend($('#container .animateMe .copy ').clone().removeClass('copy').removeClass('active'));
I have a solution, but it doesn't solve the prepend problem. If you click any button when the animation is still happening, the squares become offset.
This is an edit where the click event becomes unbinded to your left and right buttons as the animation is happening. This stops another animation running at the same time, and the squares don't get offset. The event gets rebinded at the end of the animation callback.
Check it out :
http://jsfiddle.net/SxFPc/
I have merged your left and right click methods into a single handler since they were doing the same thing, apart from the position offset.
Related
I'm using jQuery.kinetic to allow a div to be scrolled within its parent div by dragging the mouse, just like the demo on the author's site
I want to add a button, which upon clicking it, moves the jQuery.kinetic activated div to a certain position, however I could not find how to do this. I know the scrollLeft and scrollRight methods can be called to change the position, exactly as I want:
$("container-selector").kinetic("scrollLeft", 50);
$("container-selector").kinetic("scrollTop", 480);
However I wish the change in positions to be animated, not immediate like how the code above does it.
Would anybody know how to smoothly move the draggable div to a specified position upon the clicking of a button, and have this animated? Thanks!
From the demo page HERE
$('#yourButtonIdOrClass').click(function() {
$('.container-selector').kinetic('start', { velocity: -10 }); // code to move your container
});
From the Doc's
Start movement in the scroll container at a particular velocity.
This velocity will not slow until the end method is called.
So you need to call the end() method to stop the div from scrolling either to the end of the right hand side or end of the left hand side, you might want to use the moved event and check how much the container has moved something like the below:
moved : function() {
if() // check moved position {
$('.container-selector').kinetic('end');
}
}
The above code will go inside the initialization of the plugin.
NOTE:: you can use the dev tools to check the event listeners attached to the left or right buttons.
I'm trying to position an absolute positioned div using jQuery offset() function.
The idea is to position it at a fixed offset from another element of the DOM. This happens in a quite complex environment with multiple nested divs.
The strange thing that happens is that calling it twice gives two different results. To me it seems there is no reason for this, although I am quite new at jQuery so I could be oversighting something obvious.
I do think that
var pos = $(document.getElementById(someElementInTheDOM)).offset();
$(document.getElementById(MyDiv)).offset( pos );
should position MyDiv always in the same place, even if I call this code some 10 times. That's what correctly happens in this fiddle. Click on the magnifying glass several times, everything is ok.
But as soon as I start adding display:none and display:block properties the thing gets disrupted. I tried to bring it down to basic and I created a fiddle here. To see what I mean press on the magnifying glass, click on the magnifying glass again, click on the magnifying glass once more, close the div by the white "X", click on the magnifying glass once more.
Any clue what's going on?
You just have to change the order:
document.getElementById("iuocboun_filter_window").style.display="block";
$(document.getElementById("iuocboun_filter_window")).offset( pos );
instead of
$(document.getElementById("iuocboun_filter_window")).offset( pos );
document.getElementById("iuocboun_filter_window").style.display="block";
EDIT:
Explanation: The offset does not work on hidden elements, thats why you have to make it first visible and than set the offset. ;)
I am trying to write a simple vertical JavaScript carousel that'll rotate a couple of elements. It works quite well but I am having a hard time figuring out how to keep the amount of elements. As you can see in this JSFiddle, http://jsfiddle.net/xznfQ/2/, the first one is "queued" away and reappears after a round. Can anyone tell me what I am doing wrong?
I guess something is wrong with these two lines:
$(e).eq(1).slideUp('slow'); // Slide next element up over the previous
$(e).eq(0).appendTo(a).show('slow'); // Place the current element at the bottom
Kind regards,
Mathias.
You want to hide the first element, e(0) and only after that move it to the end! You want:
$(e).eq(0).slideUp('slow', function () {
$(e).eq(0).appendTo(a).show('slow');
});
Your code:
$(e).eq(1).slideUp('slow');
Slowly hides the element and returns immediately. Then:
$(e).eq(0).appendTo(a).show('slow');
Moves the first element to the end immediately and slowly shows it. This meant you had the second element disappearing and the first element appearing at the end. So the list had one hidden at all times.
I built a slideshow-menu (using Slide JS - http://www.slidesjs.com/ ) and added a hover-event, so images will already switch when moving the mouse over the menu point. Additionally, when moving out of the whole block, there's a mouseleave event, which sets the image and menu point back to the first one.
Now when I quickly switch between menu points (hover event) and then leave the whole block (mouseleave), it usually skips the mouseleave event (- or it never reaches it because the hover events (including a fade effect) take up too long).
Is there a way to thoroughly work off each event (or at least the last one in a row - e.g. mouseleave or last hover)?
Maybe an image of the website layout helps?
Red: Hover-Event (changes green content)
Blue: Mouseleave-Event (green goes back to default)
If the fade effect is the culprit, then try adding a stop(true, true) function before your fade effect.
$(slideshow-menu-selector).on('mouseleave', function(){
// Reset code here
$(element-selector).stop(true, true).fadeOut();
})
This is just a sample code, based on your question. If you can put up a Fiddle, it would help a lot!
Live Demo with visible code; http://jsfiddle.net/3eEgb/4/
The demo should be fairly self explanatory; I'm finding the length of a sentence inside a wrapper with the overflow hidden, and if it's wider than the wrapper I'm running an animation function that slides it along, revealing the remaining text.
However I'm having problems with the mouseout part of the hover() function. When the user mouses out I'd like the text to snap back to it's starting position.
According to the documentation (http://api.jquery.com/stop/) I should be able to .stop() the animation on the object - but I must be missing some detail because I can't get it to work as documented. If I could get .stop() to function I presume I can chain it with .css() to set margin:0 to move the text back to it's original position.
$(this).stop().css("color", "red"); //This isn't working ARR!
is the source of my frustrations. I've tried all the various ways I could think of to no avail.
Thanks!
You're animating the .width element, but stopping the .track-version element.
Change the mouseleave handler to $(e).find(".width").stop().