css vs jquery - jonathan snook ca - posts · css vs jquery 1. the classic contender: ... our html ...
TRANSCRIPT
CSS vs jQUERY
1
THE CLASSIC CONTENDER:ROLLOVERS
2
Remember This?function MM_swapImage(){
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-‐2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
3
Messy<body onload="MM_preloadImages('roll.png')">
<a href="/n/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('img1','','roll.png',1)">
<img src="pre-‐roll.png" name="img1" id="img1">
</a>
4
CSSa { background-‐image: url("my-‐image.png");}
a:hover { background-‐image: url("roll.png");}
5
CSS Spritesa { background-‐image: url("my-‐sprite.png"); background-‐position: 0 0;}
a:hover { background-‐position:0 -‐30px;}
6
GETTING PAID:DROP DOWN MENUS
7
Ultimate Dropdown MenuAccessible
Keyboard Navigation
JavaScript-powered
http://www.udm4.com/
8
9
Our HTML<ul class="menu"> <li><a href="/a/">Menu</a> <ul> <li><a href="/a/a">Sub-‐menu A</a></li> <li><a href="/a/b">Sub-‐menu A</a></li> <li><a href="/a/c">Sub-‐menu A</a></li> </ul> </li></ul>
10
jQuery$('.menu > li').hover( function(){ $('ul', this).show(); }, function(){ $('ul', this).hide(); });
11
CSS.menu > li > ul { display:none;}
.menu > li:hover > ul { display:block;}
12
LIKE A ROCK:DEPENDENT CONTENT
13
Our HTML<div class="faq"> <a href="#a1">How much wood could...?</a> <a href="#a2">Who sells seashells...?</a>
...
<div id="a1"> The amount of wood that a woodchuck... </div>
</div>
14
jQuery$('.faq a').click(function(){
$(this).parent().find('.active') .removeClass('active');
$(this.href).addClass('active');
});
/* css */.faq > div { display:none; }.faq > .active { display:block; }
15
CSS.faq > div { display:none; }
.faq > div:target { display:block; }
16
THE WORKHORSE:FORM VALIDATION
19
jQuery Validation/* http://docs.jquery.com/Plugins/validation */
<input id="cemail" name="email" size="25" class="required email" />
<input id="curl" name="url" size="25" class="url" value="" />
20
Validating$("#myform").validate();
21
Using HTML5 and CSS3/* A List Apart: Forward Thinking Form Validation http://bit.ly/bHNs9T */
<input id="postcode" name="postcode" type="number" min="1001" max="8000" maxlength="4" required>
22
CSS3 UI Module:valid
:invalid
:required
:optional
:in-‐range
:out-‐of-‐range
:read-‐only
:read-‐write
23
24
HTML<label for="email">Email *</label>
<input type="email" id="email" name="email" placeholder="e.g. [email protected]" title="Please enter a valid email" required />
<p class="val">
<span class="invalid">Please enter a valid email address e.g. [email protected]</span>
<span class="valid">Thank you for entering a valid email</span>
</p>
25
CSSinput:focus + .val { display: block; }
#signup input:focus:required:valid + .val .invalid { display: none; }
#signup input:focus:required:invalid + .val .valid { display: none; }
26
BRINGING THE FLAIR:ANIMATION
27
jQuery$().show();
$().hide();
$().toggle();
$().fadeIn();
$().fadeOut();
$().fadeToggle();
$().slideUp();
$().slideDown();
$().slideToggle();
28
jQuery Animate$('#my-‐el').animate( {top:"200px", left:"100px"},
{duration:500, complete:function(){ alert("I’m done!"); }}
);
29
jQuery Animated Backgrounds$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -‐250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
30
CSS Transitions-‐webkit-‐transition-‐property: opacity;-‐webkit-‐transition-‐duration: 0.3s;-‐webkit-‐transition-‐timing-‐function: ease;
/* Don’t forget other browsers! */
-‐moz-‐transition
-‐o-‐transition
32
CSS Transitions/* Shortcut */-‐webkit-‐transition: opacity 0.3s ease;
/* Multiple properties */-‐webkit-‐transition: opacity 0.3s ease, width 0.3s linear;
/* All properties */-‐webkit-‐transition: all 0.3s ease;
33
Targetted Content.faq > div { position:absolute; left:-‐9999px; opacity:0; -‐webkit-‐transition:opacity 1s ease;}
.faq > div:target { position:static; opacity:1;}
34
CSS Animated Backgroundsa { background:url("sprite.png"); background-‐position:0 0; -‐webkit-‐transition:background-‐position .5s;}
a:hover { background-‐position:0 -‐100px;}
35
CSS Animations@-‐webkit-‐keyframes throb {
0% { opacity: 0.2; left:0; }
50% { opacity: 1.0; left:10px; }
100% { opacity: 0.2; left:0; }
}
36
Targetted Content.faq > div { display:none}
.faq > div:target { display:block; position:relative; -‐webkit-‐animation: throb 1.5s infinite;}
37
Slot Machine@-‐webkit-‐keyframes spin {
0% { background-‐position:0 0; }
100% { background-‐position:0 -‐200px; }
}
38
Slot Machine#slotmachine { background:url("spinner.png"); background-‐position: 0 0; padding-‐left:20px; -‐webkit-‐animation: spin 2s infinite linear;}
#slotmachine:target { background-‐position:0 -‐60px; -‐webkit-‐animation: none; -‐webkit-‐transition: background-‐position 1s;}
39
TAG TEAM:jQUERY with CSS
40
jQuery Plugin for CSS Transitions/* http://bit.ly/cX8Xqf */
// Makes all paragraph elements grow a border and then atrophy away.
$("p").animateWithCSS(
{border: "5px solid #555"}, // CSS properties to animate
1000, // Duration in ms
"cubic-‐bezier", // The timing function
function(){ // Callback
$("p").animateWithCSS({border: "0px"}, 350);
}
);
41
Enhanced Animate Plugin/* http://bit.ly/cnCYP2
left : using translate(x, y) or translate3d(x, y, z)
top : using translate(x, y) or translate3d(x, y, z)
opacity
width
height */
$('#my-‐el').animate({left: "+=200px", width:320 }, 1500);
42
THANK YOU!“Superfly” @snookca
43