Intro To Jquery Nysforum

Eric.Steinborn@dcjs.state.ny.
us
Webmasters' Guild
Friday, June 4, 2010
Poll
Webmasters' Guild
Just Thought you should know
Webmasters' Guild
Eric Steinborn
IT2P @ NYS Division of Criminal Justice Services since 2006
15+ years experience with web technologies
Work in a group of 3
– Maintain our intranet (DCJSnet)
– Help with internet and extranet sites
A few things I'm awesome at are:
CSS, JavaScript, Interactivity, Prog Enhancement, UX, SEO, Accessibility
I do what I love -> I love my job!
Webmasters' Guild
A Little Bit About jQuery
What is jQuery?
•jQuery is an Open-Source JavaScript framework that
simplifies cross-browser client side scripting.
• Animations
• DOM manipulation
• AJAX
• Extensibility through plugins
•jQuery was created by John Resig and released 01/06
•Most current release is 1.4.2 (2/19/10)
Webmasters' Guild
A Little Bit About jQuery
Why should you use it?
•Easy to learn! It uses CSS syntax for selection
•Its tiny 71KB (24KB, minified and Gzipped)

•Documented api.jquery.com & Supported forum.jquery.com
•Cross browser compatibility: IE 6+, FF 2+
•It is the most used JavaScript library on the web today

• 39% of all sites that use JavaScript use jQuery.
• trends.builtwith.com/javascript/JQuery <- See, I'm not a liar..
Webmasters' Guild
I <3 The jQuery Community
Webmasters' Guild
Webmasters' Guild
PWNS All Other Frameworks
Webmasters' Guild
Who Uses jQuery?
docs.jquery.com/Sites_Using_jQuery
Webmasters' Guild
Who Uses jQuery In NY?
Webmasters' Guild
What is the DOM?
Document Object Model (DOM):

noun
Blah blah blah long definition
that makes little sense….
Webmasters' Guild
What Is The DOM?
Long story short, the DOM is your html document code. From the
<!DOCTYPE> to the </html>
The DOM is loaded top to bottom, so include your scripts at the bottom
of the page for best performance.
The DOM is "ready" when everything on the page has loaded.

• Stylesheets
• JavaScripts
• Images
Webmasters' Guild
Wait!!
In order to make sure that jQuery can find the element you asked it for,
your browser needs to have loaded it (the DOM needs to be ready).
Q. How can I be sure my code runs at DOM ready?

A. Wrap all your jQuery code with the document ready function:
$(document).ready(function(){
// insert sweet, sweet jQuery code
here…
});
Webmasters' Guild
And What If I Don't Wanna, Huh?
1 of 3 things will happen:
1. Code doesn't work, throws an error (90%)
2. Code works… this page load, next page load see #1. (~9%)
3. Code opens a worm hole that transports your page back to 1990 revolutionizing the Web as we
know it. While seemingly great, it also creates a paradox and destroys the universe. * (<1%)
*(has yet to be fully verified)
Webmasters' Guild
We get it Eric, you're a geek…
Get to the jQuery already!
Your
Your about
about ta
ta get
get aa wedgie
wedgie NERD!*
NERD!*
*spelling
*spelling intentional
intentional
Webmasters' Guild
Loading jQuery
In order to use jQuery you need to load it.

You can include it locally on your own server:
– <script src="/js/jquery.js">
Or use one of the CDN's made available:

– ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
– ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js
– CDN's are Gzipped and minified
Webmasters' Guild
Load Scripts At The Bottom
Problem:
When scripts are downloading they block everything else in almost all browsers!
Solution:
Best practice: Load your scripts at the bottom of your page so they don't interrupt
page content downloads.
Webmasters' Guild
And BOOM! Goes The Dynamite.
jsbin.com/ecayo3/18#slide19
Html:
<p>Hello World! I'm Eric</p>

