We Keep Coding

Smooth scrolling page when using jQuery ui resizable

So what I want to know is how can I scroll the page down smoothly as I resize a div past the bottom of the browser.
So far what I have set up is that when you resize the div and it gets to the last 30px of of the browser, it starts to scroll the page down. That part works, but it's jerky when doing so.
My code:
// $maxHeight is set above this, it just takes all the elements within the div and and get's the total height and set that as maxHeight
$('.notifications-drop-down').resizable({
maxHeight: $maxHeight,
minHeight: 400,
handles: {
's': '.ui-resizable-s'
},
resize: function(event, ui){
if((ui.position.top + ui.size.height) > ($(window).scrollTop() + $(window).height() - 30)){
$(window).scrollTop($(window).scrollTop()+10);
}
}
});
What I tried to fix this:
Adding an animate function to the scrollTop to make it smoother
$('html,body').animate({scrollTop: $(window).scrollTop()+30}, 200);
But that does not work smoothly. I have changed the animation duration and it's still not smooth. Does anyone know what I can do it get this to be smooth?
Something I noticed was that when the page scrolls down it does not recognize that the div is in the bottom 30px so it's not recalculating if it should scroll down more (you need to wiggle your cursor while resizing the div for it to work), I did try and add the same code for scrolling down to the resizable's stop function but that didn't help as well.
Thanks for the time.

javascript, changing image with animation

I have a page where in the center of the screen there is a div, and below there are a few links. Each link, when clicked, must show in the div a different image. When a link is clicked, the current image must move to the left of the screen and fade out, at the same time the new image must appear from the right with fading and place itself in the div. What I did until now is in the following script, called on each link with
OnClick=("changeImage('name')")
function changeImage(param){
var image = $("#div");
image.animate({"queue": true, opacity: 0.0, right: '650px'}, 1200);
image.attr('src', 'img/'+param+'.png');
}
At the moment the images changes before moving to the left. Then it disappears.
I'd like the first image to move, fade out and then the second to appear from right.
Can you help me?
Thank you

$("#div").click(function(){
var image = $(this);
var param = 'example';
image.animate({opacity: 0.0, right: '1000px'}, 1200).delay(100).animate({opacity: 1, right: '200px'}, 1200);
setTimeout(function(){ image.attr('src', 'img/'+param+'.png').css('right','-1000px'); },1200);
});
Fiddle: http://jsfiddle.net/nKpqU/
jQuery's effects queue only applies to just that: effects and animations. I also changed your onclick setup to bind the click event with jQuery's .click.

jQuery - delete element if exists body area

I am using jQuery animate to change the position of multiple elements on the page (decorative elements). I want the element to be deleted if it exits body area. (if left is larger than body width or top is larger than body height).
The following can not be used in my case:
overflow hidden for the body
manually animating the element. I want to use jQuery animate to keep it simple (I dinamically create elements, animate them then I don't care about them, don't keep track of them, they have a .remove() methode when the animation is complete)
http://jsfiddle.net/a7Nck/
So in this JSfiddle I want the red div to dissappear when it reaches right edge of the body so that no scrollbars will appear.
Isn't there any CSS3 media query for example so that if a div is not in the viewport it will be hidden?
EDIT:
I just thought of a solution: get the width of the body prior to triggering the animation and then animate the top and left by using the minimum between the body size and what the animation should do. The problem is that this will affect animation speed.

You can use animate's step function.
The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.
var w = $(window).width()
$('div').animate({
left: '20px'
}, 500).delay(1000).animate({
left: '2000px'
}, {
step: function(now, fx) {
if (now > w) {
$(fx.elem).remove()
}
}
}, 1000);
Fiddle

One possible workaround (assuming your first restriction is about globally adding overflow: hidden on your CSS): add overflow: hidden with js when the animation starts, and remove it when it ends:
$('body').css('overflow', 'hidden');
$('div').animate({left: '20px'},400).delay(1000).animate(
{left: '2000px'},1000, false, function(){
$(this).hide();
$('body').css('overflow', 'auto');
});​
http://jsfiddle.net/a7Nck/3/

Just hide the div when the last animation get completed i.e.
$('div').animate({left: '20px'},400).delay(1000).animate({left: '2000px'},1000, function(){ $(this).hide(); });
See DEMO

