Professional Documents
Culture Documents
Using Jquery To Extend CSS
Using Jquery To Extend CSS
Using Jquery To Extend CSS
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?
/* 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;
}
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;
}
<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
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
$(function() {
});
Animation is Easy
Regular State (overflow: hidden;)
Expanded State
var
<pre><code>
baseWidth = $("pre")[0].width(),
... code in here...
rightPadding = 10;
</code></pre>
$("pre").hover(function() {
var codeInnerWidth = $("code", this).width() + rightPadding;
if (codeInnerWidth > baseWidth) {
pre
$(this)
{
overflow:
hidden;
.stop()
width:
563px;
.css({
}
zIndex: "100",
code
{
position: "relative"
font-family:
}) Courier, Monospace;
}
.animate({
width: codeInnerWidth + "px"
});
}
}, function() {
$(this).stop().animate({
width: baseWidth
});
});
Loading after Loading
$(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
$(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/
??? - CSS 3