Presentational jQuery

Presentational jQuery
Balancing jQuery and CSS

Presentational jQuery Doug Neiner

Presentational jQuery
• jQuery CSS Primer

• .css() vs. Style Sheets vs. <style> blocks

• Rules of the Road
Balancing jQuery and CSS

• Moving Around


jQuery CSS Primer
• jQuery adjusts the .style property on the DOM
element to make CSS changes
div.style.backgroundColor = "#aaa";


jQuery CSS Primer
var div = document.getElementById( "#test" );

// JS

// 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"
});


jQuery CSS Primer
• jQuery adjusts the .style property on the DOM
element

• It is the equivalent of setting an inline style
<div style="background-color: #aaa"> … </div>

• This overrides pretty much any rule speciﬁed
elsewhere


Getting CSS Values
// Get the value for #test
$( "#test" ).css( "border-top-width" );

// Get the value for the ﬁrst 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();


Dynamic Setters
// Get the value for #test
$( "div" ).css( "border-top-width", function ( i, old ) {
return ( i + 1 ) * 2; // New Value
});


.css() vs. Style Sheets vs.
<style>
Choosing the Best Tool for the Task


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) reactive


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


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 elements


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.


Rules of the Road
Avoiding Common Mistakes


Beware of Iteration
Don't call .css() multiple times unless needed


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');
}


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 );


Incorrect Approach
var colors = $(".color");

$(".ﬁlter-by-color").click( function () {
colors.toggle();
});


Correct Approach
var color_parent = $("#list");

$(".ﬁlter-by-color").click( function () {
color_parent.toggleClass( "show-colors" );
});

.color { display: none }

#list.show-colors .color { display: block }


Class Methods
• addClass( classNames )

• removeClass( classNames )

• toggleClass( classNames, is_true )

• hasClass( className )

• is( ".className1.className2")


Write code like you
run errands
Don't keep revisiting the same store
on the same day


Setting Initial State
To js or no-js


Incorrect Approach

$( document ).ready( function () {
$( "#dialog, #menu, #footer" ).hide();
$( "#progress-bar" ).show();
});


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 you


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 ea


twitter @dougneiner

email doug@dougneiner.com

web http://dougneiner.com


Presentational jQuery

Recommended

More Related Content

What's hot (19)

Viewers also liked (8)

Similar to Presentational jQuery (20)

Recently uploaded (20)

Presentational jQuery

Editor's Notes