test/hovertest.html

   1 <html>
   2 <head>
   3 <title>Hover tests</title>
   4 <script src="jquery.js"></script>
   5 <style>
   6 /* Remove body dimensions so we can test enter/leave to surrounding browser chrome */
   7 body, html {
   8         border: 0;
   9         margin: 0;
  10         padding: 0;
  11 }
  12 p {
  13         margin: 2px 0;
  14 }
  15 .hover-box {
  16         background: #f33;
  17         padding: 3px;
  18         margin: 10px 40px 20px 0;
  19 }
  20 .hover-status {
  21         background: #f66;
  22         padding: 1px;
  23 }
  24 .hover-inside {
  25         background: #6f6;
  26         padding: 1px;
  27         margin: 8px auto;
  28         width: 40%;
  29         text-align: center;
  30 }
  31 </style>
  32  </head>
  33  <body>
  34         <h2>Hover (mouse{over,out,enter,leave}) Tests</h2>
  35         <p>Be sure to try moving the mouse out of the browser via the left side on each test.</p>
  36         <div id="wrapper">
  37
  38         <div id="hoverbox" class="hover-box">
  39                 <div class="hover-status">
  40                         <button>Activate</button>
  41                         .hover() in/out: <span class="ins">0</span> / <span class="outs">0</span>
  42                 </div>
  43                 <div class="hover-inside">
  44                         Mouse over here should NOT trigger the counter.
  45                 </div>
  46         </div>
  47         <div id="liveenterbox" class="hover-box">
  48                 <div class="hover-status">
  49                         <button>Activate</button>
  50                         Live enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
  51                 </div>
  52                 <div class="hover-inside">
  53                         Mouse over here should NOT trigger the counter.
  54                 </div>
  55         </div>
  56         <div id="delegateenterbox" class="hover-box">
  57                 <div class="hover-status">
  58                         <button>Activate</button>
  59                         Delegated enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
  60                 </div>
  61                 <div class="hover-inside">
  62                         Mouse over here should NOT trigger the counter.
  63                 </div>
  64         </div>
  65
  66         <div id="overbox" class="hover-box">
  67                 <div class="hover-status">
  68                         <button>Activate</button>
  69                         Bind over/out: <span class="ins">0</span> / <span class="outs">0</span>
  70                 </div>
  71                 <div class="hover-inside">
  72                         Mouse over here SHOULD trigger the counter.
  73                 </div>
  74         </div>
  75         <div id="liveoverbox" class="hover-box">
  76                 <div class="hover-status">
  77                         <button>Activate</button>
  78                         Live over/out: <span class="ins">0</span> / <span class="outs">0</span>
  79                 </div>
  80                 <div class="hover-inside">
  81                         Mouse over here SHOULD trigger the counter.
  82                 </div>
  83         </div>
  84         <div id="delegateoverbox" class="hover-box">
  85                 <div class="hover-status">
  86                         <button>Activate</button>
  87                         Delegated over/out: <span class="ins">0</span> / <span class="outs">0</span>
  88                 </div>
  89                 <div class="hover-inside">
  90                         Mouse over here SHOULD trigger the counter.
  91                 </div>
  92         </div>
  93
  94         </div> <!-- wrapper -->
  95
  96 <script>
  97
  98 $(function(){
  99
 100         var x,
 101                 countIns = function() {
 102                         var d = $(this).data();
 103                         $("span.ins", this).text(++d.ins);
 104                 },
 105                 countOuts = function() {
 106                         var d = $(this).data();
 107                         $("span.outs", this).text(++d.outs);
 108                 };
 109
 110         // Tests can be activated separately or in combination to check for interference
 111
 112         $("#hoverbox button").click(function(){
 113                 $("#hoverbox")
 114                         .data({ ins: 0, outs: 0 })
 115                         .hover( countIns, countOuts );
 116                 $(this).remove();
 117         });
 118         $("#delegateenterbox button").click(function(){
 119                 $("html")
 120                         .find("#delegateenterbox").data({ ins: 0, outs: 0 }).end()
 121                         .delegate("#delegateenterbox", "mouseenter", countIns )
 122                         .delegate("#delegateenterbox", "mouseleave", countOuts );
 123                 $(this).remove();
 124         });
 125         $("#liveenterbox button").click(function(){
 126                 $("#liveenterbox")
 127                         .data({ ins: 0, outs: 0 })
 128                         .live("mouseenter", countIns )
 129                         .live("mouseleave", countOuts );
 130                 $(this).remove();
 131         });
 132
 133         $("#overbox button").click(function(){
 134                 $("#overbox")
 135                         .data({ ins: 0, outs: 0 })
 136                         .bind("mouseover", countIns )
 137                         .bind("mouseout", countOuts );
 138                 $(this).remove();
 139         });
 140         $("#liveoverbox button").click(function(){
 141                 $("#liveoverbox")
 142                         .data({ ins: 0, outs: 0 })
 143                         .live("mouseover", countIns )
 144                         .live("mouseout", countOuts );
 145                 $(this).remove();
 146         });
 147         $("#delegateoverbox button").click(function(){
 148                 $(document)
 149                         .find("#delegateoverbox").data({ ins: 0, outs: 0 }).end()
 150                         .delegate("#delegateoverbox", "mouseover", countIns )
 151                         .delegate("#delegateoverbox", "mouseout", countOuts );
 152                 $(this).remove();
 153         });
 154 });
 155
 156 </script>
 157 </body>
 158 </html>