As soon as the div leaves the visible area, the scrollbar will appear. If you want to prevent the scrollbar from appearing, you can't allow the div to leave the screen. Here's my solution:
$('div')
.animate({left: '20px'},400)
.delay(1000)
.animate(
{left: ($(window).width()-$('div').width()) + "px"},
1000,
null, // default easing
function() { $('div').hide() }
);
Jsfiddle: http://jsfiddle.net/j4rdA/1/
​

Wait till image is loaded and resized before triggering animation?

$("#body-background").ezBgResize();
$("#nav").animate({
left: "-725px"
}, 800, "easeOutCirc" );
$("#page .home").animate({
right: "0px"
}, 800, "easeOutCirc" );
This is essentially my code.
The first line uses jQuery Easy Background Resize: (ref: http://johnpatrickgiven.com/jquery/background-resize/)
In the HTML, you put something like this:
<!-- This gets positioned absolutely so place it anywhere. -->
<div id="body-background"><img src="image/bg.jpg" alt="Bg"></div>
The problem I'm having is that the image takes so long to load the first time, the animations don't fire...and skip to the end. Anyway I can delay the animation till after the resize is complete?
Thanks in advance.
Edit: The site I'm working on: http://jsc.yondershorecreative.com/

Best thing I can do is simulate the image preloader and wait for the load event of it:
// grab the background image object
var img = $('#body-background img');
// next, create a new hidden image in the background and bind to the load event
var nImg = $('<img>').bind('load',function(){
// this is where your "After load" code would go
});
// next, give the image the same URL of the image for the background
// this will force the event to load up and call the load event
nImg.attr('src',img.attr('src'));
Works in jsFiddle (Just change the number after the ? in the image URL to simulate emptying cache). Let me know if that helps.
Update (Given commentary below)
<script type="text/javascript">
$('#body-background').azBgResize();
var homepageAnimation = function(){
$("#nav").animate({
left: "-725px"
}, 800, "easeOutCirc" );
$("#page .home").animate({
right: "0px"
}, 800, "easeOutCirc" );
}
$(window).load(function(){
setTimeout(homepageAnimation,1000);
});
</script>

jquery .animate() - this code sort of does what i want

I am trying to make a div slide down when the mouse moves over another div just above it. Basically the div above it is just the trigger that makes the div slide down. Mouseover of .trigger makes .slidedown expand, and mouseout of .slidedown makes itself slide back up. Here's the code i have so far:
$(document).ready(function() {
$('.slidedown').hide();
//When mouse rolls over
$('.trigger').mouseover(function(){
$('.slidedown').stop().animate({
height: ['toggle', 'swing'],
}, 600, function() {
// Animation complete.
});
});
//When mouse is removed
$('.slidedown').mouseout(function(){
$('.slidedown').stop().animate({
height:'0px'
}, 600, function() {
// Animation complete.
});
});
});
This works, but there are just two teaks i need help with. Firstly, after mouseout and the .slidedown div slides up and disappears, if i then mouse over the .trigger div again, nothing happens. It should make the .slidedown move down again. I need it to every time keep working. I tried removing the .stop() but it still doesn't work.
Also can i make it also slide back up if the mouse moves out of .trigger but only if it isn't moving out of .trigger into .slidedown? This is so incase the user doesn't move the mouse into .slidedown, it would remain forever which isn't good. Or just have a time limit that it can remain expanded if the mouse doesn't move over .slidedown.
Second, is there a way to make a delay of around 1 second between mouseout and the div sliding back up? Thanks for your help!

You might try using the jQuery hover event. For the delay, you can put the closing animation in setTimeout:
$(document).ready( function(){
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
You might also look into the hoverIntent plug-in for more nuanced control over the mouseenter/mouseleave behavior, including timing.

I think you'll find that setting a numerical height in $('.trigger').mouseover() may help the animation be repeatable. FYI, you can set an integer number for something like height or width in jQuery and it will automatically set the unit to px for you.
As Ken pointed out, setTimeout is useful for a delay in code, but keep it in your $('.slidedown').mouseout() event or the slideown div will hide after you mouseout of the trigger div instead of when you leave the slidedown div as you specified.