Presentational jQuery

4,285 views

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,285
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
41
Comments
0
Likes
5
Embeds 0
No embeds

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
  • Presentational jQuery

    1. 1. Presentational jQuery Balancing jQuery and CSSPresentational jQuery Doug Neiner
    2. 2. Presentational jQuery Doug Neiner
    3. 3. Presentational jQuery Doug Neiner
    4. 4. Presentational jQuery Balancing jQuery and CSSPresentational jQuery Doug Neiner
    5. 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. 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. 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. 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. 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. 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. 11. .css() vs. Style Sheets vs. <style> Choosing the Best Tool for the TaskPresentational jQuery Doug Neiner
    12. 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. 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. 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. 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. 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. 17. Rules of the Road Avoiding Common MistakesPresentational jQuery Doug Neiner
    18. 18. Beware of Iteration Dont call .css() multiple times unless neededPresentational jQuery Doug Neiner
    19. 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. 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. 21. Incorrect Approach var colors = $(".color"); $(".filter-by-color").click( function () { colors.toggle(); });Presentational jQuery Doug Neiner
    22. 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. 23. Class Methods • addClass( classNames ) • removeClass( classNames ) • toggleClass( classNames, is_true ) • hasClass( className ) • is( ".className1.className2")Presentational jQuery Doug Neiner
    24. 24. Write code like you run errands Dont keep revisiting the same store on the same dayPresentational jQuery Doug Neiner
    25. 25. Setting Initial State To js or no-jsPresentational jQuery Doug Neiner
    26. 26. Incorrect Approach $( document ).ready( function () { $( "#dialog, #menu, #footer" ).hide(); $( "#progress-bar" ).show(); });Presentational jQuery Doug Neiner
    27. 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. 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. 29. twitter @dougneiner email doug@dougneiner.com web http://dougneiner.comPresentational jQuery Doug Neiner

    ×