Script:
$(function(){
$("p").addClass("isCool");
//keep telling yourself that..
});
Resulting html:
<p class="isCool">Hello World! I'm Eric</p>
Webmasters' Guild
Break It Down Now!
$(function(){// = $(document).ready(function(){
$ ("p") .addClass("isCool");
});
Webmasters' Guild
All Your Basic Selectors Are Belong To Us
Uses the same syntax you use to style elements in CSS!
api.jquery.com/category/selectors/
Webmasters' Guild
Get Classy <p>
jQuery:
$("p").addClass("sophisticated");
Before:
<p>
After:
<p class="sophisticated">
Webmasters' Guild
This <p> Has No Class At All!
jQuery:
$("p").removeClass("sophisticated");
Before:
<p class="sophisticated">
After:
<p class="">
Webmasters' Guild
<div> Hide and Seek
jQuery:
$("div").show();
Before:
<div style="display:none;">
After:
<div style="display:block;">
Webmasters' Guild
I’m Not Lame, Am I?
jQuery:
$("#eric").text("Is Cool");
Before:
<p id="eric">Is Lame</p>
After:
<p id="eric">Is Cool</p>
Webmasters' Guild
You Can Chain Most Methods Together
$("p")
.addClass("sophisticated")
.text("Hello World!")
.show();
Webmasters' Guild
Click Events Are Awesome!
$("#eric").click(function(){
$(this).text("Is Cool"); // this = #eric
alert("Take that High School!");
});
$("#eric").click(function(event){
$(this).text("Is Cool"); // this = #eric
alert("Take that High School!");
event.preventDefault(); //Prevents default action
});
Webmasters' Guild
Some of Basic Methods
api.jquery.com/
Webmasters' Guild
Getters and Setters
Webmasters' Guild
Dual Purpose Methods
Webmasters' Guild
Use jQuery To Get
<p>Eric</p>
Webmasters' Guild
Use jQuery To Set
<p>Eric</p>
Webmasters' Guild
Questions?
Webmasters' Guild
Plugins
Webmasters' Guild
Viva Variety!
“If you want to create an animation, effect or UI component, chances
are pretty good that someone has done your work for you already.”
-Eric Steinborn 2010
plugins.jquery.com
Webmasters' Guild
I Will Be Covering These Plugins
Webmasters' Guild
That's Just Typical..
1. Download the plugin from its site.
– Depending on the plugin you can have 1 or more files to install.
2. Copy the plugin, and any of its dependencies to your server.
3. If needed call css <link href="plugincss.css" />
4. Call jQuery <script src="jQuery.js">
5. Call the plugin <script src"jQuery.pluginname.js">
6. Initialize plugin $("#mypluginContainer").pluginInit();
Webmasters' Guild
Go-Go-Get ColorBox!
Go to colorpowered.com/colorbox/
This is what you'll get
Webmasters' Guild
Go-Go-Install ColorBox!
Extract min.js to my "/js/plugins/" folder
I like example 2 so I'll extract

These to my /css/ folder
Webmasters' Guild
Go-Go-Prep ColorBox!
In the <head> type:
<link rel="stylesheet" href="css/colorbox.css" media="screen" />
In the <body> type:

<a href="unicorn.jpg" rel="colorbox"><img src="unicorn-t.jpg" /></a>
<a href="rainbows.jpg" rel="colorbox"><img src="rainbows-t.jpg" /></a>
<a href="sparkles.jpg" rel="colorbox"><img src="sparkles-t.jpg" /></a>
Before the ending </body> type:

<script type="text/javascipt" src="js/jquery.js"></script>
<script type="text/javascipt" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascipt"></script>
Webmasters' Guild
Go-Go-Gadget ColorBox!
Inside the empty <script> tag I just entered I'll init ColorBox
<script>
$(function(){
$("a[rel='colorbox']").colorbox();
});
</script>
Now anytime I click on a thumbnail, I’ll see a ColorBox with my image in it.
Webmasters' Guild
Go-Go-Cut It Out Already!
Set custom options for ColorBox like this:

