Using jQuery to Extend CSS

Using jQuery to Extend CSS • Fix Cross Browser Problems • Solve CSS Shortcomings • Do Things CSS Can’t Do • Solve ‘Real World’ Problems • Get Your Site into an Environment with a Bright Future

Why jQuery? • What about MooTools? Prototype? (go for it!)

Transparency With CSS: .transparent_class { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; } • Messy • Invalid

Transparency With jQuery: $(“.transparent_class”).css(“opacity”, “0.5”); • Clean • Valid

Hover With CSS: div { background: white; } div:hover { background: #eee; } • Not supported in IE <= 6 • Limited...

Hover With jQuery $(“div”).hover(function(){ $(this).addClass(“hover”); }, function(){ $(this).removeClass(“hover”); }); • All Browser Support • More Options $(“div”).hover(function(){ $(this).addClass(“hover bookHighlight”); }, function(){ $(this).removeClass(“hover bookHighlight”); });

Attribute & Psuedo Selectors HTML <input type=”text” ... /> <ul> <input type=”radio” ... /> <li><a href=”#”>List Item One</a></li> <input type=”submit” ... /> <li><a href=”#”>List Item Two</a></li> <input type=”checkbox” ... /> <li><a href=”#”>List Item Three</a></li> <input type=”password” ... /> </ul> CSS input[type=text] { ul li { width: 250px; border-bottom: 1px solid #ccc; border: 1px solid #ccc; } padding: 3px; } ul li:last-child { border-bottom: 0; input[type=radio] { } vertical-align: middle; } • Not supported in IE <= 6

Attribute & Psuedo Selectors With jQuery $(“input[type=text]”) $(“ul li:last-child”) .addClass(“textInput”); .addClass(“last”); (Still handle styling with CSS) <form> $(“input[type=text]”) <div> .focus(function(){ <label>Name</label> $(this).parent().addClass(“formFocus”); <input type=”text” /> }) </div> .blur(function(){ <div> $(this).parent().removeClass(“formFocus”); <label>Email</label> }); <input type=”text” /> </div> ...

Looks Simple? Grids are hard ...when not tabular data. ...and especially with variable height content Div has a hover state ...with opacity change ...and is a link. Need right margin Doesn’t need right margin

Looks Simple? HTML <div class="book"> <h3>Book Title</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <a href="http://google.com">Learn More</a> </div> CSS .book { width: 120px; float: left; padding: 10px; border: 1px solid #ccc; margin: 0 10px 10px 0; }

Looks Simple? $(function() { $(".book:nth-child(4n+1)").css("margin-right","0px"); $(".book a").hide(); var maxHeight = 0; $(".book").each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } $(this).css("opacity", "0.7"); }); $(".book").height(maxHeight); $(".book").hover(function(){ $(this) .addClass("hover") .css("opacity", "1.0"); }, function(){ $(this) .removeClass("hover") .css("opacity", "0.7"); }); $(".book").click(function(){ window.location = $(this).find("a").attr("href"); }); });

Looks Simple? $(function() { $(".book:nth-child(4n+1)").css("margin-right","0px"); $(".book a").hide(); var maxHeight = 0; var books = $(".book"); books .each(function() { if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } $(this).css("opacity", "0.7"); }) .height(maxHeight) .hover(function() { $(this) .addClass("hover") .css("opacity", "1.0"); }, function() { $(this) .removeClass("hover") .css("opacity", "0.7"); }) .click(function() { window.location = $(this).find("a").attr("href"); }); });

Table Tricks • Zebra Striping • Row / Column Highlighting

Table Tricks $(function() { $("tr:odd").addClass("odd"); var i = 0; $("colgroup").each(function() { i++; $(this).attr("id", "col"+i); }); var totalCols = i; i = 1; $("td") .each(function() { $(this).attr("rel", "col"+i); i++; if (i > totalCols) { i = 1; } }) .hover(function() { $(this).parent().addClass("hover"); var curCol = $(this).attr("rel"); $("#"+curCol).addClass("hover"); }, function() { $(this).parent().removeClass("hover"); var curCol = $(this).attr("rel"); $("#"+curCol).removeClass("hover"); }); });

Table Tricks $(function() { $("tr:contains('Hood')").addClass("found"); });

Table Tricks Plugins! Tablesorter 2.0 by Christian Bach http://tablesorter.com/docs/

Animation is Easy • It’s cool... but it’s flair. • It’s (nearly) useless without JS.

