Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
276 views

JQuery For Designer

This document provides an introduction to jQuery for designers. It discusses building sites without jQuery first, then adding jQuery functionality over time. It covers jQuery selectors, effects, AJAX and more. Examples and resources are provided throughout.

Uploaded by

dhavalg_2
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
276 views

JQuery For Designer

This document provides an introduction to jQuery for designers. It discusses building sites without jQuery first, then adding jQuery functionality over time. It covers jQuery selectors, effects, AJAX and more. Examples and resources are provided throughout.

Uploaded by

dhavalg_2
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 149

Welcome to

jQuery for Designers


1. Build without jQuery.
1. Build without jQuery.

2. Design the start and end of your


effects without jQuery.
1. Build without jQuery.

2. Design the start and end of your


effects without jQuery.

3. Add jQuery a little at a time.


Help!
APIs Blogs, tutorials, screencasts,
docs.jquery.com
plugins, development sprints
api.jquery.com
visualjquery.com

Twitter forum.jquery.com
@jquery Help!
@jquerysites
@jqueryui
IRC channel
irc.freenode.net/#jquery
APIs Blogs, tutorials, screencasts,
docs.jquery.com
plugins, development sprints
api.jquery.com
visualjquery.com

Twitter forum.jquery.com
@jquery Help!
@jquerysites
@jqueryui
IRC channel
irc.freenode.net/#jquery
Bling Function
It means no more of this
var tables = document.getElementsByTagName('table');
for (var t = 0; t < tables.length; t++) {
! var rows = tables[t].getElementsByTagName('tr');
! for (var i = 1; i < rows.length; i += 2) {
if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className += ' odd';
}
}
}
jQuery simplifies

$('table tr:nth-child(odd)').addClass('odd');
jQuery simplifies

jQuery function

$('table tr:nth-child(odd)').addClass('odd');
jQuery simplifies

jQuery function

$('table tr:nth-child(odd)').addClass('odd');

CSS expression
jQuery simplifies

jQuery function jQuery method

$('table tr:nth-child(odd)').addClass('odd');

CSS expression
jQuery simplifies

$('table tr:nth-child(odd)').addClass('odd');
Tools of the Trade
• Firefox: Firebug
• Safari & Chrome: Web Inspector
• Opera: DragonFly
• IE: Web Developer Toolbar
http://getfirebug.com

http://firequery.binaryage.com
Roll over & click links
for more information
jQuery love for any page
Tip

$.fn.jquery

