API tools faq
paste
Advertisement
Guest User

Dan

a guest
Jun 27th, 2010
249
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.    
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>
  7.             Untitled Document
  8.         </title>
  9.         <script type="text/javascript" src="jquery.js">
  10.         </script>
  11.         <script type="text/javascript" src="jquery.hoverIntent.minified.js"> <!-- DONT FORGET TO DOWNLOAD THIS -->
  12.         </script>
  13.         <script type="text/javascript">
  14.             $(document).ready(function() {
  15.      $("a.show_div").hoverIntent({ // capture the link hover events
  16.          over:  function() {
  17.                  var $sibling = $(this).siblings('div.hello').show(); // get the sibling div and show it
  18.                  $('div.hello').not($sibling).fadeOut(300); // hide the other divs
  19.                  $sibling.data('linkOver', true); // store the fact that the link triggered this
  20.                 },
  21.          out: function() {  
  22.                 var $sibling = $(this).siblings('div.hello');
  23.                 $sibling.data('linkOver', false);
  24.                 if( $sibling.data('divOver') != true) { // only hide if the mouse isn't on the div
  25.                   $sibling.delay(200).fadeOut(500); // get the sibling div and hide it after .333 seconds
  26.                 }
  27.               },
  28.         timeout: 500   //time to fire the event - must be greater than div.hover's timeout                  
  29.       });
  30.      
  31.      $("div.hello").hoverIntent({ //capture the div hover events
  32.          over: function() {
  33.                  $(this).data('divOver', true); // store the fact we're over the div now
  34.                },
  35.          out:  function() {  
  36.                  var $div = $(this);
  37.                  $div.data('divOver', false);
  38.                  if( $div.data('linkOver') != true ) { // if we're not on the link
  39.                    $(this).delay(200).fadeOut(500);  // then hide the div
  40.                  }
  41.                },
  42.          timeout: 400
  43.        });    
  44.      });
  45.         </script>
  46.     </head>
  47.    
  48.     <body>
  49.         <br/>
  50.         <table border="1" width="400">
  51.             <tr>
  52.                 <th>
  53.                     Header 1
  54.                 </th>
  55.                 <th>
  56.                     Header 2
  57.                 </th>
  58.             </tr>
  59.             <tr>
  60.                 <td>
  61.                     <a class="show_div" href="#">Drink</a>
  62.                     <div class="hello" style="display:none;z-index:999;position: absolute;background-color:#99CC67;">
  63.                         <ul>
  64.                             <li>
  65.                                 Coffee
  66.                             </li>
  67.                             <li>
  68.                                 Tea
  69.                             </li>
  70.                             <li>
  71.                                 Milk
  72.                             </li>
  73.                         </ul>
  74.                     </div>
  75.                 </td>
  76.                 <td>
  77.                     <a class="show_div" href="#">Friuts</a>
  78.                     <div class="hello" style="display:none;z-index:999;position: absolute;background-color:#99CC67;">
  79.                         <ul>
  80.                             <li>
  81.                                 Banana
  82.                             </li>
  83.                             <li>
  84.                                 Water Melon
  85.                             </li>
  86.                             <li>
  87.                                 Lychee
  88.                             </li>
  89.                         </ul>
  90.                     </div>
  91.                 </td>
  92.             </tr>
  93.             <tr>
  94.                 <td>
  95.                     <a class="show_div" href="#">Movies</a>
  96.                     <div class="hello" style="display:none;z-index:999;position: absolute;background-color:#99CC67;">
  97.                         <ul>
  98.                             <li>
  99.                                 Avatar
  100.                             </li>
  101.                             <li>
  102.                                 Star War
  103.                             </li>
  104.                             <li>
  105.                                 Titanic
  106.                             </li>
  107.                         </ul>
  108.                     </div>
  109.                 </td>
  110.                 <td>
  111.                     <a class="show_div" href="#">Books</a>
  112.                     <div class="hello" style="display:none;z-index:999;position: absolute;background-color:#99CC67;">
  113.                         <ul>
  114.                             <li>
  115.                                 Novel
  116.                             </li>
  117.                             <li>
  118.                                 History
  119.                             </li>
  120.                             <li>
  121.                                 Design
  122.                             </li>
  123.                         </ul>
  124.                     </div>
  125.                 </td>
  126.             </tr>
  127.         </table>
  128.         <br/>
  129.     </body>
  130.  
  131. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!