[email protected].

us
Webmasters' Guild
Friday, June 4, 2010
Poll

Webmasters' Guild
Friday, June 4, 2010
Just Thought you should know

Webmasters' Guild
Friday, June 4, 2010
 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
Friday, June 4, 2010
 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
Friday, June 4, 2010
 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
Friday, June 4, 2010
I <3 The jQuery Community

Webmasters' Guild
Friday, June 4, 2010
 Webmasters' Guild
Friday, June 4, 2010
PWNS All Other Frameworks

Webmasters' Guild
Friday, June 4, 2010
Who Uses jQuery?

docs.jquery.com/Sites_Using_jQuery
Webmasters' Guild
Friday, June 4, 2010
Who Uses jQuery In NY?

Webmasters' Guild
Friday, June 4, 2010
What is the DOM?

Document Object Model (DOM):

noun
Blah blah blah long definition
that makes little sense….

Webmasters' Guild
Friday, June 4, 2010
 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
Friday, June 4, 2010
 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
Friday, June 4, 2010
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
Friday, June 4, 2010
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
Friday, June 4, 2010
 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
Friday, June 4, 2010
 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
Friday, June 4, 2010
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
Friday, June 4, 2010
 Break It Down Now!
$(function(){// = $(document).ready(function(){

$ ("p") .addClass("isCool");

});

Webmasters' Guild
Friday, June 4, 2010
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
Friday, June 4, 2010
 Get Classy <p>
jsbin.com/ecayo3/18#slide22

jQuery:
$("p").addClass("sophisticated");

Before:
<p>

After:
<p class="sophisticated">

Webmasters' Guild
Friday, June 4, 2010
 This <p> Has No Class At All!
jsbin.com/ecayo3/18#slide22

jQuery:
$("p").removeClass("sophisticated");

Before:
<p class="sophisticated">

After:
<p class="">

Webmasters' Guild
Friday, June 4, 2010
 <div> Hide and Seek
jsbin.com/ecayo3/18#slide24

jQuery:
$("div").show();

Before:
<div style="display:none;">

After:
<div style="display:block;">

Webmasters' Guild
Friday, June 4, 2010
 I’m Not Lame, Am I?
jsbin.com/ecayo3/18#slide25

jQuery:
$("#eric").text("Is Cool");

Before:
<p id="eric">Is Lame</p>

After:
<p id="eric">Is Cool</p>

Webmasters' Guild
Friday, June 4, 2010
You Can Chain Most Methods Together
jsbin.com/ecayo3/18#slide26

$("p")
.addClass("sophisticated")
.text("Hello World!")
.show();

Webmasters' Guild
Friday, June 4, 2010
 Click Events Are Awesome!
jsbin.com/ecayo3/18#slide27

$("#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
Friday, June 4, 2010
Some of Basic Methods

api.jquery.com/
Webmasters' Guild
Friday, June 4, 2010
Getters and Setters

Webmasters' Guild
Friday, June 4, 2010
Dual Purpose Methods

Webmasters' Guild
Friday, June 4, 2010
 Use jQuery To Get

<p>Eric</p>

Webmasters' Guild
Friday, June 4, 2010
 Use jQuery To Set

<p>Eric</p>

Webmasters' Guild
Friday, June 4, 2010
Questions?

Webmasters' Guild
Friday, June 4, 2010
Plugins

Webmasters' Guild
Friday, June 4, 2010
 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
Friday, June 4, 2010
I Will Be Covering These Plugins

Webmasters' Guild
Friday, June 4, 2010
 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
Friday, June 4, 2010
 Go-Go-Get ColorBox!
Go to colorpowered.com/colorbox/

This is what you'll get

Webmasters' Guild
Friday, June 4, 2010
 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
Friday, June 4, 2010
 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
Friday, June 4, 2010
 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
Friday, June 4, 2010
 Go-Go-Cut It Out Already!
jsbin.com/ecayo3/18#slide41

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
Friday, June 4, 2010
 tablesorter
Head:
<link href="css/tablesorter.css" />
HTML:
<table id="ericsDreams"><!-- full table code --></table>
Foot:
<script src="js/jquery.tablesorter.min.js"></script>
<script>
$(function(){
$("#ericsDreams").tablesorter();
});
</script>

Webmasters' Guild
Friday, June 4, 2010
 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
Friday, June 4, 2010
 ListNav
Head:
<link href="css/listnav.css" />
HTML:
<div id="ericsDreams-nav"></div> <!--needed for nav list-->
<ul id="ericsDreams"> <!-- lots of li's --></ul>
Foot:
<script src="js/jquery.listnav.min.2.1.js"></script>
<script>
$(function(){
$("#ericsDreams").listnav();
});
</script>

Webmasters' Guild
Friday, June 4, 2010
 ListNav Options
jsbin.com/ecayo3/18#slide45

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
Friday, June 4, 2010
 Great References
John Resig's introduction slides
jQuery 1.4 Cheat Sheet
jQuery API
jQuery Forums
YAYquery Podcast (explicit)

DEMOS:
jsbin.com/ecayo3/18

[email protected]

Webmasters' Guild
Friday, June 4, 2010
I Like
Plugins!
Show Us
More!

Webmasters' Guild
Friday, June 4, 2010