SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Novice To Ninja - Animated navigation

    A few months ago there was another thread about the Animated navigation in the jQuery, Novice To Ninja book ( http://www.sitepoint.com/forums/show...ted+navigation ). It starts at page 64 and ends at page 67.

    I struggled a lot with this, and I found out now that it doesn't work with the newer versions of jQuery. jQuery version 1.4.2 still works, but from version 1.4.3 and higher it doesn't work any more.

    It also doesn't solve the problem when putting the newer file into the same folder as the other js-files.

    When I embed the 1.4.3-plugin in the exercise file from the book, it also doesn't work any more.

    Is something changed in the newer jQuery-versions, and is there a workaround for this? Maybe it's possible to put a solution in the 'corrections and typos'-section of this book?

    Thanks for your help

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by robdewinter View Post
    I found out now that it doesn't work with the newer versions of jQuery. jQuery version 1.4.2 still works, but from version 1.4.3 and higher it doesn't work any more.
    I just tried it with jQuery version 1.5 and it works fine. Have you checked your file paths?

    PS: Hi robdewinter, welcome to SitePoint!

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, jQuery 1.5 doesn't work with me, neither in the exercise file. I tried the googleapi link, and tried to place it in the folder. I checked the file paths and they are okey, connections are fine, when I replace an older file than 1.4.2 it doesn't work. Have you used the first animated navigation (with the #navigation_blob)? Thanks for your welcome by the way

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I have only just started the book, so jumped ahead to test that file. Which file is the navigation_blob in? Let me know and I'll test it out.

  5. #5
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The file is in the lesson 3 folder, 09_animated_navigation (the first one).

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Huh, interesting. Yes, the 09 menu doesn't seem to work right with JQ 1.5, though the dropdown in folder 10 does. Hmm, that's a worry.

  7. #7
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for trying. It also doesn't work when making the exercise (even with the corrected code on page 66 --> the ; after left;} is a mistake).

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The problem seems to be that animating a hidden element causes that element to show in 1.4, but in 1.5 it doesn't.

    Where with 1.4.0, 1.4.1, 1.4.2, 1.4.3, 1.4.4 and 1.5.0 does the problem occur?

    1.4.0, 1.4.1 and 1.4.2 work fine.
    From 1.4.3 onwards is where things stop working.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    One solution is to remove all of the parts that hide/show the blob, and then add a final piece to set the blob's width once you leave it.

    Code:
    $('<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 leftWidth = $('#navigation li:first a').width();
        var leftPosition = $('#navigation li:first a').position().left;
        $('#navigation_blob').animate(
            {width :'hide'},
            {duration:'slow', easing: 'easeOutCirc', queue:false}
        ).animate({width: leftWidth + 10, left: leftPosition}, 'fast' );
    });
    That way you're left with code that works.

    Code javascript:
     
    $('<div id="navigation_blob"></div>').css({
        width: $('#navigation li:first a').width() + 10,
        height: $('#navigation li:first a').height() + 10
    }).appendTo('#navigation');
     
    $('#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 leftWidth = $('#navigation li:first a').width();
        var leftPosition = $('#navigation li:first a').position().left;
        $('#navigation_blob').animate(
            {},
            {duration:'slow', easing: 'easeOutCirc', queue:false}
        ).animate({width: leftWidth + 10, left: leftPosition}, 'fast' );
    });

    You can then later on work out how to implement a hiding mechanism, if the need for it is strong enough.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I just got up to this part of the book, and noticed that the code in the download files is different from the code in the actual book. So I replaced the code in script.js with the code in the book and it works perfectly even with jQuery version 1.5.1. The authors obviously just forgot to update the download files.

    Here's the code from the book:

    Code:
    $(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');
    
      $('#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 () {
      $('#navigation-blob')
      .stop(true)
      .animate(
      {width: 'hide'},
      {duration: 'slow', easing: 'easeOutCirc', queue: false}
      )
      .animate(
      {left: $('#navigation li:first a').position().left},
      'fast'
      );
    EDIT:
    Sorry guys, forget this. The code doesn't work. It only appeared to work because I had a typo (I had navigation_blob instead of navigation-blob in the last section of code). So the hover only worked partially.

  11. #11
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems like all you have to do is call show() before calling animate() on hover for the first hover function:

    Code:
    $('#navigation a').hover(function(){ 
        // Mouse over function
    	  $('#navigation_blob').show().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' );
      });

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kinakuta.james View Post
    It seems like all you have to do is call show() before calling animate() on hover for the first hover function
    Have you tried this with jQuery 5 though? I doesn't seem to work with that.

  13. #13
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code was relying on calls to animate() to "show" the div - apparently this wasn't the behavior they intended so they changed it and this broke code which relied on that behavior (which seemed like a side effect anyway.) If you just explicity call show() before you call animate, the code will work as intended (tried it on 1.5.1 and it works as expected.)

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hm, do you mind posting the full script you are using then? Nothing happens for me with JQ5 with the code you posted, but perhaps I don't use it correctly. Pasted it in where it seemed to belong.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, do you mind posting the full script you are using then? Nothing happens for me with JQ5 with the code you posted, but perhaps I don't use it correctly. Pasted it in where it seemed to belong.
    Can you please link is to this JQ5 that you are using? It's one that I don't think I have come across before.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the code with the show() call added (in orange):

    Code:
    $(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').show().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' );
      });
    });

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Can you please link is to this JQ5 that you are using? It's one that I don't think I have come across before.
    Ah heck, cancel that. I made a file path typo, and the changes do work with jquery 1.5. It's a little bit flaky, but at least the behavior is essentially as intended. Well done kinakuta.james.

    Paul, sorry for the confusion. By "JQ5" I just meant the latest version (1.5.2) from the jQuery site: jQuery: The Write Less, Do More, JavaScript Library. I should have said "JQ 1.5". Duh.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Paul, sorry for the confusion. By "JQ5" I just meant the latest version (1.5.2) from the jQuery site: jQuery: The Write Less, Do More, JavaScript Library. I should have said "JQ 1.5". Duh.
    Phew. It's good to know we're on track.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So that the code isn't "flaky" add show to mouseout also.

    You can see the code here

    jsFiddle - animated menu

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Nice work roigron. Thanks for putting that code together like that.

  21. #21
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks roigron - I struggled with this for a while before finding your very helpful layout!


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
  •