SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery: Animated Navigation (from book Novice to Ninja) is not working

    Hi.

    I'm learning jquery from book Novice to Ninja and the Animated Navigation (site 64) is not working with jquery-1.5.1.min.js (it's workin fine with the old one - jquery-1.4.min.js but since there is new jquery avaliable i really don't want to use the old one).

    Here is the code...

    Code JavaScript:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
     
    <style type="text/css">
    <!--
    #head {
    	padding-left: 20px;
    }
     
    #navigation {	
      margin: 0 0 10px 0;
      padding: 0;
    	list-style-type: none;  
    	position: relative;
    	z-index: 1;
     
    	/* overwrite base */
    	float:none;
    	width:100%;
    }
     
    #navigation ul {
      margin: 0;
      padding: 0;
    }
     
    #navigation li {
    	display: inline;
    	margin: 0;
    	padding: 0;
    }
     
    #navigation a {
    	color: #015287;
    	display: inline-block;
    	padding: 5px;
    	text-decoration: none;
    }
     
    #navigation_blob {
      top: 0;
    	background-color: #c0ffee;
    	position: absolute;
    	z-index: -1;
    }
     
    p#intro {
      clear: both;
      margin-top: 10px;
    }
     
    -->
    </style>
    </head>
     
    <body>
    <script type="text/javascript">
     
    $(document).ready(function(){
      $('<div id="navigation_blob"></div>').css({
    		width: $('#navigation li:first a').width() + 10,
    		height: $('#navigation li:first a').height() + 10
    	}).appendTo('#navigation').hide();
     
      $('#navigation a').hover(function(){ 
        // Mouse over function
    	  $('#navigation_blob').animate(
          {width: $(this).width() + 10, left: $(this).position().left},
    	    {duration: 'slow', easing: 'easeOutElastic', queue: false}
        );
      }, function() { 
    	  // Mouse out function
    	  var leftPosition = $('#navigation li:first a').position().left;
    	  $('#navigation_blob').animate(
          {width:'hide'},
    			{duration:'slow', easing: 'easeOutCirc', queue:false}
    		).animate({left: leftPosition}, 'fast' );
      });
    });
     
     
    </script>	
          <div id="navigation">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Buy Now!</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Gift Ideas</a></li>
            </ul>
          </div>
    </body>
    </html>


    Any suggestion what do i have to cange in jquery code to be compatible with jquery-1.5.1.min.js?

  2. #2
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for info. I have checked where is the problem with FireBug - when the mouse is over the link with jquery-1.5.1.min.js "<div id="navigation_blob"...." has property display:none (which of course hide the hover effect) with jquery-1.4.min.js it is correct display:block.

    Any suggestion what should i change?


    Thank you in advance for the answers...


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
  •