SlideShare a Scribd company logo

Super Awesome Interactions with jQuery

ZURB, profile picture
ZURB

The document appears to be a collection of notes and instructions regarding jQuery usage and interactions, dated July 8, 2011. It includes various links to videos, code snippets, and descriptions related to jQuery features, particularly focusing on speed and user interface elements. It emphasizes using jQuery to create effective user experiences through various types of interactions and optimizations.

Technology
1 of 105
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
All information is copyright ZURB, inc. All rights reserved. http://bit.ly/jqconpanel 1 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 2 Super Awesome jQuery Interactions Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 3 jQuery is Awesome Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 4 jQuery http://www.youtube.com/watch?v=8nSyInIKlKE Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 5 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 6 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 7 http://www.youtube.com/watch?v=HPPj6viIBmU Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 8 jQuery http://www.youtube.com/watch?v=Q5im0Ssyyus Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 9 Four Things Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 10 First Do No Harm Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 11 Understand Response Times Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 12 Communicate Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 13 Anticipate Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 14 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 15 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 15 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 16 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 16 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 17 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 17 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 18 Speed Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 19 Less than 100 ms Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 20 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 20 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 21 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 21 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 22 <div id="wrapper"> <%= render :partial => 'generic_tests/instructions' %> <%= render :partial => 'generic_tests/instructions_tab' if show_instructions_tab? %> <%= render :partial => 'generic_tests/test' %> <%= render :partial => 'generic_tests/demographics' if show_demographics_modal? %> <%= render :partial => 'generic_tests/thanks' %> </div> Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 24 100 ms - 1 s Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 25 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 25 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 26 1 s - 10 s Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 28 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 28 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); http://valums.com/ajax-upload/ http://www.zurb.com/playground/ajax_upload Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 30 More than 10 s Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 31 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 31 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 33 Communication Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 34 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 34 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); http://www.zurb.com/playground/jquery-text-change-custom-event Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 36 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 36 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 37 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 37 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 39 http://www.zurb.com/article/379/110-interactions-for-editing-annotations Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 40 Precognition Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 41 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 41 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 43 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 43 jQuery Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 44 Design for people Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 45 Want a job, nerd? ZURB.com/talent Friday, July 8, 2011
All information is copyright ZURB, inc. All rights reserved. 46 ZURB.com/jqconf Friday, July 8, 2011

More Related Content

PDF
Rendering Views in JavaScript - "The New Web Architecture"
Jonathan Julian
 
PDF
Mike hostetler - jQuery knowledge append to you
StarTech Conference
 
PPTX
Being a tweaker modern web performance techniques
Chris Love
 
PDF
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
PDF
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
 
PDF
DOM Scripting Toolkit - jQuery
Remy Sharp
 
PPTX
A Rich Web Experience with jQuery, Ajax and .NET
James Johnson
 
PPTX
A Rich Web experience with jQuery, Ajax and .NET
James Johnson
 
Rendering Views in JavaScript - "The New Web Architecture"
Jonathan Julian
 
Mike hostetler - jQuery knowledge append to you
StarTech Conference
 
Being a tweaker modern web performance techniques
Chris Love
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
 
DOM Scripting Toolkit - jQuery
Remy Sharp
 
A Rich Web Experience with jQuery, Ajax and .NET
James Johnson
 
A Rich Web experience with jQuery, Ajax and .NET
James Johnson
 

Similar to Super Awesome Interactions with jQuery (20)

PPTX
jQuery Mobile
mowd8574
 
PPT
Techniques For A Modern Web UI (With Notes)
patrick.t.joyce
 
PDF
Yearning jQuery
Remy Sharp
 
PDF
Remy Sharp The DOM scripting toolkit jQuery
deimos
 
PDF
Web2.0 with jQuery in English
Lau Bech Lauritzen
 
PDF
J query fundamentals
Attaporn Ninsuwan
 
ZIP
jQuery 1.4-1.6 Best new features
Ryan Blunden
 
PDF
State of jQuery and Drupal
jeresig
 
PPT
J query b_dotnet_ug_meet_12_may_2012
ghnash
 
PDF
jQuery for beginners
Siva Arunachalam
 
PDF
Write Less Do More
Remy Sharp
 
PDF
The Dom Scripting Toolkit J Query
QConLondon2008
 
PDF
Mume JQueryMobile Intro
Gonzalo Parra
 
PPTX
jQuery
Jay Poojara
 
PDF
What's this jQuery? Where it came from, and how it will drive innovation
Marakana Inc.
 
PDF
jQuery Loves Developers - Oredev 2009
Remy Sharp
 
PDF
SilverStripe CMS JavaScript Refactoring
Ingo Schommer
 
PDF
Download full ebook of Extending jQuery Keith Wood download pdf instant downl...
busicluckesz
 
KEY
Week 4 - jQuery + Ajax
baygross
 
