jQuery UI Utility : Position

The position utility script is used for positioning any widget relative to the window, document, a particular element, or the cursor/mouse.

It do not need ui.core.js or effects.core.js.

EXAMPLE :

positionUiUtility.html

<!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.4/jquery.min.js">

            </script>

            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">

            </script>

            <style type="text/css">

            #targetElement { width:240px;height:200px;background-color:#999;margin:30px 
            auto;

             }

            .positionDiv { width:50px;height:50px;opacity:0.6; }

            #position1 {background-color:#F00;}

            #position2 {background-color:#0F0;}

            #position3 {background-color:#00F;}

            #position4 {background-color:#FF0;}

            </style>

            

            <script>

            $(document).ready(function() {

            

            $("#position1").position({

            my: "center",

            at: "center",

            of: "#targetElement"

            });

            $("#position2").position({

            my: "left top",

            at: "left top",

            of: "#targetElement"

            });

            $("#position3").position({

            my: "right center",

            at: "right bottom",

            of: "#targetElement"

            });

            $(document).mousemove(function(ev){

            $("#position4").position({

            my: "left bottom",

            of: ev,

            offset: "3 -3",

            collision: "fit"

            });

            });

            

            });

            </script>

            </head>

            <body style="font-size:62.5%;">

            

            <div id="targetElement">

            <div class="positionDiv" id="position1"></div>

            <div class="positionDiv" id="position2"></div>

            <div class="positionDiv" id="position3"></div>

            <div class="positionDiv" id="position4"></div>

            </div>

            

            </body>

            </html>

Output :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Related Tags for jQuery UI Utility : Position:

«Previous Index Next»