(little 'q')
No fireQuery?
jQuery on every site?
No fireQuery?
jQuery on every site?
No Problem.
http://bit.ly/9JAcCj
Where does it all go?
• jQuery first
• Then jQuery plugins
• Then your code
<html>
<head>
<styles>
<!-- make me beautiful -->
</styles>
</head>
<body>
<content>
<!-- make me learned -->
</content>
<behaviour>
<!-- ooo, matron -->
</behaviour>
</body>
</html>
<html>
<head>
<styles>
Styles first <!-- make me beautiful -->
let's the page </styles>
</head>
render
<body>
without <content>
scripts <!-- make me learned -->
</content>
blocking
<behaviour>
<!-- ooo, matron -->
</behaviour>
</body>
</html>
<html>
<head>
<styles>
<!-- make me beautiful -->
Then your </styles>
content, </head>
again so that <body>
<content>
it's delivered
<!-- make me learned -->
to your </content>
visitor as <behaviour>
<!-- ooo, matron -->
early as
</behaviour>
possible </body>
</html>
<html>
<head>
<styles>
<!-- make me beautiful -->
</styles>
</head>
<body>
Finally, add
<content>
your <!-- make me learned -->
behaviour, </content>
the jQuery <behaviour>
<!-- ooo, matron -->
and sexy
</behaviour>
magic jazz. </body>
</html>
$(document).ready(function () {

// < YOU >

});
$(document).ready(function () {

// < YOU >

});
$(function () {

// < YOU >

});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>My first jQuery page</title>
</head>
<body>
<h1>Remy woz 'ere</h1>
<p>Lorem ipsum dolor sit amet.</p>
<script src="jquery.min.js"></script>
<script>
$(function () {
// < YOU >
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>My first jQuery page</title>
</head>
<body>
<h1>Remy woz 'ere</h1>
<p>Lorem ipsum dolor sit amet.</p>
<script src="jquery.min.js"></script>
<script>
$(function () {
$('p').doStuff();
});
</script>
</body>
</html>
Sample Selectors
Selectors silently fail

$('remy')
Selectors silently fail

$('remy').length
$(‘#nav li.contact’)
$(‘#nav li.contact’)

$(‘:visible’)
$(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)
$(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)
$(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

$(‘a[title][hash*=”bio”]’)

jQuery lets me
query based on
DOM attributes
$(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

$(‘a[title][hash*=”bio”]’)

jQuery lets me
query based on
DOM attributes
$(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

$(‘a[title][hash*=”bio”]’)

"contains", also
have ^= and $=
$('a[href$="pdf"]').addClass('pdf');
$(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

$(‘a[title][hash*=”bio”]’)

"contains", also
have ^= and $=
$(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

$(‘a[title][hash*=”bio”]’)

$(‘a:first[hash*=”bio”]’)
$(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

$(‘a[title][hash*=”bio”]’)

$(‘a:first[hash*=”bio”]’)

$(‘.header, .footer’)
$(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

$(‘a[title][hash*=”bio”]’)

$(‘a:first[hash*=”bio”]’)

$(‘.header, .footer’)

$(‘.header, .footer’, ‘#main’)


Tip $(‘#nav li.contact’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

$(‘a[title][hash*=”foo”]’)

Better written as$(‘a:first[hash*=”foo”]’)


$('#main').find('.header,.footer');
$(‘.header, .footer’)

$(‘.header, .footer’, ‘#main’)


Filter & Find
Filtering narrows
$('a')
$('a').filter('[title]')
$('a')
// 5 anchors

$('a').filter('[title]')
// 5, then down to 3
Finding changes
$('div')
$('div').find('h2')
$('div')
// 5 divs

$('div').find('h2')
// 4 headings
Effects
fadeIn/out/to
FX todo

1 opacity: 1

2 opacity: 0

3 opacity: 1

4 opacity: 0

5 opacity: 1
$('div.picture a').hover(function () {
$(this).find('strong').fadeIn(1000);
}, function () {
$(this).find('strong').fadeOut(1000);
});
$('div.picture a').hover(function () {
$(this).find('strong').stop().fadeTo(1000, 1);
}, function () {
$(this).find('strong').stop().fadeTo(1000, 0);
});
"slow" = 600ms
"normal" = 400ms
"fast" = 200ms

$('a').stop().fadeTo(1000, 1);

one second
animate
$('#ball').animate({
top: 500,
left: '200px',
height: '10em',
width: '10em',
opacity: 0.5
}, 2000);

Animate any numeric value


Tip
Relative
$('#ball').animate({
top: '+=500',
left: '+=200px',
height: '-=20'
}, 500);
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js

$('#ball').animate({
top: 500,
left: '200px',
height: '10em',
width: '10em',
opacity: 0.5,
color: '#ff0'
}, 2000);
For colours, add jQuery UI
$('#ball').addClass('big');
$('#ball').addClass('big', 500);

http://jsbin.com/ijidi
$('#ball').addClass('big', 500);

http://jsbin.com/ijidi
chained
$('#ball')
.animate({
top: 250,
left: '200px'
}, 2000)
.animate({
height: '20em',
width: '20em'
}, 2000)
.animate({
opacity: 0.5
}, 2000);
$('#ball')
.animate({
top: 250,
left: '200px'
}, 2000)
.delay(500)
.animate({
height: '20em',
width: '20em'
}, 2000)
.delay(500)
.animate({
opacity: 0.5,
easing
linear :-(
easeOutBounce :-D
http://gsgd.co.uk/sandbox/jquery/easing/

http://bit.ly/cKstRK
$('#ball').animate({
top: 500,
left: 200,
}, 2000,
'easeOutBounce');
Per property easing
$('#ball').animate({
top: [500, 'easingOutBounce'],
left: 500
}, 2000);
callbacks
do something when it's done
Once faded out...

$('div').fadeOut(function () {
$(this).remove();
});
Animate something else...
$('#box1').animate({
top: 200,
left: 200
}, 2000, function () {
$('#box2').animate({
height: 500,
width: 500
}, 200);
});
Tip
disable effects

$.fx.off = true;
Ajax Warning: wear your tech-hat
No brainer Ajax
$('#detail').load('page.html');
$('#detail').load('page.html #id');
this.hash
the secret sauce

$('#tabs a').click(function () {
$('#detail').load('cats.html ' + this.hash);
return false;
});
this.hash
the secret sauce

$('#tabs a').click(function () {
$('#detail').load('cats.html #dizzy');
return false;
});
this.hash
the secret sauce

$('#tabs a').click(function () {
$('#detail').load('cats.html ' + this.hash);
return false;
});
JSON
JavaScript Object
{
screen_name : "@rem",
height : "short",
fingers : 5,
brit : true
}
JSON
{
"screen_name": "@rem",
"height": "short",
"fingers": 5,
"brit": true
}
JSONP WTF?
JSONP WTF?
JSON+...
{
"screen_name": "@rem",
"height": "short",
"fingers": 5,
"brit": true
}
JSON+Padding
callback({
"screen_name": "@rem",
"height": "short",
"fingers": 5,
"brit": true
});
Getting other
people's data
$.getJSON
Tip

Remember
callback=?
var twitterURL = 'http://search.twitter.com/search.json?
callback=?&q=';

$('a').click(function () {
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();
$.each(data.results, function (i, item) {
$('#tweets').append('<li>' + item.text + '</li>');
});
});
return false;
});
Tells jQuery we're doing JSONP
var twitterURL = 'http://search.twitter.com/search.json?
callback=?&q=';

$('a').click(function () {
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();
$.each(data.results, function (i, item) {
$('#tweets').append('<li>' + item.text + '</li>');
});
});
return false;
});
var twitterURL = 'http://search.twitter.com/search.json?
callback=?&q=';

$('a').click(function () {
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();
$.each(data.results, function (i, item) {
Construct "q=jQuery"
$('#tweets').append('<li>' + item.text + '</li>');
});
});
Twitter search url
return false;
});
var twitterURL = 'http://search.twitter.com/search.json?
callback=?&q=';

Remove previous()
$('a').click(function results
{
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();
$.each(data.results, function (i, item) {
$('#tweets').append('<li>' + item.text + '</li>');
});
});
return false;
});
var twitterURL = 'http://search.twitter.com/search.json?
callback=?&q=';
data.results contains a
$('a').click(function () {
list of all the tweets
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();
$.each(data.results, function (i, item) {
$('#tweets').append('<li>' + item.text + '</li>');
});
});
return false;
});
var twitterURL = 'http://search.twitter.com/search.json?
callback=?&q=';

$('a').click(function () {
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();
$.each(data.results, function (i, item) {
$('#tweets').append('<li>' + item.text + '</li>');
});
});
Show each Tweet
return false;
});
in a list item
var twitterURL = 'http://search.twitter.com/search.json?
callback=?&q=';

$('a').click(function () {
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets).empty();
Don't follow the link
$.each(data.results, function (i, item) {
to Twitter search
$('#tweets').append('<li>' + item.text + '</li>');
});
});
return false;
});
var twitterURL = 'http://search.twitter.com/search.json?
callback=?&q=';

$('a').click(function () {
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();
$.each(data.results, function (i, item) {
$('#tweets').append('<li>' + item.text + '</li>');
});
});
return false;
});
ip Cancelling
T
browser actions

