Eric.Steinborn@dcjs.state.ny.us

1. Eric.Steinborn@dcjs.state.ny.us

2. Poll

3. Just Thought you should know

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

6. A Little Bit About jQuery 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.. Why should you use it?

7. I <3 The jQuery Community

9. PWNS All Other Frameworks

10. Who Uses jQuery? docs.jquery.com/Sites_Using_jQuery

11. Who Uses jQuery In NY?

12. What is the DOM? Document Object Model (DOM): noun Blah blah blah long definition that makes little sense….

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

14. 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. And What If I Don't Wanna, Huh? 1 of 3 things will happen: • Code doesn't work, throws an error (90%) • Code works… this page load, next page load see #1. (~9%) • 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)

16. We get it Eric, you're a geek…Get to the jQuery already! Your about ta get a wedgie NERD!* *spelling intentional

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

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

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

21. All Your Basic Selectors Are Belong To Us • Uses the same syntax you use to style elements in CSS! api.jquery.com/category/selectors/

22. Get Classy <p> jsbin.com/ecayo3/18#slide22 • jQuery: $("p").addClass("sophisticated"); • Before: <p> • After: <p class="sophisticated">

23. This <p> Has No Class At All! jsbin.com/ecayo3/18#slide22 • jQuery: $("p").removeClass("sophisticated"); • Before: <p class="sophisticated"> • After: <p class="">

24. <div> Hide and Seek jsbin.com/ecayo3/18#slide24 • jQuery: $("div").show(); • Before: <div style="display:none;"> • After: <div style="display:block;">

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

26. You Can Chain Most Methods Together jsbin.com/ecayo3/18#slide26 • $("p") • .addClass("sophisticated") • .text("Hello World!") • .show();

27. 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 • });

28. Some of Basic Methods api.jquery.com/

29. Getters and Setters

30. Dual Purpose Methods

31. Use jQuery To Get <p>Eric</p>

32. Use jQuery To Set <p>Eric</p>

33. Questions?

34. Plugins

35. 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. I Will Be Covering These Plugins

37. That's Just Typical.. • Download the plugin from its site. • Depending on the plugin you can have 1 or more files to install. • Copy the plugin, and any of its dependencies to your server. • If needed call css <link href="plugincss.css" /> • Call jQuery <script src="jQuery.js"> • Call the plugin <script src"jQuery.pluginname.js"> • Initialize plugin $("#mypluginContainer").pluginInit();

38. Go-Go-Get ColorBox! • Go to colorpowered.com/colorbox/ • This is what you'll get

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

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

42. 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/

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

44. 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/

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

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

47. 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. I Like Plugins!Show Us More!