KEY
Jquery Fundamentals
Rebecca Murphey
 
jQuery Mobile
mowd8574
 
Techniques For A Modern Web UI (With Notes)
patrick.t.joyce
 
Yearning jQuery
Remy Sharp
 
Remy Sharp The DOM scripting toolkit jQuery
deimos
 
Web2.0 with jQuery in English
Lau Bech Lauritzen
 
J query fundamentals
Attaporn Ninsuwan
 
jQuery 1.4-1.6 Best new features
Ryan Blunden
 
State of jQuery and Drupal
jeresig
 
J query b_dotnet_ug_meet_12_may_2012
ghnash
 
jQuery for beginners
Siva Arunachalam
 
Write Less Do More
Remy Sharp
 
The Dom Scripting Toolkit J Query
QConLondon2008
 
Mume JQueryMobile Intro
Gonzalo Parra
 
jQuery
Jay Poojara
 
What's this jQuery? Where it came from, and how it will drive innovation
Marakana Inc.
 
jQuery Loves Developers - Oredev 2009
Remy Sharp
 
SilverStripe CMS JavaScript Refactoring
Ingo Schommer
 
Download full ebook of Extending jQuery Keith Wood download pdf instant downl...
busicluckesz
 
Week 4 - jQuery + Ajax
baygross
 
Jquery Fundamentals
Rebecca Murphey
 
Ad

More from ZURB (20)

PDF
Foundation: Prototype to Production
ZURB
 
PDF
The Future is Responsive
ZURB
 
PDF
Building Awesome Products (BayCHI)
ZURB
 
PDF
Mobile-First Foundation Design Meetup
ZURB
 
PDF
ZURB Google Talk
ZURB
 
PDF
Building Awesome Products (iOS Developers Meetup)
ZURB
 
PDF
Plug and Play: A Presentation by Bryan Zmijewski
ZURB
 
PDF
Unmoderated User Testing
ZURB
 
PDF
Add a feature? No! Make a New Product
ZURB
 
PDF
Back to an Email (and Responsive) Future
ZURB
 
PDF
Lessons Learned from Building a Web Framework
ZURB
 
PDF
9 Ways to Manipulate People With Design
ZURB
 
PDF
5 Ways Thinking Content-first Will Save Your Butt
ZURB
 
PDF
3 Ways You Can Give and Get Good Design Feedback
ZURB
 
PDF
3 Ways to Go Mobile First with Responsive Design
ZURB
 
PDF
Everyone Sucks at Feedback
ZURB
 
PDF
Design That Drives Action
ZURB
 
PDF
Building Pageless Apps with Rails and Backbone.js
ZURB
 
PDF
Bringing Email Development from 1996 to 2016
ZURB
 
PDF
9 Ways to Guide Users With Design
ZURB
 
Foundation: Prototype to Production
ZURB
 
The Future is Responsive
ZURB
 
Building Awesome Products (BayCHI)
ZURB
 
Mobile-First Foundation Design Meetup
ZURB
 
ZURB Google Talk
ZURB
 
Building Awesome Products (iOS Developers Meetup)
ZURB
 
Plug and Play: A Presentation by Bryan Zmijewski
ZURB
 
Unmoderated User Testing
ZURB
 
Add a feature? No! Make a New Product
ZURB
 
Back to an Email (and Responsive) Future
ZURB
 
Lessons Learned from Building a Web Framework
ZURB
 
9 Ways to Manipulate People With Design
ZURB
 
5 Ways Thinking Content-first Will Save Your Butt
ZURB
 
3 Ways You Can Give and Get Good Design Feedback
ZURB
 
3 Ways to Go Mobile First with Responsive Design
ZURB
 
Everyone Sucks at Feedback
ZURB
 
Design That Drives Action
ZURB
 
Building Pageless Apps with Rails and Backbone.js
ZURB
 
Bringing Email Development from 1996 to 2016
ZURB
 
9 Ways to Guide Users With Design
ZURB
 
Ad

Recently uploaded (20)

PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
KodekX | Application Modernization Development
KodekX
 
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Teaching material agriculture food technology
LiaRayya
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
KodekX | Application Modernization Development
KodekX
 
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 

