corrade-http-templates – Rev 62

Subversion Repositories:
Rev:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Position Visual Test: Feedback</title>
        <link rel="stylesheet" href="../../../themes/base/all.css">
        <style>
        #target, .element {
                position: absolute;
                border: 1px solid black;
                border-radius: 5px;
                width: 75px;
                height: 25px;
                padding: 5px;
                font-size: 62.5%;
        }
        #target {
                height: 75px;
        }
        .element:before {
                font-size: 12pt;
                content: "↑";
                position: absolute;
                top: -19px;
                left: 5px;
        }
        .right:before {
                left: auto;
                right: 5px;
        }
        .bottom:before {
                content: "↓";
                top: auto;
                bottom: -19px;
        }
        .center:before {
                left: 50%;
                right: auto;
        }
        .middle:before {
                top: 50%;
                bottom: auto;
        }
        .horizontal:before {
                height: 10px;
                top: 50%;
                margin-top: -8px;
                bottom: auto;
                left: -18px;
                right: auto;
                content: "←";
        }
        .right.horizontal:before {
                left: auto;
                right: -18px;
                content: "→";
        }
        .bottom.horizontal:before {
                top: auto;
                bottom: 5px;
        }
        .top.horizontal:before {
                top: 5px;
        }
        </style>
        <script src="../../../external/requirejs/require.js"></script>
        <script src="../../../demos/bootstrap.js">
                function using( position, feedback ) {
                        $( this )
                                .css( position )
                                .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
                                .removeClass( "left right top bottom center middle vertical horizontal" )
                                .addClass( feedback.horizontal )
                                .addClass( feedback.vertical )
                                .addClass( feedback.important );
                }

                var element = $( ".element" ),
                        target = $( "#target" ).position({
                                my: "center",
                                at: "center",
                                of: window
                        }),
                        targetOffset = target.offset(),
                        oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
                        leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
                        rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );

                $.each([
                        "center top-100",
                        "right+25 top-50",
                        "right+75 top",
                        "right+75 center",
                        "right+75 bottom",
                        "right+25 bottom+50",
                        "center bottom+100",
                        "left-25 bottom+50",
                        "left-75 bottom",
                        "left-75 center",
                        "left-75 top",
                        "left-25 top-50"
                ], function( index, direction ) {
                        element.clone().insertAfter( target ).position({
                                my: "center",
                                at: direction,
                                of: target,
                                using: using
                        });
                });

                element.width( 150 );
                function positionWithOffset( horizontal, vertical ) {
                        return {
                                my: "left top",
                                at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
                                        "top" + (vertical < 0 ? vertical : "+" + vertical),
                                of: target,
                                using: using
                        };
                };
                $( document ).on( "mousemove", function( event ) {
                        element.position( positionWithOffset(
                                event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
                        oppositeElement.position( positionWithOffset(
                                -1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
                        leftElement.position( positionWithOffset(
                                -0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
                        rightElement.position( positionWithOffset(
                                0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
                });
        </script>
</head>
<body>

<div id="target">all around me</div>
<div class="element"></div>

</body>
</html>