http://chrisbiron.com/testing/

This is basically my first time using jQuery, so I'm trying to get familiar with it. Scroll down to the bottom with the "Panel 1 | Panel 2" links, and click "Panel 2". It'll hide the content in focus and fade in some new stuff. That all works great. The problem is you'll notice the page jumps up. I know why this is happening. It's because it hides the content and then fades the new content in. For that split second, before bringing in the new content, the div is empty, so the page collapses. The problem is I don't want that to happen, but I can't come up with solution to prevent it, or at least a decent one.

Here's my custom jQuery:

$(document).ready(function(){
$("#toggle1").click(function(){
$("#box1").slideToggle(1000);
return false;
});
$("#toggle2").click(function(){
$("#box2").slideToggle(1000);
return false;
});
$("#toggle-panel1").click(function(){
$("#panel2").hide();
$("#panel1").fadeIn("slow");
return false;
});
$("#toggle-panel2").click(function(){
$("#panel1").hide();
$("#panel2").fadeIn("slow");
return false;
});
});


Any suggestions appreciated. Thanks.

If you set the height of box3 before hiding the content, and then set it back to auto after the new content has faded in, that seems to stop the jumping. Can't help thinking it isn't a very elegant solution, though...

$("#toggle-panel1").click(function(){
$("#box3").css("height",$("#box3").height());
$("#panel2").hide();
$("#panel1").fadeIn("slow");
$("#box3").css("height","auto");
return false;
});
$("#toggle-panel2").click(function(){
$("#box3").css("height",$("#box3").height());
$("#panel1").hide();
$("#panel2").fadeIn("slow");
$("#box3").css("height","auto");
return false;
});

Works better than what I had, and it's less code. I didn't know you could capture the height of a div that has an auto height with $("#xxx").height();. I'm sure there is probably a better solution out there, but whatever works, works.

Not only can you get the height this way, you can also set it. No need for that CSS function:
$('element').height($('element').height());

If you write something in the brackets of the height function, you set the height, if the brackets are empty you get the height.