Super Awesome Interactions with jQuery

  • 1. All information is copyright ZURB, inc. All rights reserved. http://bit.ly/jqconpanel 1 Friday, July 8, 2011
  • 2. All information is copyright ZURB, inc. All rights reserved. 2 Super Awesome jQuery Interactions Friday, July 8, 2011
  • 3. All information is copyright ZURB, inc. All rights reserved. 3 jQuery is Awesome Friday, July 8, 2011
  • 4. All information is copyright ZURB, inc. All rights reserved. 4 jQuery http://www.youtube.com/watch?v=8nSyInIKlKE Friday, July 8, 2011
  • 5. All information is copyright ZURB, inc. All rights reserved. 5 Friday, July 8, 2011
  • 6. All information is copyright ZURB, inc. All rights reserved. 6 Friday, July 8, 2011
  • 7. All information is copyright ZURB, inc. All rights reserved. 7 http://www.youtube.com/watch?v=HPPj6viIBmU Friday, July 8, 2011
  • 8. All information is copyright ZURB, inc. All rights reserved. 8 jQuery http://www.youtube.com/watch?v=Q5im0Ssyyus Friday, July 8, 2011
  • 9. All information is copyright ZURB, inc. All rights reserved. 9 Four Things Friday, July 8, 2011
  • 10. All information is copyright ZURB, inc. All rights reserved. 10 First Do No Harm Friday, July 8, 2011
  • 11. All information is copyright ZURB, inc. All rights reserved. 11 Understand Response Times Friday, July 8, 2011
  • 12. All information is copyright ZURB, inc. All rights reserved. 12 Communicate Friday, July 8, 2011
  • 13. All information is copyright ZURB, inc. All rights reserved. 13 Anticipate Friday, July 8, 2011
  • 14. All information is copyright ZURB, inc. All rights reserved. 14 Friday, July 8, 2011
  • 15. All information is copyright ZURB, inc. All rights reserved. 15 jQuery Friday, July 8, 2011
  • 16. All information is copyright ZURB, inc. All rights reserved. 15 jQuery Friday, July 8, 2011
  • 17. All information is copyright ZURB, inc. All rights reserved. 16 jQuery Friday, July 8, 2011
  • 18. All information is copyright ZURB, inc. All rights reserved. 16 jQuery Friday, July 8, 2011
  • 19. All information is copyright ZURB, inc. All rights reserved. 17 jQuery Friday, July 8, 2011
  • 20. All information is copyright ZURB, inc. All rights reserved. 17 jQuery Friday, July 8, 2011
  • 21. All information is copyright ZURB, inc. All rights reserved. 18 Speed Friday, July 8, 2011
  • 22. All information is copyright ZURB, inc. All rights reserved. 19 Less than 100 ms Friday, July 8, 2011
  • 23. All information is copyright ZURB, inc. All rights reserved. 20 jQuery Friday, July 8, 2011
  • 24. All information is copyright ZURB, inc. All rights reserved. 20 jQuery Friday, July 8, 2011
  • 25. All information is copyright ZURB, inc. All rights reserved. 21 jQuery Friday, July 8, 2011
  • 26. All information is copyright ZURB, inc. All rights reserved. 21 jQuery Friday, July 8, 2011
  • 27. All information is copyright ZURB, inc. All rights reserved. 22 <div id="wrapper"> <%= render :partial => 'generic_tests/instructions' %> <%= render :partial => 'generic_tests/instructions_tab' if show_instructions_tab? %> <%= render :partial => 'generic_tests/test' %> <%= render :partial => 'generic_tests/demographics' if show_demographics_modal? %> <%= render :partial => 'generic_tests/thanks' %> </div> Friday, July 8, 2011
  • 28. All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
  • 29. All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
  • 30. All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
  • 31. All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
  • 32. All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
  • 33. All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
  • 34. All information is copyright ZURB, inc. All rights reserved. 23 $(document).bind('dismissInstructions', function () { $('#testContainer').fadeInAndSlide(); var image = screenshotContainer.children('img'); image.centerImage(); }); $('#startTest').click(function (event) { event.preventDefault(); $('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () { $(document).trigger('dismissInstructions'); }}); }); Friday, July 8, 2011
  • 35. All information is copyright ZURB, inc. All rights reserved. 24 100 ms - 1 s Friday, July 8, 2011
  • 36. All information is copyright ZURB, inc. All rights reserved. 25 jQuery Friday, July 8, 2011
  • 37. All information is copyright ZURB, inc. All rights reserved. 25 jQuery Friday, July 8, 2011
  • 38. All information is copyright ZURB, inc. All rights reserved. 26 1 s - 10 s Friday, July 8, 2011
  • 39. All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
  • 40. All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
  • 41. All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
  • 42. All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
  • 43. All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
  • 44. All information is copyright ZURB, inc. All rights reserved. 27 Friday, July 8, 2011
  • 45. All information is copyright ZURB, inc. All rights reserved. 28 jQuery Friday, July 8, 2011
  • 46. All information is copyright ZURB, inc. All rights reserved. 28 jQuery Friday, July 8, 2011
  • 47. All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
  • 48. All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
  • 49. All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
  • 50. All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
  • 51. All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); Friday, July 8, 2011
  • 52. All information is copyright ZURB, inc. All rights reserved. 29 var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); http://valums.com/ajax-upload/ http://www.zurb.com/playground/ajax_upload Friday, July 8, 2011
  • 53. All information is copyright ZURB, inc. All rights reserved. 30 More than 10 s Friday, July 8, 2011
  • 54. All information is copyright ZURB, inc. All rights reserved. 31 jQuery Friday, July 8, 2011
  • 55. All information is copyright ZURB, inc. All rights reserved. 31 jQuery Friday, July 8, 2011
  • 56. All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
  • 57. All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
  • 58. All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
  • 59. All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
  • 60. All information is copyright ZURB, inc. All rights reserved. 32 function checkStatus() { $.ajax({ url: $('#postStatus').attr('href'), success: function(response) { if (response.complete) { window.location = response.location; } else { setTimeout(checkStatus, 5000); } } }); } setTimeout(checkStatus, 3000); Friday, July 8, 2011
  • 61. All information is copyright ZURB, inc. All rights reserved. 33 Communication Friday, July 8, 2011
  • 62. All information is copyright ZURB, inc. All rights reserved. 34 jQuery Friday, July 8, 2011
  • 63. All information is copyright ZURB, inc. All rights reserved. 34 jQuery Friday, July 8, 2011
  • 64. All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
  • 65. All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
  • 66. All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
  • 67. All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
  • 68. All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); Friday, July 8, 2011
  • 69. All information is copyright ZURB, inc. All rights reserved. 35 $('#noteText').bind('hastext', function () { $('#ok').removeClass('disabled').attr('disabled', false); }); $('#noteText').bind('notext', function () { $('#ok').addClass('disabled').attr('disabled', true); }); http://www.zurb.com/playground/jquery-text-change-custom-event Friday, July 8, 2011
  • 70. All information is copyright ZURB, inc. All rights reserved. 36 jQuery Friday, July 8, 2011
  • 71. All information is copyright ZURB, inc. All rights reserved. 36 jQuery Friday, July 8, 2011
  • 72. All information is copyright ZURB, inc. All rights reserved. 37 jQuery Friday, July 8, 2011
  • 73. All information is copyright ZURB, inc. All rights reserved. 37 jQuery Friday, July 8, 2011
  • 74. All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
  • 75. All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
  • 76. All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
  • 77. All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
  • 78. All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
  • 79. All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
  • 80. All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
  • 81. All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
  • 82. All information is copyright ZURB, inc. All rights reserved. 38 /* The note is currently being created */ div.note.current div.note-body { display: none; } /* This note is read only */ div.note.read-only a.delete-note { display: none; } div.note.read-only button.ok { display: none; } div.note.read-only div.overlay { cursor: default; } /* The note is editable but not currently being edited */ div.note.editable button.ok { display: none; } div.note.editable div.overlay { cursor: pointer; } /* The note is being edited */ div.note.editing { z-index: 80; } div.note.editing div.overlay { cursor: move; } div.note.editing div.corner { display: block; z-index: 1000; } Friday, July 8, 2011
  • 83. All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
  • 84. All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
  • 85. All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
  • 86. All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
  • 87. All information is copyright ZURB, inc. All rights reserved. 39 Friday, July 8, 2011
  • 88. All information is copyright ZURB, inc. All rights reserved. 39 http://www.zurb.com/article/379/110-interactions-for-editing-annotations Friday, July 8, 2011
  • 89. All information is copyright ZURB, inc. All rights reserved. 40 Precognition Friday, July 8, 2011
  • 90. All information is copyright ZURB, inc. All rights reserved. 41 jQuery Friday, July 8, 2011
  • 91. All information is copyright ZURB, inc. All rights reserved. 41 jQuery Friday, July 8, 2011
  • 92. All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
  • 93. All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
  • 94. All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
  • 95. All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
  • 96. All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
  • 97. All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
  • 98. All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
  • 99. All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
  • 100. All information is copyright ZURB, inc. All rights reserved. 42 var deactivateTimeout, activateTimeout; $('ul.main-nav li').mouseenter(function () { var li = $(this); clearTimeout(deactivateTimeout); clearTimeout(activateTimeout); activateTimeout = setTimeout( function () { li.activateTab(); }, 500); }); $('#navigation').mouseleave(function () { deactivateTimeout = setTimeout(function () { $('ul.main-nav li.selected').activateTab(); }, 500); }); Friday, July 8, 2011
  • 101. All information is copyright ZURB, inc. All rights reserved. 43 jQuery Friday, July 8, 2011
  • 102. All information is copyright ZURB, inc. All rights reserved. 43 jQuery Friday, July 8, 2011
  • 103. All information is copyright ZURB, inc. All rights reserved. 44 Design for people Friday, July 8, 2011
  • 104. All information is copyright ZURB, inc. All rights reserved. 45 Want a job, nerd? ZURB.com/talent Friday, July 8, 2011
  • 105. All information is copyright ZURB, inc. All rights reserved. 46 ZURB.com/jqconf Friday, July 8, 2011