Webmasters' Guild Friday, June 4, 2010


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

2010 .2 (2/19/10) Webmasters' Guild Friday.4. June 4. ‡ Animations ‡ DOM manipulation ‡ AJAX ‡ Extensibility through plugins ‡jQuery was created by John Resig and released 01/06 ‡Most current release is 1.A Little Bit About jQuery What is jQuery? ‡jQuery is an Open-Source JavaScript framework that simplifies cross-browser client side scripting.

com & Supported forum. minified and Gzipped) ‡Documented api.A Little Bit About jQuery Why should you use it? ‡Easy to learn! It uses CSS syntax for selection ‡Its tiny 71KB ( <. FF 2+ ‡It is the most used JavaScript library on the web today ‡ 39% of all sites that use JavaScript use jQuery. I'm not a liar. Webmasters' Guild ‡Cross browser compatibility: IE 6+.. June 4.jquery. 2010 . ‡ trends.builtwith.

June 4.I <3 The jQuery Community Webmasters' Guild Friday. 2010 .

2010 . June 4.Webmasters' Guild Friday.

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

2010 . June Webmasters' Guild Friday.Who Uses jQuery? Google Amazon IBM Microsoft Twitter Dell docs.

Who Uses jQuery In NY? Alcoholism & Substance Abuse CIO OFT Criminal Justice Labor MTA Port Authority Webmasters' Guild Friday. June 4. 2010 .

2010 . June 4.What is the DOM? Document Object Model (DOM): noun Blah blah blah long definition that makes little sense«. Webmasters' Guild Friday.

2010 .What Is The DOM? Long story short. the DOM is your html document code. so include your scripts at the bottom of the page for best performance. From the <!DOCTYPE> to the </html> The DOM is loaded top to bottom. June 4. The DOM is "ready" when everything on the page has loaded. ‡ Stylesheets ‡ JavaScripts ‡ Images Webmasters' Guild Friday.

Q. Webmasters' Guild Friday. 2010 .Wait!! In order to make sure that jQuery can find the element you asked it for. How can I be sure my code runs at DOM ready? A. your browser needs to have loaded it (the DOM needs to be ready). Wrap all your jQuery code with the document ready function: $(document). sweet jQuery code here« }). June 4.ready(function(){ // insert sweet.

(~9%) 3. Code works« this page load. June 4. throws an error (90%) 2. Huh? Wanna. Code opens a worm hole that transports your page back to 1990 revolutionizing the Web as we know it.And What If I Don't Wanna. 2010 . 1 of 3 things will happen: 1. While seemingly great. * (<1%) *(has yet to be fully verified) Webmasters' Guild Friday. it also creates a paradox and destroys the universe. Code doesn't work. next page load see #1.

June 4. you're a geek« Get to the jQuery already! Your about ta get a wedgie NERD!* *spelling intentional Webmasters' Guild Friday.We get it Eric. 2010 .

June 4.googleapis.4.Loading jQuery In order to use jQuery you need to load You can include it locally on your own server: ± <script src="/js/ 2010 .4.js ± ajax.js"> Or use one of the CDN's made available: ± ± 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.

addClass("isCool"). //keep telling yourself that. June 4. jsbin. 2010 .com/ecayo3/18#slide19 Html: <p>Hello World! I'm Eric</p> Script: $(function(){ $("p"). Resulting html: <p class="isCool">Hello World! I'm Eric</p> Webmasters' Guild Friday. }).And BOOM! Goes The Dynamite..

2010 . Built in method that adds a class to the jQuery ollection lass is in quotes.Break It Down Now! $(function(){// = $(document). Initiates the jQuery function elector is in quotes. Webmasters' Guild Friday. . $ = jQuery }).ready(function(){ $ ("p") Grabs a D usin a element selector. reates a jQuery ³ ollection´ <p> ends with a semicolon.add lass("is ool"). June 4.

June 4. 2010 .com/category/selectors/ Webmasters' Guild Friday.jquery.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.

Get Classy <p> jQuery: $("p"). 2010 . Before: <p> After: <p class="sophisticated"> Webmasters' Guild Friday. June 4.addClass("sophisticated").

com/ecayo3/18#slide22 jQuery: $("p"). June 4. Before: <p class="sophisticated"> After: <p class=""> Webmasters' Guild Friday.This <p> Has No Class At All! jsbin.removeClass("sophisticated"). 2010 .

<div> Hide and Seek June jQuery: $("div"). 2010 . Before: <div style="display:none."> After: <div style="display:block."> Webmasters' Guild Friday.

text("Is Cool").I¶m Not Lame. June jQuery: $("#eric"). Before: <p id="eric">Is Lame</p> After: <p id="eric">Is Cool</p> Webmasters' Guild Friday. Am I? jsbin. 2010 .

You Can Chain Most Methods Together June $("p") . 2010 .addClass("sophisticated") .text("Hello World!") . Webmasters' Guild Friday.

text("Is Cool"). 2010 . $("#eric"). //Prevents default action }).com/ecayo3/18#slide27 $("#eric"). // this = #eric alert("Take that High School!").preventDefault(). June 4.Click Events Are Awesome!{ $(this).click(function(){ $(this).text("Is Cool"). Webmasters' Guild Friday. }). // this = #eric alert("Take that High School!"). event.

June 4.html() .com/ Webmasters' Guild Friday.wrap("<a></a>") .show() .val() ‡ Show a hidden element ‡ wrap an element with <a> ‡ Select parent <p> ‡ Get/Set inner ‡ Get/Set Value api.parent("p") . 2010 M .jquery.Some of Basic Methods .

2010 .Getters and Setters Webmasters' Guild Friday. June 4.

Dual Purpose Methods $(" foo"). 2010 . Webmasters' Guild Friday. $(" foo"). June 4.te t().te t("foo").

June 4.Use jQuery To Get <p>Eric</p> $("p").text(). ‡ myVar === "Eric" Webmasters' Guild Friday. ‡ === "Eric" myVar = $("p"). 2010 .text().

June 4.text("BoBeric"). 2010 . $("p").text(myVar). ‡ myVar === "BoBeric" <p>BoBeric</p> Webmasters' Guild Friday.Use jQuery To Set <p>Eric</p> $("p"). ‡ <p>BoBeric</p> myVar = "BoBeric".

June 4.Questions? Webmasters' Guild Friday. 2010 .

June 4.Plugins Webmasters' Guild Friday. 2010 .

Viva Variety! ³If you want to create an animation. effect or UI component. June 4. 2010 . chances are pretty good that someone has done your work for you already.´ -Eric Steinborn 2010 Webmasters' Guild Friday.jquery.

June 4.I Will Be Covering These Plugins ColorBox tablesorter ListNav ‡ Slideshow plugin ‡ Table formatting & row sorting ‡ Filter long lists Webmasters' Guild Friday. 2010 .

If needed call css <link href="plugincss. Download the plugin from its site. Copy the plugin.pluginInit().css" /> 4. Call jQuery <script src="jQuery. June 4. Call the plugin <script src"jQuery. and any of its dependencies to your server. 2. 1.js"> 5.pluginname.. 3. ± Depending on the plugin you can have 1 or more files to install.js"> 6. 2010 . Webmasters' Guild Friday.That's Just Typical. Initialize plugin $("#mypluginContainer").

com/colorbox/ This is what you'll get Webmasters' Guild Friday.Go-GoGo-Go-Get ColorBox! Go to colorpowered. June 4. 2010 .

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-GoGo-Go-Install ColorBox! Extract min.

Go-GoGo-Go-Prep ColorBox! In the <head> type: <link rel="stylesheet" href="css/colorbox.jpg" rel="colorbox"><img src="sparkles-t.jpg" /></a> <a href="rainbows.js"></script> <script type="text/javascipt"></script> Webmasters' Guild Friday.jpg" rel="colorbox"><img src="rainbows-t.jpg" /></a> <a href="sparkles.colorbox-min. June 4. 2010 .jpg" /></a> Before the ending </body> type: <script type="text/javascipt" src="js/jquery.css" media="screen" /> In the <body> type: <a href="unicorn.jpg" rel="colorbox"><img src="unicorn-t.js"></script> <script type="text/javascipt" src="js/jquery.

</script> Now anytime I click on a thumbnail.colorbox().Go-GoGo-Go-Gadget ColorBox! Inside the empty <script> tag I just entered I'll init ColorBox <script> $(function(){ $("a[rel='colorbox']"). June 4. }). 2010 . Webmasters' Guild Friday. I¶ll see a ColorBox with my image in it.

// set the transition between images speed: 1000 // set the speed of the transition in MS }).com/ecayo3/18#slide41 Set custom options for ColorBox like this: $("a[rel='colorbox']"). // set the speed of the slideshow in MS transition: "fade".colorbox({ slideshow: true. June 4. Download ColorBox @ colorpowered. // shows all your images in sequence slideshowSpeed: 5000. 2010 .Go-GoGo-Go-Cut It Out Already! Webmasters' Guild Friday.

full table code --></table> Foot: <script src="js/jquery. </script> Webmasters' Guild Friday. 2010 . June 4.tablesorter Head: <link href="css/tablesorter.css" /> HTML: <table id="ericsDreams"><!-.js"></script> <script> $(function(){ $("#ericsDreams").tablesorter().tablesorter.min. }).

tablesorter({ widgets: ['zebra'] // Zebra stripes alternating rows }). June Webmasters' Guild Friday. 2010 . Download tablesorter @ Set custom options for tablesorter like this: $("#ericsDreams").tablesorter Options http://jsbin.

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

// Custom text for invalid selections cookieName: "Dreams". // Don¶t show counts above letters noMatchText: "Fail!".com/ecayo3/18#slide45 Set custom options for ListNav like this: $("#ericsDreams"). June Webmasters' Guild Friday. 2010 .listnav({ showCounts: false. // include cookie plugin for cookieName to function Download ListNav @ ihwy. // Selection saved in Cookie includeOther: true // Include an Other option [~!@#] }).ListNav Options jsbin.

4 Cheat Sheet jQuery API jQuery Forums YAYquery Podcast (explicit) DEMOS: jsbin.state.ny. June 4.Great References John Resig's introduction slides jQuery 1.steinborn@dcjs. 2010 .us Webmasters' Guild eric.

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