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

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (8)

Similar to Presentational jQuery

Similar to Presentational jQuery (20)

Recently uploaded

Recently uploaded (20)

Presentational jQuery

Editor's Notes