$("a[rel='colorbox']").colorbox({
slideshow: true, // shows all your images in sequence
slideshowSpeed: 5000, // set the speed of the slideshow in MS
transition: "fade",// set the transition between images
speed: 1000 // set the speed of the transition in MS
});
Download ColorBox @ colorpowered.com/colorbox/
Webmasters' Guild
tablesorter
Head:
<link href="css/tablesorter.css" />
HTML:
<table id="ericsDreams"></table>
Foot:
<script src="js/jquery.tablesorter.min.js"></script>
<script>
$(function(){
$("#ericsDreams").tablesorter();
});
</script>
Webmasters' Guild
tablesorter Options
http://jsbin.com/ecayo3/18#slide43
Set custom options for tablesorter like this:

$("#ericsDreams").tablesorter({
widgets: ['zebra'] // Zebra stripes alternating rows
});
Download tablesorter @ tablesorter.com/docs/
Webmasters' Guild
ListNav
Head:
<link href="css/listnav.css" />
HTML:
<div id="ericsDreams-nav"></div> 
<ul id="ericsDreams"> </ul>
Foot:
<script src="js/jquery.listnav.min.2.1.js"></script>
<script>
$(function(){
$("#ericsDreams").listnav();
});
</script>
Webmasters' Guild
ListNav Options
Set custom options for ListNav like this:

$("#ericsDreams").listnav({
showCounts: false, // Don’t show counts above letters
noMatchText: "Fail!", // Custom text for invalid selections
cookieName: "Dreams", // Selection saved in Cookie
includeOther: true // Include an Other option [~!@#]
});
// include cookie plugin for cookieName to function

Download ListNav @ ihwy.com/Labs/jquery-listnav-plugin.aspx
Webmasters' Guild
Great References
John Resig's introduction slides
jQuery 1.4 Cheat Sheet
jQuery API
jQuery Forums
YAYquery Podcast (explicit)
DEMOS:
jsbin.com/ecayo3/18
eric.steinborn@dcjs.state.ny.us
Webmasters' Guild
I Like
Plugins!
Show Us
More!
Webmasters' Guild

Intro To Jquery Nysforum

Uploaded by

Copyright:

Available Formats

You might also like

Intro To Jquery Nysforum

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Intro To Jquery Nysforum

Uploaded by

Copyright:

Available Formats

Eric.Steinborn@dcjs.state.ny.

15+ years experience with web technologies

– Help with internet and extranet sites

A few things I'm awesome at are:

CSS, JavaScript, Interactivity, Prog Enhancement, UX, SEO, Accessibility

I do what I love -> I love my job!

• Extensibility through plugins

•jQuery was created by John Resig and released 01/06

•Most current release is 1.4.2 (2/19/10)

•Easy to learn! It uses CSS syntax for selection

•Its tiny 71KB (24KB, minified and Gzipped)

•Cross browser compatibility: IE 6+, FF 2+

•It is the most used JavaScript library on the web today

Document Object Model (DOM):

The DOM is "ready" when everything on the page has loaded.

Q. How can I be sure my code runs at DOM ready?

*(has yet to be fully verified)

In order to use jQuery you need to load it.

Or use one of the CDN's made available:

– CDN's are Gzipped and minified

<p>Hello World! I'm Eric</p>

<p class="isCool">Hello World! I'm Eric</p>

Uses the same syntax you use to style elements in CSS!

2. Copy the plugin, and any of its dependencies to your server.

3. If needed call css <link href="plugincss.css" />

4. Call jQuery <script src="jQuery.js">

5. Call the plugin <script src"jQuery.pluginname.js">

6. Initialize plugin $("#mypluginContainer").pluginInit();

This is what you'll get

I like example 2 so I'll extract

In the <body> type:

Before the ending </body> type:

Set custom options for ColorBox like this:

Download ColorBox @ colorpowered.com/colorbox/

Set custom options for tablesorter like this:

Download tablesorter @ tablesorter.com/docs/

Set custom options for ListNav like this:

// include cookie plugin for cookieName to function

You might also like