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:
/**
- Unobtrusive scripting adapter for jQuery
- Requires jQuery 1.6.0 or later.
- https://github.com/rails/jquery-ujs
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>