Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Presentational jQuery

4,698 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
  • Be the first to comment

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

×