SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery novice to ninja--navigation animation p.64

    Hi,

    The first major example on p. 64 doesn't work with jquery 1.6.2. I read this thread:

    http://www.sitepoint.com/forums/show...ted-navigation

    but the correction posted there doesn't work either. I didn't expect it to work since it contains this code:

    Code JavaScript:
     $('#navigation_blob').show.animate(

    which I think should be:

    Code JavaScript:
     $('#navigation_blob').show().animate(

    But after fixing that error, the proposed solution still doesn't work for me:

    --
    [00:23:42.313] jQuery.easing[options.animatedProperties[this.prop]] is not a function @ file:///Users/7stud/jquery/jquery.js:8493
    The file jquery.js has this preamble:

    /*!
    * jQuery JavaScript Library v1.6.2
    * http://jquery.com/
    *
    * Copyright 2011, John Resig
    * Dual licensed under the MIT or GPL Version 2 licenses.
    * http://jquery.org/license
    *
    * Includes Sizzle.js
    * http://sizzlejs.com/
    * Copyright 2011, The Dojo Foundation
    * Released under the MIT, BSD, and GPL Licenses.
    *
    * Date: Thu Jun 30 14:16:56 2011 -0400
    */
    And jquery_ujs.js begins with this:

    /**
    * Unobtrusive scripting adapter for jQuery
    *
    * Requires jQuery 1.6.0 or later.
    * https://github.com/rails/jquery-ujs

    Here is my code:
    Code JavaScript:
    <!DOCTYPE html>
    <html>
      <head>
        <title>jquery</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery_ujs.js"></script>
        <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').show().animate(
              {width: $(this).width() + 10, left: $(this).position().left},
              {duration: 'slow', easing: 'easeOutBounce', queue: false}
            );
        }, function() { 
            // Mouse out function
            var leftPosition = $('#navigation li:first a').position().left;
            $('#navigation_blob').show().animate(
              {width:'hide'},
              {duration:'slow', easing: 'easeOutCirc', queue:false}
            ).animate({left: leftPosition}, 'fast' );
        });
     
     
          }); //ready()
     
     
     
        </script>
     
        <style type='text/css'>
     
    #navigation{
        float: right;
        width: 150px;
    }
    #intro{
        width: 450px;
    }
     
    body {
        font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
        color: #3E3E3E;
        background: #94C5EB url(../images/background-grad.png) repeat-x;
        font-size: 12px;
    }
     
    p {
        padding: 5px;
    }
     
    a {
        color: #3687AF;
    }
     
    #container{
        margin:0 auto;
        text-align: left;
        width: 650px;
    }
     
    #header{
        height: 60px;
        color: #172322;
        background: transparent url(../images/header-corners.png) no-repeat bottom left;
    }
     
    #header h1
    {
        padding:0;
        margin:0;
    }
     
    #content{
        background-color: #fff;
        padding: 0 15px 10px 15px;
     
    } 
     
    #footer{
        background-color: #fff;
        padding:15px;
      clear: both;
    }
     
    h2 {
        border-bottom:2px solid #015287;
        color: #D15600;
        padding-top: 10px;
      margin-top: 0;
    }
     
    table {
        border-collapse:collapse;
        font-size:12px;
        margin:0 20px 20px 20px;
        border-top:2px solid #015287;
        width:480px;
    }
     
    th {
        border-bottom: 2px solid #015287;
        color: #D15600;
        font-size: 14px;
        font-weight: normal;
        text-align: left;
        padding: 3px 8px;
    }
     
    td {
        padding: 6px;
    }
     
    #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;
    }
    </style>
    </head>
    <body>
     
      <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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The last post had a link to jsFiddle:

    http://jsfiddle.net/SNg4v/1/

    That code seems to work with any version of jQuery.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The last post had a link to jsFiddle:
    My god. Is that the level of advice that sitepoint has deteriorated to? I said I read that thread, right? What did you think that meant?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Well, that example seems to work, so I'm not sure why you are saying it doesn't. This issue came up earlier in the year, and it doesn't seem it's been fully resolved, but in the thread people were suggesting some workarounds. As I say, that jsFiddle example works, so why you say "the correction posted there doesn't work", it makes it sound like you haven't viewed all of the solutions there. This is a forum where people come voluntarily to chat and help out as best they can, so the "my god" tone just doesn't belong here.

    Unfortunately, the example in the book was based on the version of jQuery available at the time, and subsequent versions of jQuery have changed and broken that functionality. I guess it's a sobering example of how careful one has to be about upgrades and testing before using a new version of a library.

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) I pointed out an error in the jquery code, so it seems to me that the jquery code you can see is not the same code that is running the navigation animation.

    2) The navigation animation at jfiddle works, but what version of jquery is it using?

    3) Why haven't the authors bothered to post some updated code in the book's errata? Without updated code, it's fraudulent to keep offering the book for sale.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by 7stud View Post
    1) I pointed out an error in the jquery code, so it seems to me that the jquery code you can see is not the same code that is running the navigation animation.
    You mentioned that—

    the correction posted there doesn't work either ... it contains this code: $('#navigation_blob').show.animate(
    but the jsFiddle code doesn't contain that error, which is why I was wondering if you hadn't seen it.

    The navigation animation at jfiddle works, but what version of jquery is it using?
    There is an option on the left side to choose lots of versions of jQuery. So you choose a version (including the latest) and then click Run, and it still seems to work, even with the latest version.

    Why haven't the authors bothered to post some updated code in the book's errata? Without updated code, it's fraudulent to keep offering the book for sale.
    It's not actually an erratum. At the time of printing, with the version of jQuery available at the time, it worked perfectly well, and still works perfectly well with that version of jQuery, which is still totally valid to use. The authors can't be held accountable for a change in a later version of jQuery released after the book was published. That's like saying that a book on HTML4 is invalid now because some elements have changed in HTML5.

    That said, I do agree that it would be nice if the authors engaged with their readership more and posted a solution for new versions of jQuery, though. (Or if they have, I've missed it.) Mind you, this is only a very small part of a good book—and a hover effect that I would never be interested to use myself anyhow, so I see it more as a nice little 'proof of concept' than anything else—to show what's possible with jQuery.

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You mentioned that—



    but the jsFiddle code doesn't contain that error, which is why I was wondering if you hadn't seen it.
    I don't understand. When I go to jsfiddle, there are four panes. The bottom left pane contains this js:
    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').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').show.animate(
          {width:'hide'},
                {duration:'slow', easing: 'easeOutCirc', queue:false}
            ).animate({left: leftPosition}, 'fast' );
      });
    That js contains the show error I pointed out, and Firebug flags it as an error. So when you say the js does not contain the show error, what are you talking about?


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
  •