Develop Reference

Jquery UI slide - element sliding in at wrong position then abruptly shifting

I'm trying to have a div slide in at the same time as another one slides out, but when sliding in the div is completely invisible at the target location until the slide animation is complete. I'm not sure why this is happening. Does it have something to do with the iframe that is in the location at the time of the slide?
Here is an example of the issue. jsfiddle.net/eqck8vn2/1/ when you click the Twitter tab on the left, instead of smoothly sliding in, it scrolls in at a position right below the currently visible element (the iframe) before just appearing at the final position (even though there is a sliding animation applied to it without any specified positioning).
Thanks in advance for any help.

Detect mouse scroll actions jQuery

I am developing a image gallery and was successful up to doing the scrolling. Images slide left and right when the mouse scrolls up and right respectively. I used animate({"top","left"},500) to animate images as sliding. But my problem is that when the mouse scrolls two or more times at once it takes 1000ms to complete because on each scrolling animation is called.
Is there any way to speed up the image animation with respect to mouse scroll speed?
I can't give you any code because I don't whether this can be done. ANY SUGGESTION ON HOW TO IMPLEMENT THIS?
EDIT
posn is an array with top and left, var posn = [{x:"50%",y:"50%"},{x:"40%",y:"70%"},{x:"30%",y:"90%"},{x:"30%",y:"10%"},{x:"40%",y:"30%"}];
$("#photo0").animate({"top":""+posn[0].x,"left":""+posn[0].y},500);
$("#photo1").animate({"top":""+posn[1].x,"left":""+posn[1].y},500);
There are 5 photos with #photo2,#photo3,#photo4

You can debounce the scroll callback so that it isn't fired as frequently while scrolling. If you make sure it only fires every 500 ms (the same duration as your animation) the two should line up nicely.

Change div position ontouchdrag (if such an event is usable)

Basically, I have a web page which is a div inside a div. Let's say that div 1 (the container) is 500px high. Div 2 is 100px high inside of that container. What I want to do is detect the user touching div 2 on the screen (this is a web page on a mobile phone) and as they drag up/down, the div moves with them. I've done some research and have seen this being done using matrix3d and transform y in CSS 3 (but I can't find a good explanation for someone with little experience with this sort of thing such as myself). I want it so that, let's say, the user drags the second div to the bottom and some of the content goes outside of the container div. I don't want it to scroll down, I do want it to disappear... BUT I want it to kind of 'bounce' back into view. So here's the breakdown.
user presses the screen
user drags div 2 which is inside of div 1. As they drag the div, it moves in the direction of their drag.
the user can drag the div right to the top/bottom. If they drag it outside of the container div, that's fine. The container div should not resize or become scrollable and part of div 2 should disappear from view.
when the user releases the drag, the div should bounce back into position. Let's say, if it is dragged too high up, it bounces back to position 100, 100. If it's dragged too far down then it bounces back to 100, 500 (I figure the bounce can be controlled by a CSS transition).
So, does anyone have an example that I can look at to see this in action or a tutorial that will help me understand how I can achieve this? I apologise for not providing any code as a basis to start from, but in truth, I don't really know where to start myself.
Any help is greatly appreciated.

The safari dev docs are your friend:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Checkout the the touch move section for moving a div, for your case you want to set conditionals for if the user goes outside the bounds of your outer div, and disable scrolling using overflow hidden.

Slider sliding back to the first image

I am using jQuery to slide through some images.
The slide animation is achieved using:
$('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition)});
This works fine, however when I reach the final image, and it loops back to the start, this animation will quickly slide through all of the previous elements to display the first (obviously because I am suddenly reducing the left margin).
What code would I need to write in order to allow the transition from last image back to first image to continue being a LEFT slide animation, displaying only the transition from last slide to first (without showing all other slides).
To make things a little more complex, I have left/right buttons allowing the user to move forward/backwards through the slider. These work fine, but it does mean that the solution cannot break these buttons.
Thank you.

Make a div fall off the page

So I have been playing with jQuery for a good time now and I'm trying to get an effect to work properly. I have a main square div in the middle of the page and when someone clicks a link I want the box to look like its falling off the page and disappear, revealing a new page behind it. I'v been playing with the easing plugin but I can seem to get what I want to work. Basically I have the div's top margin or just top distance increased to a large number. However, this just makes the div fall but it also expands my page and its just much lower on the page. I basically want the div to fall out of site and not change the dimensions of the site. Anyone know how to do that?
Thanks!
Danny

To prevent your page from redimensionning upon clicking on your link, add overflow:hidden to your div container 's css properties.
also, make sure you hide the div when the animation ends.
$('a').click(function(){
$('#thediv').parent().css('overflow','hidden');
$('#thediv').animate({'top': '+=500px', opacity: 0},function(){
$(this).hide();
});
});