Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
- <style type="text/css">
- body{
- margin: 0;
- padding: 0;
- }
- #draggable {
- width: 100%;
- height: 400px;
- background: lightgray;
- border-bottom: 6px silver solid;
- margin-top: -400px;
- }
- </style>
- <script>
- $(document).ready(function() {
- var drag = $("#draggable");
- drag.draggable({ axis: "y" });
- drag.mouseup(function(){
- var position = drag.position();
- if(position.top < 120){
- drag.animate({
- marginTop: "-400px"
- });
- } else {
- drag.animate({
- marginTop: "0px",
- top: "0px"
- });
- }
- });
- });
- </script>
- </head>
- <body>
- <div id="draggable"></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement