Applying basic design tools like sketching, design before implementation, and interaction grids will ensure your users cry with joy, rather then cringe with disgust. In this talk we show you how to design super awesome interactions for jQuery and jQuery UI. Implementation details and design decisions behind Notableapp.com, Verifyapp.com, and Bounceapp.com will be shared to demonstrate how these design principles are applied to real sites.

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