1. Presented at NCDevCon 2011 by: Denard Springle

2. Freelance Software Systems Engineer Rich internet and mobile applications Hardware, network and storage engineering CMMI process management & assessment Over 20 years IT experience Over 10 years ColdFusion experience Host of the Northern Virginia CFUG denard.springle@gmail.com http://www.nvcfug.org/

3. Traditional Web Design Pet Peeve #1 – Multiple return trips to graphics applications (aka longer development cycles). Pet Peeve #2 – Multiple images make for slower loading sites. Pet Peeve #3 – Requires multiple designs and complicated Javascript for multi-screen development. Pet Peeve #4 – Interactive elements require multiple images. CSS3, HTML5 & jQuery Virtually eliminates the need for graphics applications beyond composition. Virtually eliminates the need for images. Uses style sheets and media queries to support multi-screen development. jQuery has a Mobile edition. Allows interactive elements to be created and styled with or without images with ease.

4. Javascript RAD framework Handles cross-browser dependencies* Uses familiar CSS language selectors Packed with handy utility functions (like Ajax) Loads of available plugin’s or roll your own Works with other Javascript frameworks (including ColdFusion’s built-in functions) Works with native Javascript functions Works with (most) emerging standards (CSS3, HTML5) * Some plugin’s have cross-browser issues because they employ Javascript functions that are browser specific, or rely on deprecated jQuery 1.3 functions.

5. Download from http://docs.jquery.com/Downloading_jQuery http://docs.jquery.com/Downloading_jQuery Download with jQuery UI themeroller Google CDN @ MSDN CDN @ jQuery CDN @

6. jQuery(document).ready(function() { … code here … }); $(funtion() { … code here … }); $ == alias for ‘jQuery’

