| [ Index ] |
PHP Cross Reference of Drupal 6 (gatewave) |
[Summary view] [Print] [Text view]
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <title>jQuery UI Draggable - Auto-scroll</title> 5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> 6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script> 7 <script type="text/javascript" src="../../ui/ui.core.js"></script> 8 <script type="text/javascript" src="../../ui/ui.draggable.js"></script> 9 <link type="text/css" href="../demos.css" rel="stylesheet" /> 10 <style type="text/css"> 11 #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } 12 </style> 13 <script type="text/javascript"> 14 $(function() { 15 $("#draggable").draggable({ scroll: true }); 16 $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 }); 17 $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 }); 18 }); 19 </script> 20 </head> 21 <body> 22 <div class="demo"> 23 24 <div id="draggable" class="ui-widget-content"> 25 <p>Scroll set to true, default settings</p> 26 </div> 27 28 <div id="draggable2" class="ui-widget-content"> 29 <p>scrollSensitivity set to 100</p> 30 </div> 31 32 <div id="draggable3" class="ui-widget-content"> 33 <p>scrollSpeed set to 100</p> 34 </div> 35 36 <div style='height: 5000px; width: 1px;'></div> 37 38 </div><!-- End demo --> 39 40 <div class="demo-description"> 41 42 <p> 43 Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options. 44 </p> 45 46 </div><!-- End demo-description --> 47 </body> 48 </html>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Thu Mar 24 11:18:33 2011 | Cross-referenced by PHPXref 0.7 |