Scribd
Upload
332 views149 pages

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)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
332 views149 pages

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)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

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,
[Link]
plugins, development sprints
[Link]
[Link]

Twitter [Link]
@jquery Help!
@jquerysites
@jqueryui
IRC channel
[Link]/#jquery
APIs Blogs, tutorials, screencasts,
[Link]
plugins, development sprints
[Link]
[Link]

Twitter [Link]
@jquery Help!
@jquerysites
@jqueryui
IRC channel
[Link]/#jquery
Bling Function
It means no more of this
var tables = [Link]('table');
for (var t = 0; t < [Link]; t++) {
! var rows = tables[t].getElementsByTagName('tr');
! for (var i = 1; i < [Link]; 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
[Link]

[Link]
Roll over & click links
for more information
jQuery love for any page
Tip

$.[Link]

(little 'q')
No fireQuery?
jQuery on every site?
No fireQuery?
jQuery on every site?
No Problem.
[Link]
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="[Link]"></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="[Link]"></script>
<script>
$(function () {
$('p').doStuff();
});
</script>
</body>
</html>
Sample Selectors
Selectors silently fail

$('remy')
Selectors silently fail

$('remy').length
$(‘#nav [Link]’)
$(‘#nav [Link]’)

$(‘:visible’)
$(‘#nav [Link]’)

$(‘:visible’)

$(‘:radio:enabled:checked’)
$(‘#nav [Link]’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)
$(‘#nav [Link]’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

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

jQuery lets me
query based on
DOM attributes
$(‘#nav [Link]’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

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

jQuery lets me
query based on
DOM attributes
$(‘#nav [Link]’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

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

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

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

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

"contains", also
have ^= and $=
$(‘#nav [Link]’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

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

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

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

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

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

$(‘.header, .footer’)
$(‘#nav [Link]’)

$(‘:visible’)

$(‘:radio:enabled:checked’)

$(‘a[title]’)

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

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

$(‘.header, .footer’)

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


Tip $(‘#nav [Link]’)

$(‘: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
$('[Link] a').hover(function () {
$(this).find('strong').fadeIn(1000);
}, function () {
$(this).find('strong').fadeOut(1000);
});
$('[Link] 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);
[Link]

$('#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);

[Link]
$('#ball').addClass('big', 500);

[Link]
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
[Link]

[Link]
$('#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

$.[Link] = true;
Ajax Warning: wear your tech-hat
No brainer Ajax
$('#detail').load('[Link]');
$('#detail').load('[Link] #id');
[Link]
the secret sauce

$('#tabs a').click(function () {
$('#detail').load('[Link] ' + [Link]);
return false;
});
[Link]
the secret sauce

$('#tabs a').click(function () {
$('#detail').load('[Link] #dizzy');
return false;
});
[Link]
the secret sauce

$('#tabs a').click(function () {
$('#detail').load('[Link] ' + [Link]);
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 = '[Link]
callback=?&q=';

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

$('a').click(function () {
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();
$.each([Link], function (i, item) {
$('#tweets').append('<li>' + [Link] + '</li>');
});
});
return false;
});
var twitterURL = '[Link]
callback=?&q=';

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

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

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

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

$('a').click(function () {
$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();
$.each([Link], function (i, item) {
$('#tweets').append('<li>' + [Link] + '</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) {
[Link]()
// 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/[Link]);
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/[Link]);
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/[Link])')
.delay(5000)
.animate({
right: 1900
}, 20 * 1000);
});
Cheers!
@rem
remy@[Link]
[Link]

You might also like