Animation is Easy $(function() { $("#page-wrap").append('<img src="/images/expando-tab.png" alt="" id="expando-tab" />'); $('#expando').load('/expando.html'); $("#expando-tab").click(function(){ $("#expando").slideToggle(); }); });

Animation is Easy Regular State (overflow: hidden;) Expanded State var baseWidth = $("pre")[0].width(), <pre><code> rightPadding here... ... code in = 10; </code></pre> $("pre").hover(function() { var codeInnerWidth = $("code", this).width() + rightPadding; if (codeInnerWidth > baseWidth) { pre $(this) { overflow: hidden; .stop() width: .css({ 563px; } zIndex: "100", code { position: "relative" font-family: Courier, Monospace; }) } .animate({ width: codeInnerWidth + "px" }); } }, function() { $(this).stop().animate({ width: baseWidth }); });

Loading after Loading Big ass movie Starts loading right away, slows down page. $(window).bind(“load”, function() { $('#movie-area').load('/movie.html'); }); Bonus If users don’t have JavaScript, the movie isn’t going to play correctly anyway. So nothing is shown.

Controlling Outside Content Design is one thing... Content is another. CSS was able to control the new graphics, but the change in text was done with jQuery.

Controlling Outside Content $(function() { $('#coupon-link').text('Enter Voucher Code'); $('#coupon-input').css('display', 'inline'); });

MMMmmm Plugins Facebox http://famspam.com/facebox Tablesorter http://tablesorter.com/ Coda Slider http://www.ndoherty.com/demos/coda-slider/1.1.1/ markItUp! http://markitup.jaysalvat.com/home/ jQuery UI http://jqueryui.com/ Interactions Widgets Effects • Draggable • Accordion • Show/Hide Methods • Droppable • Datepicker • Toggle Class • Resizable • Dialog • Color Animation • Selectable • Progressbar • Sortable • Slider • Tabs

The FUTURE jQuery CSS Dec. 17 1996 - CSS 1 May 12 1998 - CSS 2 Jan. 14 2006 – jQuery Announced Aug. 26 2006 - jQuery 1.0 Jan. 14 2007 - jQuery 1.1 Jul. 19 2007 - CSS 2.1 Sep. 10 2007 - jQuery 1.2 May 24 2008 - jQuery 1.2.6 Feb. 20 2009 - jQuery 1.3.2 Apr. 23 2009 - CSS 2.1 ??? - CSS 3 Released Usable Recommendations Versions

The FUTURE • Huge community of people USING it. • Huge community of DEVELOPERS. • Loads of DOCUMENTATION. • Plenty of SUPPORT available. • Gosh darn it, people like it!

http://web.enavu.com	17984
http://css-tricks.com	1810
http://tutsvalley.com	966
http://www.yeeyan.com	114
http://www.slideshare.net	84
http://translate.googleusercontent.com	76
http://article.yeeyan.org	57
http://www.mysrc.de	47
http://onwebdev.blogspot.com	21
http://feeds2.feedburner.com	17
http://esouillat.wordpress.com	15
http://blog.youmila.com	14
http://spotmeon.blogspot.com	8
http://www.iwanna.cn	7
http://localhost	7
http://www.yeeyan.org	7
http://spotmeon.blogspot.in	5
http://thx2madre.tistory.com	4
http://www.prophethost.be	4
http://www.hanrss.com	4
http://www.zhuaxia.com	3
http://reader.youdao.com	2
http://207.46.192.232	2
file://	2
http://justi.tistory.com	2
http://mirror.geenstijl.nl	2
http://131.253.14.250	1
http://holamiamor.tistory.com	1
http://www.brijj.com	1
http://blog.gabrieleromanato.com	1
http://fanyi.youdao.com	1
http://www.5z5.com	1
http://www.wpgrind.com	1
applewebdata://5F2187F7-3C77-495D-88BB-8797EB384095	1
http://127.0.0.1:8795	1
http://www.phphosts.org	1
applewebdata://8716E193-B9D9-4F6A-9811-77C1A496F02A	1
http://xianguo.com	1
http://www.hraps.pl	1
http://email.secureserver.net	1
http://static.slidesharecdn.com	1
http://feeds.feedburner.com	1

Using jQuery to Extend CSS

by Chris Coyier

Accessibility

Categories

Upload Details

Usage Rights

42 Embeds 21,280

Statistics

Using jQuery to Extend CSS Presentation Transcript