... you write
jQuery: NovicetoNinja (www.sitepoint.com)
iv
jQuery: NovicetoNinja
by EarleCastledineandCraigSharkie
Copyright â 2010 SitePoint Pty. Ltd.
Program Director: Andrew Tetlaw ... instead of pointing the script
tag to a local copy of jQuery, it points to one of Google’s servers.
Unleash your inner jQueryninja today!
24 jQuery: NovicetoNinja
chapter_02/04_filters/script.js ... occur: let’s say jQuery
defined a function called hide (which it has) and you also had a function called
Unleash your inner jQueryninja today!
8 jQuery: NovicetoNinja
It’s...
... specifically designed to serve
7
http:/ /jquery. com/
jQuery: Noviceto Ninja8
Preface
No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or
an actual ninja ninja—virtuosity ... use of the tools
to hand is a ninja s signature. It’s bad form to add even a micro-library when you
don’t need to.
jQuery UI
jQuery has already been used to make some impressive widgets and effects, ... . . . . . . . 408
xv
JQUERY: NOVICE
TO NINJA
BYEARLE CASTLEDINE
& CRAIG SHARKIE
Down l o a d f rom Wo w ! e B o ok <ww w . w o w e book.c o m >
$(<selectors go here>)
We’ll...
...
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
iv
jQuery: NovicetoNinja
by EarleCastledineandCraigSharkie ... term, and now
has brought that keenness to jQuery.
About the Technical Editor
Louis Simoneau joined SitePoint in 2009, after traveling from his native Montréal to Calgary,
Taipei, and finally ... marry me?
Earle
For Jennifer:
People who’ve met me
Only since I’ve known you
Never understand the
Good you’ve lead me to
Always
Craig
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
...
... concepts that are key to understanding
jQuery, and briefly touch on the basic syntax required to call jQuery into action.
Chapter 2: Selecting, Decorating, and Enhancing
Ostensibly, jQuery s most ... available, and learn how
to create our own themes using the jQuery UI ThemeRoller tool.
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
2 jQuery: NovicetoNinja
In the ... it’s then up to the full-fledged ninjato apply that knowledge in
creative and inventive ways.
In recent times, jQuery has proven itself to be a simple but powerful tool for taming
and transforming...
... Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
20 jQuery: NovicetoNinja
jQuery( <selectors go here>)
Or the alias:
$(<selectors ... we’re
going to use a lot of jQuery (and we are), it will quickly become annoying to have
to type the full jQuery function name for every command we use. To combat this
issue, jQuery provides ...
the path tojQuery ninja- hood, we hope you’ll also acquire a bit of respect for and
understanding of JavaScript itself.
In the Chapter 2, we’ll dive into jQueryand start using it to add some...
...
http://api .jquery. com/category/selectors/
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
30 jQuery: NovicetoNinja
you just want to outline an element in red to make sure ... like this:
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
36 jQuery: NovicetoNinja
chapter_02/15_toggle_2/script.js (excerpt)
$('#toggleButton').click(function() ...
called an event handler—an understanding of which is crucial to becoming a jQuery
ninja. There are many event handlers we can use (we’ve used the click event
handler here) and we’ll be using...
... address them later on.
Figure 2.6. prependTo and appendTo in action
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
48 jQuery: NovicetoNinja
chapter_02/33_spoiler_revealer/script.js ... display the new “Tell Me!” buttons, and the original spoiler spans
will be hidden.
Next, we select the new buttons we just added and attach click event handlers to
them. When one of the buttons is ...
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
38 jQuery: NovicetoNinja
The new paragraph will now be given the class new. Using this method you can
create any new elements...
...
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
56 jQuery: NovicetoNinja
■
We use a filter with a selector to grab only the first paragraph tag.
■
A toggle ... chaining andto release the ninja inside of you, you’d
better pay attention to this bit.
Chaining links two or more jQuery actions into a single statement. To chain an action
you simply append it to ... JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
60 jQuery: NovicetoNinja
We want to avoid showing any content when the page loads, so the first thing to do
is to hide all of the content...
... to do is wrap it in our jQuery function to select it.
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
74 jQuery: NovicetoNinja
Our first task is to set up our CSS to ... highlight,
which is a standard way to indicate a new message to the user.
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
68 jQuery: NovicetoNinja
chapter_03/10_animated_navigation_2/navigation.css ... functions to all our event handlers, but now it’s
time to give our function a name:
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
76 jQuery: NovicetoNinja
a...
...
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
88 jQuery: NovicetoNinja
remaining space when you drag the handle. To take care of that, we’re going to have
to do some ...
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
90 jQuery: NovicetoNinja
That’s How We Scroll. And Animate.
What a chapter! We’ve mastered animation, scrolling, and resizing, and ... number of these by
separating them with a comma. For example, { handles : 'n', 'se'} adds handles
to the top and bottom-right of the element.
It’s common to see this kind...
...
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
104 jQuery: NovicetoNinja
the selection programmatically). We need to pass it both a selector for the image to
crop, and the ... to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
102 jQuery: NovicetoNinja
The typical workflow for using the Jcrop plugin would be to display an image to
the user that needs to ... way to skin a jQuery effect, and the
approach we’ll take for our implementation is as follows:
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
110 jQuery: Noviceto Ninja...
... amounts of time and effort. Just be sure to adequately consider
your options!
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
114 jQuery: NovicetoNinja
photo we passed ... we’ll scroll back to the start.
Let’s expand on our code to make it more bulletproof:
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
126 jQuery: NovicetoNinja
chapter_04/14_scrolling_gallery_improved/script.js ... currentPhoto to be greater than the
total number of photos, so we perform a calculation to ensure that the index of the
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
120 jQuery: ...
...
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
140 jQuery: NovicetoNinja
to the div’s parent element (in this case the outer div), and checks to see if there
are any event handlers ... board and some moles. The moles randomly appear on the screen for a few
seconds and then disappear. We might want to attach a handler to each mole to
detect a direct hit, and another handler to ... provide a hint to the user that there’s hidden information to be revealed.
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
134 jQuery: NovicetoNinja
Anyway, back to the code!...
...
http://cherne.net/brian/resources /jquery. hoverIntent.html
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
142 jQuery: NovicetoNinja
We’ll use a CSS sprite to add an indicator to our menu; ...
over a menu and then clicks it, the waiting class will cause it to close when the
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
144 jQuery: NovicetoNinja
timer ... of statement really shows the power of jQuery: we start by
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
146 jQuery: NovicetoNinja
#menu li ul {
position: absolute;...
... 3500);
Licensed to JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
162 jQuery: NovicetoNinja
The first tabs call sets up our tab pane, and the second one instructs jQueryto cycle
through ... JamesCarlson@aol.com
Licensed to JamesCarlson@aol.com
168 jQuery: NovicetoNinja
to our overlay, but in a real application, you’d want to obtain the number of cart
items in order to display it here. ... will only be triggered by jQuery, it stands to reason that it
should be added to the page markup with jQuery as well. The overlay is set up to
be 100% width of the page, and have a height of...