SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery toggle code making div jumpy

    Hey I have a button and when its pressed I have it so that a div slides down. The code works both in FF and IE but in IE as the div is sliding down it does sort of like a jumpy or flickry effect? Dont really know how to describe it. Here is my code:

    Code JavaScript:
    	$(document).ready(function(){
    		$("#toolsToggle").toggle(
    			function(){
    				$("#subNavigation").slideDown("fast");
    			},
    			function(){
    				$("#subNavigation").slideUp("fast");
    			}
    		);
    	});

    and the div:

    HTML Code:
    <div id="subNavigation" style="display:none;">
    <table width="1000" height="27" border="0" cellpadding="0" cellspacing="0" align="center">
    	<tr>
    		<td background="images/templateHeader_12.gif" width="1000" align="right" style="padding-right:30px;">
    				<a href="userAdmin.php" style="color:white;"><b>User Admin</b></a> <font color="white"><b>|</b></font> <a href="tools.php" style="color:white;"><b>Tools</b></a>
    		</td>
    	</tr>
    </table>
    </div>
    Does anyone see anything wrong there that may cause this? Thanks.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does #subNavigation have any padding/margin? - if it does then there's your problem.

    A potential solution: Wrap the div in another div and animate it:

    Code JavaScript:
    $(document).ready(function(){
        $("#toolsToggle").toggle(
            function(){
                $("#subNavigation").wrap('<div/>').parent().slideDown("fast");
            },
            function(){
                $("#subNavigation").parent().slideUp("fast");
            }
        );
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks for the reply. No #subNavigation does not have any css other than display:none to hide it when the page is first loaded. I tried the code you provided but it does not work. It doesnt slide down or up at all.

    EDIT: Also just noticed that about 10&#37; of the time it works normally. The other 90% its jumpy.

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My code won't work out of the box because #subNavigation is set to display:none ... if it's only happening in IE it's probably something your just gonna have to live with.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just dont get why this doesnt work. Its exactly how its shown on the Jquery docs. I created a file called test.html and slapped the following code on there

    HTML Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#toolsToggle").click(function (){
    			$("#subNavigation").slideToggle("slow");
    		});
    	});
    </script>
    <a href="#" id="toolsToggle">TEST</a>
    <div id="subNavigation" style="display:none;">
    	asd
    </div>
    Is it flickering and jumping for anyone else?

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works perfectly for me in IE(7)/FF/Safari. http://qd9.co.uk/sp/js/jqueryToggle_PHPmonkey.html
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW I finally fingured it out. I had a mistake in my code that wasnt shown here. I had <html> on top of the DOCTYPE. Thats why it was crapping out. I put it in the correct order and its working fine now. Thanks JimmyP for the time.

  8. #8
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This was my issue as well only in IE, I just used:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    and worked like a charm no more skipping...
    Last edited by bigfish1; Jan 4, 2011 at 10:36. Reason: spelling


Bookmarks

Posting Permissions

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