• 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 Using jQuery to Extend CSS
May 10, 2015
• 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
Using jQueryto Extend CSS
• What about MooTools? Prototype? (go for it!)
Why jQuery?
Transparency
.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;
}
With CSS:
• Messy• Invalid
With jQuery:
• Clean• Valid
Transparency$(“.transparent_class”).css(“opacity”, “0.5”);
Hover
• Not supported in IE <= 6• Limited...
With CSS:div {
background: white;}
div:hover {background: #eee;
}
With jQuery
• All Browser Support• More Options
$(“div”).hover(function(){ $(this).addClass(“hover”);}, function(){ $(this).removeClass(“hover”);});
$(“div”).hover(function(){ $(this).addClass(“hover bookHighlight”);}, function(){ $(this).removeClass(“hover bookHighlight”);});
Hover
• Not supported in IE <= 6
<ul> <li><a href=”#”>List Item One</a></li> <li><a href=”#”>List Item Two</a></li> <li><a href=”#”>List Item Three</a></li></ul>
CSSinput[type=text] { width: 250px; border: 1px solid #ccc; padding: 3px;}
input[type=radio] { vertical-align: middle;}
ul li { border-bottom: 1px solid #ccc;}
ul li:last-child { border-bottom: 0;}
<input type=”text” ... /><input type=”radio” ... /><input type=”submit” ... /><input type=”checkbox” ... /><input type=”password” ... />
HTML
Attribute & Psuedo Selectors
With jQuery
(Still handle styling with CSS)
Attribute & Psuedo Selectors
$(“input[type=text]”).addClass(“textInput”);
$(“ul li:last-child”).addClass(“last”);
$(“input[type=text]”) .focus(function(){
$(this).parent().addClass(“formFocus”); }) .blur(function(){
$(this).parent().removeClass(“formFocus”); });
<form> <div> <label>Name</label> <input type=”text” /> </div> <div> <label>Email</label> <input type=”text” /> </div> ...
Div has a hover state
...with opacity change
...and is a link.
Grids are hard
...and especially with variable height content
Need right margin Doesn’t need right margin
...when not tabular data.
Looks Simple?
Looks Simple?
<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>
HTML
.book { width: 120px; float: left; padding: 10px; border: 1px solid #ccc; margin: 0 10px 10px 0; }
CSS
$(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"); });});
Looks Simple?
• Zebra Striping• Row / Column Highlighting
Table Tricks
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"); });
});
$(function() { $("tr:contains('Hood')").addClass("found");
});
Table Tricks
Plugins!Tablesorter 2.0 by Christian Bachhttp://tablesorter.com/docs/
Table Tricks
• 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
<pre><code> ... code in here...</code></pre>
Regular State (overflow: hidden;)
Expanded State
pre { overflow: hidden; width: 563px; }
code { font-family: Courier, Monospace;}
var baseWidth = $("pre")[0].width(), rightPadding = 10;
$("pre").hover(function() { var codeInnerWidth = $("code", this).width() + rightPadding; if (codeInnerWidth > baseWidth) { $(this) .stop() .css({ zIndex: "100", position: "relative" }) .animate({ width: codeInnerWidth + "px" }); } }, function() { $(this).stop().animate({ width: baseWidth }); });
Animation is Easy
Loading after Loading
Big ass movieStarts loading right away, slows down page.
BonusIf users don’t have JavaScript, the movie isn’t going to play correctly anyway. So nothing is shown.
$(window).bind(“load”, function() { $('#movie-area').load('/movie.html');
});
Controlling Outside Content
Design is one thing...Content is another. CSS wasable 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 PluginsFaceboxhttp://famspam.com/facebox
Tablesorterhttp://tablesorter.com/
Coda Sliderhttp://www.ndoherty.com/demos/coda-slider/1.1.1/
markItUp!http://markitup.jaysalvat.com/home/
jQuery UIhttp://jqueryui.com/
Interactions• Draggable• Droppable• Resizable• Selectable• Sortable
Widgets• Accordion• Datepicker• Dialog• Progressbar• Slider• Tabs
Effects• Show/Hide Methods• Toggle Class• Color Animation
Jan. 14 2006 – jQuery AnnouncedAug. 26 2006 - jQuery 1.0Jan. 14 2007 - jQuery 1.1Sep. 10 2007 - jQuery 1.2May 24 2008 - jQuery 1.2.6Feb. 20 2009 - jQuery 1.3.2
jQuery
Released UsableVersions
Dec. 17 1996 - CSS 1May 12 1998 - CSS 2
Jul. 19 2007 - CSS 2.1
Apr. 23 2009 - CSS 2.1
??? - CSS 3
CSS
Recommendations
The FUTURE
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!