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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Drop down navigation, when I hover over all buttons quickly, they all stay visible?

    Hello.

    It's probably easiest for you to just slap my code into an html file and take a look.

    I can't figure out why all the corresponding nav content items stay open if you hover over them quickly.

    Try it: Run your mouse over the nav from left to right, or right to left very quickly.

    All 5 of the corresponding div's that display will stay on screen. Yet the function clearly states to hide all others if you hover over one. There is also a mouseleave handler that is supposed to hide ****. If you do it slowly, one by one, it behaves like I want. Why is this? How do I fix it?

    Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#homefeature').mouseout(function(){
            });
    		$('#homefeaturenav td').hover(
    		function(){
    			$(this).css('box-shadow','inset 0px 0px 10px red');
    			$(this).css('-moz-box-shadow','inset 0px 0px 10px red');
    			$(this).css('-webkit-box-shadow','inset 0px 0px 10px red');
    			toDisplay = $(this).attr('name');
    			$('div[id^=con]').hide();
    			$('div #con'+toDisplay).slideDown('slow');
    		},
    		function(){
    			$(this).css('box-shadow','inset 0px 0px 10px #fff');
    			$(this).css('-moz-box-shadow','inset 0px 0px 10px #fff');
    			$(this).css('-webkit-box-shadow','inset 0px 0px 10px #fff');
    		});
    		$('#homefeature').mouseleave(function(){
    			$('.content').hide();
    			$('');
    		});
        });
    </script>
    <style type="text/css">
    	div table td {border: 1px solid #000;text-align:center;box-shadow: inset 0px 0px 10px #fff;-moz-box-shadow: inset 0px 0px 10px #fff;-webkit-box-shadow: inset 0px 0px 10px #fff;}
    	div table td {text-shadow: inset 0px 0px 2px #000;-moz-text-shadow: inset 0px 0px 2px #000;-webkit-text-shadow: inset 0px 0px 2px #000;}
    	.content {height: 50;display:none;background-color:#eb9342;}
    </style>
    <div style="width: 100%; background-color: grey; margin: 50 auto;"></div>
    <div id="homefeature" style="width: 900px; margin: 0 auto;">
        <div id="homefeaturenav" style="height: 50px; width: 100%; background-color: grey;">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td name="1">
                            One
                        </td>
                        <td name="2">
                            Two
                        </td>
                        <td name="3">
                            Three
                        </td>
                        <td name="4">
                            Four
                        </td>
                        <td name="5">
                            Five
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="homefeatureplaceholder" style="height:200px; background-color: #bbb;"> Placeholder. </div>
    	<div id="homefeaturecontent" style="width: 100%;">
    		<div id="con1" class="content">Content 1.</div>
    		<div id="con2" class="content">Content 2.</div>
    		<div id="con3" class="content">Content 3.</div>
    		<div id="con4" class="content">Content 4.</div>
    		<div id="con5" class="content">Content 5.</div>
        </div>
    </div>
    Last edited by sethwb; 09-01-2010 at 11:03 PM.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    I've fixed up a couple of JS errors in the code you posted, and added "px" to the CSS height rule for .content

    The problem you're seeing is because you've still got an animation function running on the div you're trying to hide().

    Try this:

    Code:
    <script type="text/javascript">
    $(function(){
    	$('#homefeaturenav td').hover(
    		function(){
    			$(this).css('box-shadow','inset 0px 0px 10px red');
    			$(this).css('-moz-box-shadow','inset 0px 0px 10px red');
    			$(this).css('-webkit-box-shadow','inset 0px 0px 10px red');
    			$('.content').stop().css('height', '50px').hide();
    			toDisplay = $(this).attr('name');
    			$('div #con'+toDisplay).slideDown('slow');
    		},
    		function(){
    			$('.content').stop().css('height', '50px').hide();
    			$(this).css('box-shadow','inset 0px 0px 10px #fff');
    			$(this).css('-moz-box-shadow','inset 0px 0px 10px #fff');
    			$(this).css('-webkit-box-shadow','inset 0px 0px 10px #fff');
    		}
    	);
    });
    </script>
    Call stop() to remove any current animation, and then manually reset the height of the div back to the default before you hide it.


  •  

    Tags for this Thread

    Posting Permissions

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