Loading...

Viewing Fixee

Language: Javascript (View Plain Text) (Show diff)

January 24, 2010 8:50 am

 
  1. // http://jquery14.com/day-09/jquery-1-4-hawtness-3-with-paul-irish
  2.  
  3.  
  4. /*d8b  .d88888b.                                         d888          d8888  
  5.   Y8P d88P" "Y88b                                       d8888         d8P888  
  6.       888     888                                         888        d8P 888  
  7.  8888 888     888 888  888  .d88b.  888d888 888  888      888       d8P  888  
  8.  "888 888     888 888  888 d8P  Y8b 888P"   888  888      888      d88   888  
  9.   888 888 Y8b 888 888  888 88888888 888     888  888      888      8888888888 
  10.   888 Y88b.Y8b88P Y88b 888 Y8b.     888     Y88b 888      888   d8b      888  
  11.   888  "Y888888"   "Y88888  "Y8888  888      "Y88888    8888888 Y8P      888  
  12.   888        Y8b                                 888                          
  13.  d88P                                       Y8b d88P                          
  14. 888P"                                         "Y88P"                           
  15.  
  16. 888    888                        888                                        
  17. 888    888                        888                                        
  18. 888    888                        888                                        
  19. 8888888888  8888b.  888  888  888 888888 88888b.   .d88b.  .d8888b  .d8888b  
  20. 888    888     "88b 888  888  888 888    888 "88b d8P  Y8b 88K      88K      
  21. 888    888 .d888888 888  888  888 888    888  888 88888888 "Y8888b. "Y8888b. 
  22. 888    888 888  888 Y88b 888 d88P Y88b.  888  888 Y8b.          X88      X88 
  23. 888    888 "Y888888  "Y8888888P"   "Y888 888  888  "Y8888   88888P'  88888P'
  24.  
  25.  
  26.         #3: events! bind(). proxy(). special
  27.                              
  28.  
  29. db   d8b   db d888888b d888888b db   db 
  30. 88   I8I   88   `88'   `~~88~~' 88   88 
  31. 88   I8I   88    88       88    88ooo88 
  32. Y8   I8I   88    88       88    88~~~88 
  33. `8b d8'8b d8'   .88.      88    88   88 
  34. `8b8' `8d8'  Y888888P    YP    YP   YP 
  35.  
  36. d8888b.  .d8b.  db    db db          d888888b d8888b. d888888b .d8888. db   db 
  37. 88  `8D d8' `8b 88    88 88            `88'   88  `8D   `88'   88'  YP 88   88 
  38. 88oodD' 88ooo88 88    88 88             88    88oobY'    88    `8bo.   88ooo88 
  39. 88~~~   88~~~88 88    88 88             88    88`8b      88      `Y8b. 88~~~88 
  40. 88      88   88 88b  d88 88booo.       .88.   88 `88.   .88.   db   8D 88   88 
  41. 88      YP   YP ~Y8888P' Y88888P     Y888888P 88   YD Y888888P `8888Y' YP   YP
  42.  
  43. */
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54. /*
  55.     oo.ooooo.  oooo d8b  .ooooo.  oooo    ooo oooo    ooo 
  56.      888' `88b `888""8P d88' `88b  `88b..8P'   `88.  .8'  
  57.      888   888  888     888   888    Y888'      `88..8'   
  58.      888   888  888     888   888  .o8"'88b      `888'    
  59.      888bod8P' d888b    `Y8bod8P' o88'   888o     .8'     
  60.      888                                      .o..P'      
  61.     o888o                                     `Y8P'       
  62. */                                                     
  63.  
  64.  
  65.  
  66.  
  67.  
  68. // unbinding magic with $.proxy()
  69. function yellFn(){
  70.    console.log('i am ' + this.name)
  71. }
  72. function foodObj {
  73.     this.name = 'dinner!';
  74. }
  75.  
  76. jQuery("#firstp")
  77.     .bind("click", jQuery.proxy(yellFn, foodObj))
  78.     .click()
  79.     .unbind("click", yellFn);
  80.  
  81.  
  82.  
  83.  
  84.  
  85. // PROXY DEMO! 
  86. // http://jsfiddle.net/vzCDY/3/  
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94. /*
  95.      .o8        o8o                    .o8  
  96.     "888        `"'                   "888  
  97.      888oooo.  oooo  ooo. .oo.    .oooo888  
  98.      d88' `88b `888  `888P"Y88b  d88' `888  
  99.      888   888  888   888   888  888   888  
  100.      888   888  888   888   888  888   888  
  101.      `Y8bod8P' o888o o888o o888o `Y8bod88P" 
  102.  
  103. */
  104.  
  105.  
  106.  
  107. // multiple binds at once
  108.  
  109. $('#foo').click(function() {
  110.  
  111.     // do something on click
  112.  
  113.   },
  114.   dblclick: function() {
  115.  
  116.     // do something on dblclick
  117.  
  118. });
  119.  
  120.  
  121.  
  122.  
  123. /*
  124.                   .   oooo                           
  125.                 .o8   `888                           
  126.      .ooooo.  .o888oo  888 .oo.    .ooooo.  oooo d8b 
  127.     d88' `88b   888    888P"Y88b  d88' `88b `888""8P 
  128.     888   888   888    888   888  888ooo888  888     
  129.     888   888   888 .  888   888  888    .o  888     
  130.     `Y8bod8P'   "888" o888o o888o `Y8bod8P' d888b    
  131.                                                  
  132.                                                  
  133.                                                  
  134.                                                     .                        
  135.                                                   .o8                        
  136.      .ooooo.  oooo    ooo  .ooooo.  ooo. .oo.   .o888oo  .oooo.o             
  137.     d88' `88b  `88.  .8'  d88' `88b `888P"Y88b    888   d88(  "8             
  138.     888ooo888   `88..8'   888ooo888  888   888    888   `"Y88b.              
  139.     888    .o    `888'    888    .o  888   888    888 . o.  )88b .o. .o. .o. 
  140.     `Y8bod8P'     `8'     `Y8bod8P' o888o o888o   "888" 8""888P' Y8P Y8P Y8P
  141. */
  142.  
  143.  
  144.  
  145.  
  146. // onbeforeunload binds works fine in IE now
  147.  
  148. $(window).bind('onbeforeunload',function(){
  149.     $.ajax({
  150.         url :'userleaving.php',
  151.         method : 'POST'
  152.         data : userData,
  153.         async : false
  154.     })
  155. })
  156.  
  157.  
  158.  
  159.  
  160.  
  161.  
  162.  
  163.  
  164.  
  165.  
  166. // mutation events! DOMAttrModified, DOMNodeInserted, DOMNodeRemoved, DOMSubtreeModified
  167. // http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents
  168.  
  169. // watch its content to change
  170. $('#magicbox').bind('DOMSubtreeModified', function(e) {
  171.  
  172.     // what's inside #magicbox has changed
  173.  
  174. });
  175.  
  176.  
  177.  
  178.  
  179. // touch events a la iphone
  180.   $body
  181.    .bind('touchstart', handleTouch)
  182.    .bind('orientationchange', updateOrientation)
  183.    .trigger('orientationchange');
  184.  
  185.  
  186.  
  187.  
  188.  
  189.  
  190.  
  191. // image load events not 100%
  192. var loaded = 0;
  193.  
  194. $('img').load(function(){
  195.     loaded++;
  196.     if (loaded == $('img').length) console.log('all images loaded')
  197. });
  198.  
  199.  
  200.  
  201.  
  202.  
  203.  
  204.  
  205.  
  206. /*
  207.     oooo                                                 
  208.     `888                                                 
  209.      888 .oo.    .ooooo.  oooo    ooo  .ooooo.  oooo d8b 
  210.      888P"Y88b  d88' `88b  `88.  .8'  d88' `88b `888""8P 
  211.      888   888  888   888   `88..8'   888ooo888  888     
  212.      888   888  888   888    `888'    888    .o  888     
  213.     o888o o888o `Y8bod8P'     `8'     `Y8bod8P' d888b    
  214.                                                      
  215. */
  216.  
  217. // colorize the hoverboxes when people hover in and out of them
  218.  
  219. $('div.hoverbox').hover(function(e){
  220.  
  221.     var isEnter = (e.type === 'mouseenter');
  222.  
  223.     $(this).css('backgroundColor', isEnter ? 'red' : 'blue');
  224.  
  225. });
  226.  
  227.  
  228.  
  229.  
  230.  
  231.  
  232.  
  233. /*
  234.                                                 .       
  235.                                               .o8       
  236.  .ooooo.  oooo    ooo  .ooooo.  ooo. .oo.   .o888oo     
  237. d88' `88b  `88.  .8'  d88' `88b `888P"Y88b    888       
  238. 888ooo888   `88..8'   888ooo888  888   888    888       
  239. 888    .o    `888'    888    .o  888   888    888 . .o. 
  240. `Y8bod8P'     `8'     `Y8bod8P' o888o o888o   "888" Y8P 
  241.                                                     
  242.                                                  o8o            oooo  
  243.                                                  `"'            `888  
  244.          .oooo.o oo.ooooo.   .ooooo.   .ooooo.  oooo   .oooo.    888  
  245.         d88(  "8  888' `88b d88' `88b d88' `"Y8 `888  `P  )88b   888  
  246.         `"Y88b.   888   888 888ooo888 888        888   .oP"888   888  
  247.         o.  )88b  888   888 888    .o 888   .o8  888  d8(  888   888  
  248.         8""888P'  888bod8P' `Y8bod8P' `Y8bod8P' o888o `Y888""8o o888o 
  249.                   888                                                 
  250.                  o888o                                                  
  251. */
  252.  
  253.  
  254.  
  255.  
  256. $('div')
  257.     .bind("multiclick", { threshold: 5 }, function( event ) {
  258.         alert( "Clicked 5 times" );
  259.     })
  260.     .bind("multiclick", { threshold: 3 }, function( event ) {
  261.         alert( "Clicked 3 times" );
  262.     });
  263.  
  264.  
  265.  
  266.  
  267.  
  268.  
  269. jQuery.event.special.multiclick = {
  270.     add: function( handler, data, namespaces ) {
  271.         // called for each bound handler
  272.     },
  273.  
  274.     setup: function( data, namespaces ) {
  275.         // called once per an element
  276.     },
  277.  
  278.     remove: function( namespaces ) {
  279.         // called for each bound handler
  280.     },
  281.  
  282.     teardown: function( namespaces ) {
  283.         // called once per an element
  284.     },
  285.  
  286.     handler: function( event ) {
  287.  
  288.     }
  289. };
  290.  
  291.  
  292.  
  293.  
  294.  
  295.  
  296.  
  297.  
  298.  
  299.                                   d8b                                                          888 
  300.                                   Y8P                                                          888 
  301.                                                                                                888 
  302.     .d8888b .d88b.  88888b.d88b.  888 88888b.   .d88b.     .d8888b   .d88b.   .d88b.  88888b.  888 
  303.    d88P"   d88""88b 888 "888 "88b 888 888 "88b d88P"88b    88K      d88""88b d88""88b 888 "88b 888 
  304.    888     888  888 888  888  888 888 888  888 888  888    "Y8888b. 888  888 888  888 888  888 Y8P 
  305.    Y88b.   Y88..88P 888  888  888 888 888  888 Y88b 888         X88 Y88..88P Y88..88P 888  888  "  
  306.     "Y8888P "Y88P"  888  888  888 888 888  888  "Y88888     88888P'  "Y88P"   "Y88P"  888  888 888 
  307.                                                     888                                            
  308.                                                Y8b d88P                                            
  309.                                                 "Y88P"                                             
  310.  
  311.  
  312.  
  313. // traversing and manipulation
  314. // *ajax!*
  315. // utilities
  316. // what may break in 1.4 for you.'
  317.