Webmasters' Guild Friday, June 4, 2010 [email protected].

Webmasters' GuildFriday, June 4, 2010

[email protected]


PollPollPollPoll


Just Thought you should know


Eric SteinbornEric 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!


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)

A Little Bit About jQueryA 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..

A Little Bit About jQueryA Little Bit About jQuery


I <3 The jQuery CommunityI <3 The jQuery Community



PWNS All Other FrameworksPWNS All Other Frameworks


Who Uses jQuery?Who Uses jQuery?

docs.jquery.com/Sites_Using_jQuery


Who Uses jQuery In NY?Who Uses jQuery In NY?


What is the DOM?What is the DOM?

Document Object Model (DOM): noun

Blah blah blah long definition that makes little sense….


What Is The DOM?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


Wait!! 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…

});


And What If I Don't Wanna, Huh?And What If I Don't Wanna, Huh?

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)

1 of 3 things will happen:


We get it Eric, you're a geek…We get it Eric, you're a geek…Get to the jQuery already!Get to the jQuery already!

Your about ta get a wedgie NERD!**spelling intentional

Your about ta get a wedgie NERD!**spelling intentional


Loading jQueryLoading 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


Load Scripts At The BottomLoad 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.


And BOOM! Goes The Dynamite.And BOOM! Goes The Dynamite.

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>

jsbin.com/ecayo3/18#slide19


Break It Down Now!Break It Down Now!$(function(){// = $(document).ready(function(){

});

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


All Your Basic Selectors Are Belong To UsAll Your Basic Selectors Are Belong To Us

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

api.jquery.com/category/selectors/


Get Classy <p>Get Classy <p>

jQuery:

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

Before:

<p>

After:

<p class="sophisticated">



This <p> Has No Class At All!This <p> Has No Class At All!

jQuery:

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

Before:

<p class="sophisticated">

After:

<p class="">



<div> Hide and Seek<div> Hide and Seek

jQuery:

$("div").show();

Before:

<div style="display:none;">

After:

<div style="display:block;">



I’m Not Lame, Am I?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>



You Can Chain Most Methods TogetherYou Can Chain Most Methods Together

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



Click Events Are Awesome!Click Events Are Awesome!

$("#eric").click(function(){$(this).text("Is Cool"); // this =

#ericalert("Take that High School!");

});

$("#eric").click(function(event){$(this).text("Is Cool"); // this = #ericalert("Take that High School!");

event.preventDefault(); //Prevents default action});



Some of Basic MethodsSome of Basic Methods

api.jquery.com/


Getters and SettersGetters and SettersGetters and SettersGetters and Setters


Dual Purpose MethodsDual Purpose Methods


Use jQuery To GetUse jQuery To Get

<p>Eric</p>


Use jQuery To SetUse jQuery To Set

<p>Eric</p>


Questions?Questions?


PluginsPluginsPluginsPlugins


Viva Variety!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


I Will Be Covering These PluginsI Will Be Covering These Plugins


That's Just Typical..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();


Go-Go-Get ColorBox!Go-Go-Get ColorBox!

Go to colorpowered.com/colorbox/

This is what you'll get


Go-Go-Install ColorBox!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


Go-Go-Prep ColorBox!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>


Go-Go-Gadget ColorBox!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.


Go-Go-Cut It Out Already!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/



tablesortertablesorter

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>


tablesorter Optionstablesorter Options

Set custom options for tablesorter like this:

$("#ericsDreams").tablesorter({widgets: ['zebra'] // Zebra stripes alternating rows

});

Download tablesorter @ tablesorter.com/docs/

http://jsbin.com/ecayo3/18#slide43


ListNavListNav

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>


ListNav OptionsListNav Options

Set custom options for ListNav like this:

$("#ericsDreams").listnav({ showCounts: false, // Don’t show counts above letters

noMatchText: "Fail!", // Custom text for invalid selectionscookieName: "Dreams", // Selection saved in CookieincludeOther: true // Include an Other option [~!@#]

});

// include cookie plugin for cookieName to functionDownload ListNav @ ihwy.com/Labs/jquery-listnav-plugin.aspx



Great ReferencesGreat 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]


I Like I Like Plugins!Plugins!Show Us Show Us More!More!

Date post:	16-Jan-2016
Category:	Documents
Upload:	ashlyn-oneal
View:	215 times
Download:	0 times

Webmasters' Guild Friday, June 4, 2010 [email protected].

Documents