Presentational jQuery                        Balancing jQuery and CSSPresentational jQuery                              Do...
Presentational jQuery   Doug Neiner
Presentational jQuery   Doug Neiner
Presentational jQuery                        Balancing jQuery and CSSPresentational jQuery                              Do...
Presentational jQuery • jQuery          CSS Primer • .css()       vs. Style Sheets vs. <style> blocks • Rules         of t...
jQuery CSS Primer • jQuery adjusts the .style property on the DOM    element to make CSS changes    div.style.backgroundCo...
jQuery CSS Primer   var div = document.getElementById( "#test" );   // JS   div.style.backgroundColor = "#aaa";   // jQuer...
jQuery CSS Primer • jQuery adjusts the            .style   property on the DOM    element    div.style.backgroundColor = "...
Getting CSS Values   // Get the value for #test   $( "#test" ).css( "border-top-width" );   // Get the value for the first ...
Dynamic Setters   // Get the value for #test   $( "div" ).css( "border-top-width", function ( i, old ) {      return ( i +...
.css() vs. Style Sheets vs.                         <style>                    Choosing the Best Tool for the TaskPresenta...
Style Sheet • Pros     •   Very fast     •   Can be easily overridden     •   Provides a customized foundation     •   Cle...
<style> Block • Pros     •   Very fast     •   Can be overridden     •   Adds to a foundation, or provides its own     •  ...
.css() Method • Pros     •   Very convenient     •   Highly dynamic and reactive     •   Can act on an arbitrary selection...
Style Sheet                 <style>                jQuery • To  set initial      • BulkChanges       • Totransition    sta...
A note to plugin developers • If    you need a lot of styles, do it in a stylesheet     •   No asset path issues     •   E...
Rules of the Road                        Avoiding Common MistakesPresentational jQuery                              Doug N...
Beware of Iteration           Dont call .css() multiple times unless neededPresentational jQuery                          ...
Incorrect Approach   var $div = $("div");   $div.css(backgroundColor, red);   if ( some_test === true ) {     $div.css(col...
Correct Approach   var css = {     backgroundColor: "red"   };   if ( some_test === true ) {     css.color = "black";   } ...
Incorrect Approach   var colors = $(".color");   $(".filter-by-color").click( function () {      colors.toggle();   });Pres...
Correct Approach   var color_parent = $("#list");   $(".filter-by-color").click( function () {      color_parent.toggleClas...
Class Methods • addClass(            classNames ) • removeClass(            classNames ) • toggleClass(           classNam...
Write code like you                            run errands                    Dont keep revisiting the same store         ...
Setting Initial State                             To js or no-jsPresentational jQuery                           Doug Neiner
Incorrect Approach   $( document ).ready( function () {      $( "#dialog, #menu, #footer" ).hide();      $( "#progress-bar...
Correct Approach   <html class="no-js">   …   <script>   document.documentElement.className =     document.documentElement...
Moving Around                          jQuery Animation                                                                   ...
twitter   @dougneiner                         email    doug@dougneiner.com                          web     http://dougnei...
Upcoming SlideShare
Loading in...5
×

Presentational jQuery

2,920

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
2,920
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×