jQuery UI & Utilities: Position

This entry is part 1 of 3 in the series jQuery UI Utilities

jQuery UI Position – Default functionality

Use the form controls to configure the positioning, or drag the positioned element to modify its offset. 
Drag around the parent element to see collision detection in action.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Position - Default functionality</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #parent {
            width: 60%;
            height: 40px;
            margin: 10px auto;
            padding: 5px;
            border: 1px solid #777;
            background-color: #fbca93;
            text-align: center;
        }

        .positionable {
            position: absolute;
            display: block;
            right: 0;
            bottom: 0;
            background-color: #bcd5e6;
            text-align: center;
        }

        #positionable1 {
            width: 75px;
            height: 75px;
        }

        #positionable2 {
            width: 120px;
            height: 40px;
        }

        select, input {
            margin-left: 15px;
        }
    </style>
    <script>
        $(function () {
            function position() {
                $('.positionable').position({
                    of: $('#parent'),
                    my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
                    at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(),
                    collision: $('#collision_horizontal').val() + ' ' + $('#collision_vertical').val()
                });
            }

            $('.positionable').css('opacity', 0.5);

            $('select, input').bind('click keyup change', position);

            $('#parent').draggable({
                drag: position
            });

            position();
        });
    </script>
</head>
<body>

<div id='parent'>
    <p>
        This is the position parent element.
    </p>
</div>

<div class='positionable' id='positionable1'>
    <p>
        to position
    </p>
</div>

<div class='positionable' id='positionable2'>
    <p>
        to position 2
    </p>
</div>

<div style='padding: 20px; margin-top: 75px;'>
    position...
    <div style='padding-bottom: 20px;'>
        <b>my:</b>
        <select id='my_horizontal'>
            <option value='left'>left</option>
            <option value='center'>center</option>
            <option value='right'>right</option>
        </select>
        <select id='my_vertical'>
            <option value='top'>top</option>
            <option value='center'>center</option>
            <option value='bottom'>bottom</option>
        </select>
    </div>
    <div style='padding-bottom: 20px;'>
        <b>at:</b>
        <select id='at_horizontal'>
            <option value='left'>left</option>
            <option value='center'>center</option>
            <option value='right'>right</option>
        </select>
        <select id='at_vertical'>
            <option value='top'>top</option>
            <option value='center'>center</option>
            <option value='bottom'>bottom</option>
        </select>
    </div>
    <div style='padding-bottom: 20px;'>
        <b>collision:</b>
        <select id='collision_horizontal'>
            <option value='flip'>flip</option>
            <option value='fit'>fit</option>
            <option value='flipfit'>flipfit</option>
            <option value='none'>none</option>
        </select>
        <select id='collision_vertical'>
            <option value='flip'>flip</option>
            <option value='fit'>fit</option>
            <option value='flipfit'>flipfit</option>
            <option value='none'>none</option>
        </select>
    </div>
</div>

</body>
</html>
Try The Code
Series Navigation
jQuery UI & Utilities: Color changing >>

Leave a comment

Leave a Reply