Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts

    changing content of an element issue.

    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:
    Code:
    $(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.
    Last edited by Majoracle; 06-30-2010 at 09:13 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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...

    Code:
    	$("#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;
    	});

  • Users who have thanked SB65 for this post:

    Majoracle (06-30-2010)

  • #3
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    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.
    Last edited by Majoracle; 06-30-2010 at 05:50 PM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Not only can you get the height this way, you can also set it. No need for that CSS function:
    Code:
    $('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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •