SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery mouseenter sliding panel help

    I have a button that when you hover over a sliding panel comes out underneath it from the left. If works fine...the problem is if I hover over the button then move to the adjacent panel then back to the button it repeats the animation. I want it so if the panel is already open it won't repeat the animation.

    Here is my code:

    Code JavaScript:
    $('#flashContent').mouseenter(function() {
    		$('#panel').animate({'left':0,'opacity':1},300);
    	});
     
    	$('#panel').mouseleave(function() {
    		$(this).animate({'left':'-500px','opacity':0},300);
    	});

    When it's opened, the #flashContent button is inside/surrounded by the #panel.

    Any help would be appreciated thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You could check the opacity of the panel, and only if it's less than 1 do you perform the animation.

    Code javascript:
    if ($('#panel').css('opacity') < 1) {
        ...
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do I put inside that if statement to tell it not to animate?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You can surround the animate statement with an if statement, so that the animate part will only occur when the condition of the if statement is true.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the following...

    Code:
    $('#flashContent').mouseenter(function() {
    	var $panel = $('#panel');        
    	if($panel.is(':hidden')) { $panel.animate({'left':0,'opacity':1},300); }
    });
    $('#panel').mouseleave(function() {
            $(this).animate({'left':'-500px','opacity':0},300);
    });
    Hope this helps.

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this code and it's not working.

    I also need to remove the transparency because IE7 does some strange antialiasing with a black border to the text. But that's another story.

    When I try the code above it won't animate out at all. Could this be because the div is off screen by negative positioning rather than being :hidden?

    I tried to write an if statement for if it has a left value of -500px but I'm horrible at programming and can't get it to work.

    This is what I've got now....
    Code JavaScript:
    $('#flashContent').mouseenter(function() {
    		$('#panel').animate({'left':0},300);
    	});
     
    	$('#panel').mouseleave(function() {
    		$(this).animate({'left':'-500px'},300);
    	});

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post all of the code and I will have a look, the IE7 issue is something I have comes across before, umm.. ClearType bug, I think.

  8. #8
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a working example cAPS lOCK..
    Code:
    <!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">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <style>
        div#flashcontent {  background-color: #ccc;
                            width: 50px; }
        div#panel{  
                    background-color: #ccc;
                    height: 100px;
                    left: -500px;
                    top: 0;
                    width: 200px;
        }            
        </style>
        <title></title>
    </head>
    <body>
    
    <div id="flashContent">Show</div>
    <div id="panel"></div>
    
    <script type="text/javascript">
    
        $(document).ready(function () {
            $('#flashContent').mouseenter(function () {
                var $panel = $('#panel');
                if ($panel.css('opacity') < 1) { $panel.animate({ 'left': 0, 'opacity': 1 }, 300); }
            });
            $('#panel').mouseleave(function () {
                $(this).animate({ 'left': '-500px', 'opacity': 0 }, 300);
            });
        
        
        });
    </script>
    
    </body>
    </html>
    To explain, the previous :hidden attribute did not work as jQuery sees the div as not hidden as it was still consuming space on the page, my mistake. The code now just checks the opacity value, hope this helps.

  9. #9
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. The problem is now when I hover over the #flashContent button the panel slides out fine. But if I move my mouse out of the button slightly then back on it slides back again. Like it mouseleaves the #panel when it goes back to the button. This seems like a real usability problem.

    Here is my current code. I may just have to rethink this whole fancy navigation or at least not have them take up the same space.

    I also removed the opacity just to not deal with the IE7 problem.

    Code JavaScript:
    $('#flashContent').mouseenter(function () {
                var $panel = $('#panel');
                if ($panel.css('left') == '-500px') { $panel.animate({ 'left': 0 }, 300); }
            });
            $('#panel').mouseleave(function () {
                $('#panel').animate({ 'left': '-500px' }, 300);
        });

  10. #10
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know what you mean, but it would be easier if I can see all of your code so I can visually see the problem..

  11. #11
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Header with the nav

    Code HTML4Strict:
    <div class="header"><!-- #BeginLibraryItem "/Library/header.lbi" -->
    		<a href="index.html"><img src="images/logo.png" border="0" class="png" id="logo" /></a>
    		<div id="nav-button">Navigate</div>
    		<div id="flashContent">
    			<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="226" height="31" id="nav-text" align="middle">
    				<param name="movie" value="swf/nav-text.swf" />
    				<param name="quality" value="high" />
    				<param name="bgcolor" value="#ffffff" />
    				<param name="play" value="true" />
    				<param name="loop" value="true" />
    				<param name="wmode" value="transparent" />
    				<param name="scale" value="showall" />
    				<param name="menu" value="true" />
    				<param name="devicefont" value="false" />
    				<param name="salign" value="" />
    				<param name="allowScriptAccess" value="sameDomain" />
    				<!--[if !IE]>-->
    				<object type="application/x-shockwave-flash" data="swf/nav-text.swf" width="226" height="31">
    					<param name="movie" value="swf/nav-text.swf" />
    					<param name="quality" value="high" />
    					<param name="bgcolor" value="#ffffff" />
    					<param name="play" value="true" />
    					<param name="loop" value="true" />
    					<param name="wmode" value="transparent" />
    					<param name="scale" value="showall" />
    					<param name="menu" value="true" />
    					<param name="devicefont" value="false" />
    					<param name="salign" value="" />
    					<param name="allowScriptAccess" value="sameDomain" />
    				<!--<![endif]-->
    					<a href="http://www.adobe.com/go/getflash">
    						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    					</a>
    				<!--[if !IE]>-->
    				</object>
    				<!--<![endif]-->
    			</object>
    		</div>	
    		<div id="panel">
    			<div class="navlinks-container">
    			<ul class="nav">
    				<li><a href="about.html">about</a></li>
    				<li><a href="resources.html">resources</a></li>
    				<li><a href="incentives.html">incentives</a></li>
    			</ul>
    			<ul class="nav">
    				<li><a href="partners.html">partners</a></li>
    				<li><a href="news.html">news</a></li>
    				<li><a href="contact.html">contact</a></li>
    			</ul>
    			</div>
     
    		</div><!-- #EndLibraryItem --></div>

    CSS for nav

    Code CSS:
    #nav-button { text-indent: -9999px; background: transparent url(../images/nav-button.png) left top no-repeat; color: #fff; width: 226px; height: 31px; position: absolute; left: 0; top: 37px; cursor: pointer; z-index: 9; }
    #flashContent { position: absolute; left: 0; top: 37px; cursor: pointer; z-index: 10; }
    #panel { width: 500px; height: 125px; background: transparent url(../images/panel.png) left top no-repeat; position: absolute; z-index: 8; top: 0; left: -500px; }
    .navlinks-container { margin: 18px 0 0 260px; }
    .nav { float: left; width: 100px; }
    	.nav li { margin-bottom: 10px; padding-left: 10px; background: url(../images/nav-dot-green.png) left 8px no-repeat; }
    		.nav li a { font-size: 14px; font-weight: bold; font-family: "proxima-nova-1","proxima-nova-2", Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; font-weight:700; }
    			.nav li a:hover { color: #2280B6; }

  12. #12
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having looked at all the code it looks like the #panel is sliding back when it shouldn't be is because you have a forced height on your #panel and therefore your floated ul's are bursting out. If you take the forced height of the #panel div then it will contain the ul's and the mouseleave event won't execute unless you move away from the #panel div, which contains all the floated ul's. Hope this helps...


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
  •