Eric.Steinborn@dcjs.state.ny.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?
Google
Amazon
IBM
Microsoft
Twitter
Dell
docs.jquery.com/Sites_Using_jQuery
Webmasters' Guild
Friday, June 4, 2010
Who Uses jQuery In NY?
Alcoholism
&
Substance Abuse
CIO OFT
Criminal Justice
Labor
MTA
Port Authority
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 about ta get a wedgie NERD!*
*spelling 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(){
$
Initiates
the jQuery
function
("p")
.addClass("isCool
");
Grabs a DOM element
using a CSS selector.
Built in method that adds a
class to the jQuery
Collection
Selector is in quotes.
Class is in quotes.
$
Creates a jQuery
“Collection”
=
jQuery
<p>
ends with a semicolon.
});
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!
$("p")
$("div")
$("#foo")
$(".foo")
<p>
<div>
id="foo"
class="foo"
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
.show()
.wrap("<a></a>")
.parent("p")
• Show a hidden element
• wrap an element with <a>
• Select parent <p>
.html()
• Get/Set innerHTML
.val()
• Get/Set Value
api.jquery.com/
Webmasters' Guild
Friday, June 4, 2010
Getters and Setters
Webmasters' Guild
Friday, June 4, 2010
Dual Purpose Methods
$("#foo").text();
$("#foo").text("foo
");
Webmasters' Guild
Friday, June 4, 2010
Use jQuery To Get
<p>Eric</p>
$("p").text();
• === "Eric"
myVar = $("p").text();
• myVar === "Eric"
Webmasters' Guild
Friday, June 4, 2010
Use jQuery To Set
<p>Eric</p>
$("p").text("BoBeric");
myVar = "BoBeric";
$("p").text(myVar);
• <p>BoBeric</p>
• myVar === "BoBeric"
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
ColorBox
tablesorter
ListNav
• Slideshow plugin
• Table formatting & row sorting
• Filter long lists
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>
Webmasters' Guild
Friday, June 4, 2010
Now anytime I click on a thumbnail, I’ll see a ColorBox with my image in it.
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
});
Webmasters' Guild
Friday, June 4, 2010
Download ColorBox @ colorpowered.com/colorbox/
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();
});
Webmasters' Guild
</script>
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
Webmasters' Guild
Download ListNav @ ihwy.com/Labs/jquery-listnav-plugin.aspx
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
eric.steinborn@dcjs.state.ny.us
Webmasters' Guild
Friday, June 4, 2010
I Like
Plugins!
Show Us
More!
Webmasters' Guild
Friday, June 4, 2010