1. Webmasters' Guild Friday, June 4, 2010 Eric.Steinborn@dcjs.state.ny.us

2. Webmasters' Guild Friday, June 4, 2010PollPoll

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

4. 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!

5. Webmasters' Guild Friday, June 4, 2010 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 jQuery

6. Webmasters' Guild Friday, June 4, 2010 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.comapi.jquery.comforum.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..trends.builtwith.com/javascript/JQuery A Little Bit About jQuery

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

8. Webmasters' Guild Friday, June 4, 2010

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

10. Webmasters' Guild Friday, June 4, 2010 Who Uses jQuery? GoogleAmazonIBM MicrosoftTwitterDell docs.jquery.com/Sites_Using_jQuery

11. Webmasters' Guild Friday, June 4, 2010 Who Uses jQuery In NY? Alcoholism & Substance Abuse CIO OFTCriminal Justice LaborMTAPort Authority

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

13. Webmasters' Guild Friday, June 4, 2010 What Is The DOM? Long story short, the DOM is your html document code. From the to the 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

14. 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… });

15. Webmasters' Guild Friday, June 4, 2010 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:

16. 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 Your about ta get a wedgie NERD!* *spelling intentional

17. 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: – Or use one of the CDN's made available: –ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.jsajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js –ajax.microsoft.com/ajax/jquery/jquery-1.4.2.jsajax.microsoft.com/ajax/jquery/jquery-1.4.2.js –CDN's are Gzipped and minified

18. 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.

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

20. Webmasters' Guild Friday, June 4, 2010 Break It Down Now! $(function(){// = $(document).ready(function(){ }); $ Initiates the jQuery function $ = jQuery ("p") Grabs a DOM element using a CSS selector. Selector is in quotes. Creates a jQuery “Collection”.addClass("isCool "); Built in method that adds a class to the jQuery Collection Class is in quotes.ends with a semicolon.

21. 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") id="foo" $(".foo") class="fo o" api.jquery.com/category/selectors/

22. Webmasters' Guild Friday, June 4, 2010 Get Classy jQuery: $("p").addClass("sophisticated"); Before: After: jsbin.com/ecayo3/18#slide22

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

24. Webmasters' Guild Friday, June 4, 2010 Hide and Seek Hide and Seek jQuery: $("div").show(); Before: After: jsbin.com/ecayo3/18#slide24

25. Webmasters' Guild Friday, June 4, 2010 I’m Not Lame, Am I? jQuery: $("#eric").text("Is Cool"); Before: Is Lame After: Is Cool jsbin.com/ecayo3/18#slide25

26. Webmasters' Guild Friday, June 4, 2010 You Can Chain Most Methods Together $("p").addClass("sophisticated").text("Hello World!").show(); jsbin.com/ecayo3/18#slide26

27. Webmasters' Guild Friday, June 4, 2010 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 }); jsbin.com/ecayo3/18#slide27

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

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

30. Webmasters' Guild Friday, June 4, 2010 Dual Purpose Methods $("#foo").text(); $("#foo").text("foo ");

31. Webmasters' Guild Friday, June 4, 2010 Use jQuery To Get Eric === "Eric" $("p").text(); myVar === "Eric" myVar = $("p").text();

32. Webmasters' Guild Friday, June 4, 2010 Use jQuery To Set Eric BoBeric $("p").text("BoBeric") ; myVar === "BoBeric" BoBeric myVar = "BoBeric"; $("p").text(myVar);

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

34. Webmasters' Guild Friday, June 4, 2010PluginsPlugins

35. 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

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

37. 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 4.Call jQuery 5.Call the plugin 6.Initialize plugin $("#mypluginContainer").pluginInit();

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

39. 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

40. Webmasters' Guild Friday, June 4, 2010 Go-Go-Prep ColorBox! In the type: In the type: Before the ending type:

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

42. Webmasters' Guild Friday, June 4, 2010 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/colorpowered.com/colorbox/ jsbin.com/ecayo3/18#slide41

43. Webmasters' Guild Friday, June 4, 2010 tablesorter Head: HTML: Foot: $(function(){ $("#ericsDreams").tablesorter(); });

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

45. Webmasters' Guild Friday, June 4, 2010 ListNav Head: HTML: Foot: $(function(){ $("#ericsDreams").listnav(); });

46. Webmasters' Guild Friday, June 4, 2010 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 ihwy.com/Labs/jquery-listnav-plugin.aspx jsbin.com/ecayo3/18#slide45

47. 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 eric.steinborn@dcjs.state.ny.us

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