jqueryui: JqueryUI Position

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI position</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .positionDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #ffffab;
         }
         #targetElement{
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>
      <script>
         $(function() {
            // Position the dialog offscreen to the left, but centered vertically
            $( "#position1" ).position({
               my: "center",
               at: "center",
               of: "#targetElement"
            });
            $( "#position2" ).position({
               my: "left top",
               at: "left top",
               of: "#targetElement"
            });
            $( "#position3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#targetElement"
            });
            $( document ).mousemove(function( event ) {
               $( "#position4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="targetElement">
         <div class="positionDiv" id="position1">move 1</div>
         <div class="positionDiv" id="position2">move 2</div>
         <div class="positionDiv" id="position3">move 3</div>
         <div class="positionDiv" id="position4">move 4</div>
      </div>
   </body>
</html>

Thursday, 26 February 2015

JqueryUI Position

No comments:

Post a Comment