// http://jquery14.com/day-09/jquery-1-4-hawtness-3-with-paul-irish
/*d8b .d88888b. d888 d8888
Y8P d88P" "Y88b d8888 d8P888
888 888 888 d8P 888
8888 888 888 888 888 .d88b. 888d888 888 888 888 d8P 888
"888 888 888 888 888 d8P Y8b 888P" 888 888 888 d88 888
888 888 Y8b 888 888 888 88888888 888 888 888 888 8888888888
888 Y88b.Y8b88P Y88b 888 Y8b. 888 Y88b 888 888 d8b 888
888 "Y888888" "Y88888 "Y8888 888 "Y88888 8888888 Y8P 888
888 Y8b 888
d88P Y8b d88P
888P" "Y88P"
888 888 888
888 888 888
888 888 888
8888888888 8888b. 888 888 888 888888 88888b. .d88b. .d8888b .d8888b
888 888 "88b 888 888 888 888 888 "88b d8P Y8b 88K 88K
888 888 .d888888 888 888 888 888 888 888 88888888 "Y8888b. "Y8888b.
888 888 888 888 Y88b 888 d88P Y88b. 888 888 Y8b. X88 X88
888 888 "Y888888 "Y8888888P" "Y888 888 888 "Y8888 88888P' 88888P'
#3: events! bind(). proxy(). special
db d8b db d888888b d888888b db db
88 I8I 88 `88' `~~88~~' 88 88
88 I8I 88 88 88 88ooo88
Y8 I8I 88 88 88 88~~~88
`8b d8'8b d8' .88. 88 88 88
`8b8' `8d8' Y888888P YP YP YP
d8888b. .d8b. db db db d888888b d8888b. d888888b .d8888. db db
88 `8D d8' `8b 88 88 88 `88' 88 `8D `88' 88' YP 88 88
88oodD' 88ooo88 88 88 88 88 88oobY' 88 `8bo. 88ooo88
88~~~ 88~~~88 88 88 88 88 88`8b 88 `Y8b. 88~~~88
88 88 88 88b d88 88booo. .88. 88 `88. .88. db 8D 88 88
88 YP YP ~Y8888P' Y88888P Y888888P 88 YD Y888888P `8888Y' YP YP
*/
/*
oo.ooooo. oooo d8b .ooooo. oooo ooo oooo ooo
888' `88b `888""8P d88' `88b `88b..8P' `88. .8'
888 888 888 888 888 Y888' `88..8'
888 888 888 888 888 .o8"'88b `888'
888bod8P' d888b `Y8bod8P' o88' 888o .8'
888 .o..P'
o888o `Y8P'
*/
// unbinding magic with $.proxy()
function yellFn(){
console.log('i am ' + this.name)
}
function foodObj {
this.name = 'dinner!';
}
jQuery("#firstp")
.bind("click", jQuery.proxy(yellFn, foodObj))
.click()
.unbind("click", yellFn);
// PROXY DEMO!
// http://jsfiddle.net/vzCDY/3/
/*
.o8 o8o .o8
"888 `"' "888
888oooo. oooo ooo. .oo. .oooo888
d88' `88b `888 `888P"Y88b d88' `888
888 888 888 888 888 888 888
888 888 888 888 888 888 888
`Y8bod8P' o888o o888o o888o `Y8bod88P"
*/
// multiple binds at once
$('#foo').click(function() {
// do something on click
},
dblclick: function() {
// do something on dblclick
});
/*
. oooo
.o8 `888
.ooooo. .o888oo 888 .oo. .ooooo. oooo d8b
d88' `88b 888 888P"Y88b d88' `88b `888""8P
888 888 888 888 888 888ooo888 888
888 888 888 . 888 888 888 .o 888
`Y8bod8P' "888" o888o o888o `Y8bod8P' d888b
.
.o8
.ooooo. oooo ooo .ooooo. ooo. .oo. .o888oo .oooo.o
d88' `88b `88. .8' d88' `88b `888P"Y88b 888 d88( "8
888ooo888 `88..8' 888ooo888 888 888 888 `"Y88b.
888 .o `888' 888 .o 888 888 888 . o. )88b .o. .o. .o.
`Y8bod8P' `8' `Y8bod8P' o888o o888o "888" 8""888P' Y8P Y8P Y8P
*/
// onbeforeunload binds works fine in IE now
$(window).bind('onbeforeunload',function(){
$.ajax({
url :'userleaving.php',
method : 'POST'
data : userData,
async : false
})
})
// mutation events! DOMAttrModified, DOMNodeInserted, DOMNodeRemoved, DOMSubtreeModified
// http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents
// watch its content to change
$('#magicbox').bind('DOMSubtreeModified', function(e) {
// what's inside #magicbox has changed
});
// touch events a la iphone
$body
.bind('touchstart', handleTouch)
.bind('orientationchange', updateOrientation)
.trigger('orientationchange');
// image load events not 100%
var loaded = 0;
$('img').load(function(){
loaded++;
if (loaded == $('img').length) console.log('all images loaded')
});
/*
oooo
`888
888 .oo. .ooooo. oooo ooo .ooooo. oooo d8b
888P"Y88b d88' `88b `88. .8' d88' `88b `888""8P
888 888 888 888 `88..8' 888ooo888 888
888 888 888 888 `888' 888 .o 888
o888o o888o `Y8bod8P' `8' `Y8bod8P' d888b
*/
// colorize the hoverboxes when people hover in and out of them
$('div.hoverbox').hover(function(e){
var isEnter = (e.type === 'mouseenter');
$(this).css('backgroundColor', isEnter ? 'red' : 'blue');
});
/*
.
.o8
.ooooo. oooo ooo .ooooo. ooo. .oo. .o888oo
d88' `88b `88. .8' d88' `88b `888P"Y88b 888
888ooo888 `88..8' 888ooo888 888 888 888
888 .o `888' 888 .o 888 888 888 . .o.
`Y8bod8P' `8' `Y8bod8P' o888o o888o "888" Y8P
o8o oooo
`"' `888
.oooo.o oo.ooooo. .ooooo. .ooooo. oooo .oooo. 888
d88( "8 888' `88b d88' `88b d88' `"Y8 `888 `P )88b 888
`"Y88b. 888 888 888ooo888 888 888 .oP"888 888
o. )88b 888 888 888 .o 888 .o8 888 d8( 888 888
8""888P' 888bod8P' `Y8bod8P' `Y8bod8P' o888o `Y888""8o o888o
888
o888o
*/
$('div')
.bind("multiclick", { threshold: 5 }, function( event ) {
alert( "Clicked 5 times" );
})
.bind("multiclick", { threshold: 3 }, function( event ) {
alert( "Clicked 3 times" );
});
jQuery.event.special.multiclick = {
add: function( handler, data, namespaces ) {
// called for each bound handler
},
setup: function( data, namespaces ) {
// called once per an element
},
remove: function( namespaces ) {
// called for each bound handler
},
teardown: function( namespaces ) {
// called once per an element
},
handler: function( event ) {
}
};
d8b 888
Y8P 888
888
.d8888b .d88b. 88888b.d88b. 888 88888b. .d88b. .d8888b .d88b. .d88b. 88888b. 888
d88P" d88""88b 888 "888 "88b 888 888 "88b d88P"88b 88K d88""88b d88""88b 888 "88b 888
888 888 888 888 888 888 888 888 888 888 888 "Y8888b. 888 888 888 888 888 888 Y8P
Y88b. Y88..88P 888 888 888 888 888 888 Y88b 888 X88 Y88..88P Y88..88P 888 888 "
"Y8888P "Y88P" 888 888 888 888 888 888 "Y88888 88888P' "Y88P" "Y88P" 888 888 888
888
Y8b d88P
"Y88P"
// traversing and manipulation
// *ajax!*
// utilities
// what may break in 1.4 for you.'