Presentational jQuery

  • 2,384 views
Uploaded on

Learn to balance your use of jQuery's .css with CSS Style Sheets. Covers pros, cons, and tips on when to choose one method over another. Presented at the jQuery SF Bay Area Conference 2011.

Learn to balance your use of jQuery's .css with CSS Style Sheets. Covers pros, cons, and tips on when to choose one method over another. Presented at the jQuery SF Bay Area Conference 2011.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,384
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
39
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Presentational jQuery Balancing jQuery and CSSPresentational jQuery Doug Neiner
  • 2. Presentational jQuery Doug Neiner
  • 3. Presentational jQuery Doug Neiner
  • 4. Presentational jQuery Balancing jQuery and CSSPresentational jQuery Doug Neiner
  • 5. Presentational jQuery • jQuery CSS Primer • .css() vs. Style Sheets vs. <style> blocks • Rules of the Road Balancing jQuery and CSS • Moving AroundPresentational jQuery Doug Neiner
  • 6. jQuery CSS Primer • jQuery adjusts the .style property on the DOM element to make CSS changes div.style.backgroundColor = "#aaa";Presentational jQuery Doug Neiner
  • 7. jQuery CSS Primer var div = document.getElementById( "#test" ); // JS div.style.backgroundColor = "#aaa"; // jQuery $(div).css( "backgroundColor", "#aaa" ); $(div).css( "background-color", "#aaa" ); // JS div.style.color = "#000"; div.style.textDecoration = "underline"; // jQuery $(div).css({ color: "#000", textDecoration: "underline" });Presentational jQuery Doug Neiner
  • 8. jQuery CSS Primer • jQuery adjusts the .style property on the DOM element div.style.backgroundColor = "#aaa"; • It is the equivalent of setting an inline style <div style="background-color: #aaa"> … </div> • This overrides pretty much any rule specified elsewherePresentational jQuery Doug Neiner
  • 9. Getting CSS Values // Get the value for #test $( "#test" ).css( "border-top-width" ); // Get the value for the first item in the result set $( "div" ).css( "border-top-width" ); // Get all the values in the result set var values = $( "div" ).map( function () { return $(this).css( "border-top-width" ); }).get();Presentational jQuery Doug Neiner
  • 10. Dynamic Setters // Get the value for #test $( "div" ).css( "border-top-width", function ( i, old ) { return ( i + 1 ) * 2; // New Value });Presentational jQuery Doug Neiner
  • 11. .css() vs. Style Sheets vs. <style> Choosing the Best Tool for the TaskPresentational jQuery Doug Neiner
  • 12. Style Sheet • Pros • Very fast • Can be easily overridden • Provides a customized foundation • Clear separation of logic and style • Cons • You must know the element states before hand • You must be able to select the elements • Is not (generally) reactivePresentational jQuery Doug Neiner
  • 13. <style> Block • Pros • Very fast • Can be overridden • Adds to a foundation, or provides its own • Can be reactive • Cons • Less separation of logic and style • You must be able to select the elementsPresentational jQuery Doug Neiner
  • 14. .css() Method • Pros • Very convenient • Highly dynamic and reactive • Can act on an arbitrary selection of elements • Cons • Not easily overridden • No separation of logic and stylePresentational jQuery Doug Neiner
  • 15. Style Sheet <style> jQuery • To set initial • BulkChanges • Totransition state to elements between states • To handle • Defaults that predictable can be • Tohandle states overridden unpredictable states • Bulk changes to elements • One and two- off changes to elementsPresentational jQuery Doug Neiner
  • 16. A note to plugin developers • If you need a lot of styles, do it in a stylesheet • No asset path issues • Easily customized • Nice separation of logic and style • Ifyou have to do it only in JS, prepend it to the <head> in a <style> block.Presentational jQuery Doug Neiner
  • 17. Rules of the Road Avoiding Common MistakesPresentational jQuery Doug Neiner
  • 18. Beware of Iteration Dont call .css() multiple times unless neededPresentational jQuery Doug Neiner
  • 19. Incorrect Approach var $div = $("div"); $div.css(backgroundColor, red); if ( some_test === true ) { $div.css(color, black); } ... if ( some_other_test === true ) { $div.css(display, block) .css(position, relative); }Presentational jQuery Doug Neiner
  • 20. Correct Approach var css = { backgroundColor: "red" }; if ( some_test === true ) { css.color = "black"; } ... if ( some_other_test === true ) { css.display = "block"; css.position = "relative"; } $("div").css( css );Presentational jQuery Doug Neiner
  • 21. Incorrect Approach var colors = $(".color"); $(".filter-by-color").click( function () { colors.toggle(); });Presentational jQuery Doug Neiner
  • 22. Correct Approach var color_parent = $("#list"); $(".filter-by-color").click( function () { color_parent.toggleClass( "show-colors" ); }); .color { display: none } #list.show-colors .color { display: block }Presentational jQuery Doug Neiner
  • 23. Class Methods • addClass( classNames ) • removeClass( classNames ) • toggleClass( classNames, is_true ) • hasClass( className ) • is( ".className1.className2")Presentational jQuery Doug Neiner
  • 24. Write code like you run errands Dont keep revisiting the same store on the same dayPresentational jQuery Doug Neiner
  • 25. Setting Initial State To js or no-jsPresentational jQuery Doug Neiner
  • 26. Incorrect Approach $( document ).ready( function () { $( "#dialog, #menu, #footer" ).hide(); $( "#progress-bar" ).show(); });Presentational jQuery Doug Neiner
  • 27. Correct Approach <html class="no-js"> … <script> document.documentElement.className = document.documentElement.className.replace("no-js", "js"); </script> #dialog, #menu, #footer { display: block } .no-js #progress-bar, .js #dialog, .js #menu, .js #footer { display: none } Modernizer does this for youPresentational jQuery Doug Neiner
  • 28. Moving Around jQuery Animation . I will ex ercise e coding s a liv rial on on wa e Thi s secti b e mate g, and ng som queuin blishi thod, on pu n me w orking nimatio s A sing. jQuery eaPresentational jQuery Doug Neiner
  • 29. twitter @dougneiner email doug@dougneiner.com web http://dougneiner.comPresentational jQuery Doug Neiner