Want more features on Pastebin? Sign Up, it's FREE!
Guest

webtrh

By: a guest on Apr 18th, 2012  |  syntax: JavaScript  |  size: 1.15 KB  |  views: 33  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  5.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  6.   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  7.   <style type="text/css">
  8.     body{
  9.         margin: 0;
  10.         padding: 0;
  11.     }
  12.     #draggable {
  13.         width: 100%;
  14.         height: 400px;
  15.         background: lightgray;
  16.         border-bottom: 6px silver solid;
  17.         margin-top: -400px;
  18.     }
  19.   </style>
  20.   <script>
  21.   $(document).ready(function() {
  22.     var drag = $("#draggable");
  23.    
  24.     drag.draggable({ axis: "y" });
  25.    
  26.     drag.mouseup(function(){
  27.         var position = drag.position();
  28.        
  29.         if(position.top < 120){
  30.             drag.animate({
  31.                 marginTop: "-400px"
  32.             });
  33.         } else {
  34.             drag.animate({
  35.                 marginTop: "0px",
  36.                 top: "0px"
  37.             });
  38.         }
  39.     });
  40.  
  41.   });
  42.   </script>
  43. </head>
  44. <body>
  45.  
  46. <div id="draggable"></div>
  47.  
  48. </body>
  49. </html>
clone this paste RAW Paste Data