7. $(‘#myDiv’) – selects the element identified by the ‘myDiv’ id $(‘.myClass’) – selects any element assigned the ‘myClass’ class $(‘div’) – selects all elements in the page

8. Hello World ! $(‘p’) – selects all paragraph elements in the page $(‘#myDiv p’) – selects all paragraph elements within the element with the ‘myDiv’ id $(‘.myClass p’) – selects all paragraph elements within the elements assigned the ‘myClass’ class. $(‘p#world’) – selects the element within any paragraph element with the ‘world’ id.

9. Hello World ! $(‘#myDiv p span.red’) – selects all elements assigned the ‘red’ class within a paragraph element that is within the element with the ‘myDiv’ id. $(‘#myDiv > p’) – selects all paragraph elements that are direct children of the element with the ‘myDiv’ id. $(‘#myDiv + p’) – selects the paragraph element that is immediately preceded by the element with the ‘myDiv’ id

10. Hello World ! Welcome to our website. We hope you like it! $(‘#myDiv p:first’) – selects the first paragraph element that is within the element with the ‘myDiv’ id. $(‘#myDiv p:last’) – selects the last paragraph element that is within the element with the ‘myDiv’ id. $(‘p:even’) – selects all even paragraph elements in the page

11. jQuery $(“a[href^=‘http://’]”).attr(‘target’,’_blank’); $(“a[href^=’http://’]”).addClass(‘external’); $(“a[href^=‘http://’]”).css(‘fontWeight’,’bold’); $(“a[href^=‘http://’]”).attr(‘target’,’_blank’).addClass(‘external’). css(‘fontWeight’,’bold’);

12. attr(name) – obtains the value assigned to the specified attribute for the first element in the matched set. attr(name,value) – sets the named attribute to the passed value for all elements in the matched set. attr(attributes) – uses a JSON object to set corresponding attributes onto all elements of the matched set.

13. alert($(‘#myImage’).attr(‘title’)); $(‘#newImage’).attr(‘src’,$(‘#myImage’).attr(‘src’)); $(‘#myImage’).attr(‘alt’,’alternate image text’); $(‘#myImage’).attr({title: ’Bang!’, alt: ‘alternate image text’}); $(‘#newImage’).attr(‘alt’,$(‘#myImage’).attr(‘title’));

14. hasClass(name) – returns true if any element of the matched set possesses the passed class name. addClass(names) – specifies the name, or names, of classes to add to the matched set. removeClass(names) – specifies the name, or names, of classes to remove from the matched set. toggleClass(names) – specifies the name, or names, of classes that should be removed if they are present, or added if they are not present in the matched set

15. css(name) – reads the value of the CSS property for the first element in the matched set css(name,value) – sets the value of the named css property for each element in the matched set css(properties) – sets the values using a JSON object for each element in the matched set width(), width(value) – reads the width of the first element or sets the width of all elements in the matched set height(), height(value) – reads the height of the first element or sets the height of all elements in the matched set

16. html() – obtains the HTML content of the first element in the matched set html(content) – sets the passed HTML fragment as the content of all elements in the matched set text() – concatenates and returns all text content of the matched set text(content) – sets the text content of all elements in the matched set

17. bind() – bind an event handler to all elements in a matched set unbind() – removes an event handler from all elements in a matched set All javascript events (mouseover, mouseout, mousedown, focus, blur, select, submit, etc.)

18. $(‘#myButton’).bind(‘mouseover mouseout’, function() { $(this).toggleClass(‘highlight’); } ); $(‘.data-entry’).bind(‘focus’, function() { $(this).css({backgroundColor: ‘#000’, color: ‘#fff’}); } );

19. click() – bind a click event handler to an element $(‘#myButton’).click(function() { window.location.href = ‘clickedPage.cfm’; }); dblclick() – bind a double-click handler to an element $(‘#myButton’).dblclick(function() { $(this).width(300).height(100); });

20. live() – bind an event handler to a matched set that does not (yet) exist in the dom $(‘#myButton’).live(‘mousedown’,function() { window.location.href = ‘clickedPage.cfm’; }); die() – unbinds an event handler bound with live Use sparingly. Resource hog. Has to re-read the dom for every change in the dom

21. $.ajax({options}) Provides complete control over the entire AJAX process including specifying data sources, data type, event handlers, context, filters, etc. etc. All other Ajax functions are a subset of the $.ajax() function. Requires JSON and callback handler

22. load() – loads HTML content into the wrapped set. Callback function is optional $.get() – makes HTTP GET requests and requires a callback function $.getJSON – makes HTTP GET requests with a defined return data type of JSON, requires a callback function

23. $.post() – makes HTTP POSTs and requires a callback function $.ajax(), $.get() and $.post() response types: xml – passes XML dom to the callback function html – passes unprocessed HTML to the callback. is evaluated. json – interpreted as JSON string, passed as object to the callback jsonp – same as json, but allows remote scripting script – processed as javascript and passed to the callback text – plain text passed to the callback

24. $.ajaxSetup({options}); Accepts the same options as $.ajax() Set default options for all future $.ajax() calls (does not apply to $.get(), $.getJSON(), or $.post() as of v1.6.3). Defaults can still be overridden in subsequent individual $.ajax() calls. Specifying a default (single) url for all future requests using the $.ajaxSetup() method allows for single-api applications demo

26. Hello World! This content is derived from an AJAX request to the ColdFusion back-end! The photo viewer is still a work in progress.... Please check back later. ERROR!

27. Plugins are encapsulated functions within the jQuery scope that participate in chaining. Thousands of available plugins, both official and unofficial, and about as many blogs on how to write jQuery functionality and plugins http://plugins.jquery.com/http://plugins.jquery.com/ or Google search About 13,400,000 results for ‘jQuery plugins’ on Google

28. jQuery UI is now a sub-project of jQuery, but was originally a loose collection of plugins. Now it’s an integrated collection of plugins with a unified purpose and goal. Makes creating interactive UI painless, quick to develop and quick to execute. Widgets include: Tabs, Accordions, Buttons and Buttonsets, Sliders, Progress Bars, Autocompleters, Datepickers and Dialog Boxes… so far Tooltip, Menu, Menubar, Popup and Spinner are forthcoming

29. http://jqueryui.com/themeroller/ Allows you to quickly and easily generate.css and download jQuery and jQuery UI to theme the components generated by jQuery UI Provides an easy way to scope css for specific regions of the site Utilizes CSS3 for some of its effects (rounded corners) and transparent PNGs (not supported in IE6)

30. Google CDN @

31. Draggable() and Droppable() – allows you to assign matched sets that can be dragged and matched sets which can be dropped onto Sortable() – allows you to assign a matched set that can be user sorted (with drag & drop) Resizable() – allows you to assign a matched set that can be resized by dragging one or more corners Selectable() – allows you to assign a matched set that can be selected by clicking on the element

32. Effect() – applies one of the jQuery UI animated effects to a matched set Animate() – animates numerical css properties of a matched set Hide() – hides a matched set using one of the jQuery UI animated effects Show() – shows a matched set using one of the jQuery UI animated effects

33. Blind Bounce Clip Drop Explode Fade Fold Highlight Puff Pulsate Scale Shake Size Slide Transfer

35. Media Queries Rounded, multi-color and image borders Gradient, multiple image, resizable backgrounds Text shadows, text overflow and word wrap Drop shadow, resizable, outline offset boxes Color opacity (RGBA) and HSL color values 2D & 3D Transformations (skew, rotate, etc.)* Transitions (dynamic style)*, Web Fonts* Flexible grid/column layout* * = Work in Progress demo

36. IE ~ 8 – Zero support for CSS3, HTML5, dom event model 2 IE 9 – Limited support for CSS3, HTML5 and dom event model 2 IE 10 – ‘Final’ browser to be released by M$. Claims will support full CSS3, HTML5 and dom event model 2 *at time of release* HTML5 tags can be used in IE < 9 with the help of a Javascript shiv

37. Design for IE first Add enhanced styles for modern browsers (Chrome, Firefox, etc.) second Provide alternate styles for non-supported CSS3 features in IE (e.g. solid background color in contrast to gradient background) Functionality should be the same for all browsers

38. Redefine opacity, gradient backgrounds, text and box drop-shadows, transformations and more of your existing jQuery UI.css (via override) Create hybrid elements using a combination of jQuery elements and your own CSS styling (e.g. icons & buttons from jQuery w/ your own drop shadow boxes and text) demo

39. Book: jQuery in Action (link to Amazon)link to Amazon Book: CSS3 Visual Quickstart Guide (link to Amazon)link to Amazon NVCFUG Demo Site (link to demo site)link to demo site jQuery (link) and jQuery UI (link) websiteslink denard.springle@gmail.com