Advanced Search

Sample Webpage consuming the mouseover events firehose jQuery UI widget

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>Firehose</title>
  5. </head>
  6. <body>
  7.     <header>
  8.         <div id="title">
  9.             <h1>Firehose</h1>
  10.         </div>
  11.     </header>
  12.     <section id="main">
  13. 		<div id="test"></div>
  14. 		<div id="test2"></div>
  15.     </section>
  16.  
  17.     <!-- Retreive  the JavaScript files we are dependent on from a Content Delivery Network (CDN) where possible -->
  18.     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.3.min.js" type="text/javascript"></script>
  19.     <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
  20.     <script src="Scripts/rx.js" type="text/javascript"></script>
  21.     <script src="Scripts/rx.jQuery.js" type="text/javascript"></script>
  22.     <script src="Scripts/firehose.js" type="text/javascript"></script>
  23.  
  24.     <script type="text/javascript">
  25.     // Attach the "firehose" widget to the "test" div above:
  26.     $("#test").firehose();
  27.  
  28.     // Without creating a new firehose widget, we can make another element (the "test2" div) 
  29.     // subscribe directly to the other element's observable by accessing it through the "options" property:
  30.     $("#test").firehose("option", "firehose").Subscribe(function (eventData)  	{
  31.         $("#test2").text(eventData.offsetX + "," + eventData.offsetY);
  32.     });
  33.     </script>
  34. </body>
  35. </html>

URL: http://www.sage.co.uk/devblog

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.