Jquery novice to ninja--navigation animation p.64

JavaScript
1

Hi,

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

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

 $('#navigation_blob').show.animate(

which I think should be:

 $('#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:

/**

Here is my code:


<!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

The last post had a link to jsFiddle:

That code seems to work with any version of jQuery.

3

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

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

  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

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

I don’t understand. When I go to jsfiddle, there are four panes. The bottom left pane contains this js:


  $('<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?