$('a').click(function () {
// do some Ajax magic
return false;
});
ip Cancelling
T
browser actions

$('a').click(function () {
// do some Ajax magic
return false;
});
ip Cancelling
T
browser actions

$('a').click(function (event) {
// do some Ajax magic
return false;
});
ip Cancelling
T
browser actions

$('a').click(function (event) {
// do some Ajax magic

});
ip Cancelling
T
browser actions

$('a').click(function (event) {
event.preventDefault()
// do some Ajax magic
});
tter
Be
Loading...

Giving users feedback


Ajax events

1. ajaxStart

2. ajaxSuccess (or ajaxError)

3. ajaxComplete
$('#status').ajaxStart(function () {
$(this).fadeIn();
}).ajaxComplete(function () {
$(this).fadeOut();
});

Note: this refers to the #status node


-webkit ➽ jQuery
.shadow {
display : block;
z-index : 1;
position : absolute;
bottom : 0;
right : -800px;
left : auto;
width : 840px;
height : 1000px;
background-image : url(../img/shadow.png);
background-repeat : no-repeat;
background-position : 0 100%;
-webkit-animation-name : shadow;
-webkit-animation-iteration-count : 1;
-webkit-animation-timing-function : linear;
-webkit-animation-duration : 20s;
-webkit-animation-delay : 5s;
}

@-webkit-keyframes shadow {
from { right : -800px; }
to { right : 1900px } }
width : 840px;
height : 1000px;
background-image : url(../img/shadow.png);
background-repeat : no-repeat;
background-position : 0 100%;
-webkit-animation-name : shadow;
-webkit-animation-iteration-count : 1;
-webkit-animation-timing-function : linear;
-webkit-animation-duration : 20s;
-webkit-animation-delay : 5s;
}

@-webkit-keyframes shadow {
from { right : -800px; }
to { right : 1900px } }
$('.shadow')
.css('backgroundImage',
'url(assets/img/new/unicorn.png)')
.delay(5000)
.animate({
right: 1900
}, 20 * 1000);
});
Cheers!
@rem
remy@leftlogic.com
http://jqueryfordesigners.com

You might also like