corrade-http-templates – Blame information for rev 62

Subversion Repositories:
Rev:
Rev Author Line No. Line
62 office 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Position Visual Test</title>
6 <style>
7 .demo {
8 position: relative;
9 height: 500px;
10 width: 80%;
11 margin: 20px auto;
12 background: #eee;
13 }
14 #target {
15 width: 60%;
16 margin: 0 auto;
17 border: 1px solid #777;
18 background-color: #fbca93;
19 text-align: center;
20 cursor: move;
21 }
22 .positionable {
23 position: absolute;
24 background-color: #bcd5e6;
25 text-align: center;
26 }
27 .extra-margin {
28 margin: 0 15px 15px 0;
29 }
30 </style>
31 <script src="../../../external/requirejs/require.js"></script>
32 <script src="../../../demos/bootstrap.js" data-modules="draggable">
33 var within = $( ".demo" ),
34 positionable = $( ".positionable" );
35 function position() {
36 positionable.position({
37 of: $( "#target" ),
38 my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
39 at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
40 within: within,
41 collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
42 });
43 }
44  
45 positionable.css( "opacity", 0.5 );
46  
47 $( "#target" ).draggable({
48 drag: function() { position(); }
49 });
50  
51 $( "#within" ).on( "click", function() {
52 within = within.is( ".demo" ) ? $( window ) : $( ".demo" );
53 position();
54 });
55  
56 $( "#margin" ).on( "click", function() {
57 positionable.toggleClass( "extra-margin" );
58 position();
59 });
60  
61 $( "select, input" ).on( "click keyup change", function() { position(); } );
62  
63 position();
64 </script>
65 </head>
66 <body>
67  
68 <div class="demo">
69 <div id="target">
70 <p>This is the position target element.</p>
71 </div>
72  
73 <div class="positionable" style="width: 75px; height: 75px;">
74 <p>to position</p>
75 </div>
76  
77 <div class="positionable" style="width:120px; height: 40px;">
78 <p>to position 2</p>
79 </div>
80  
81 <form style="padding: 20px; margin-top: 75px;">
82 <h2>Position configuration:</h2>
83 <div style="padding-bottom: 20px;">
84 <b>my:</b>
85 <select id="my_horizontal">
86 <option value="left">left</option>
87 <option value="center">center</option>
88 <option value="right" selected="selected">right</option>
89 </select>
90 <select id="my_vertical">
91 <option value="top">top</option>
92 <option value="middle">center</option>
93 <option value="bottom">bottom</option>
94 </select>
95 </div>
96 <div style="padding-bottom: 20px;">
97 <b>at:</b>
98 <select id="at_horizontal">
99 <option value="left">left</option>
100 <option value="center">center</option>
101 <option value="right" selected="selected">right</option>
102 </select>
103 <select id="at_vertical">
104 <option value="top">top</option>
105 <option value="middle">center</option>
106 <option value="bottom">bottom</option>
107 </select>
108 </div>
109 <div style="padding-bottom: 20px;">
110 <b>collision:</b>
111 <select id="collision_horizontal">
112 <option value="flip">flip</option>
113 <option value="fit">fit</option>
114 <option value="flipfit">flipfit</option>
115 <option value="none">none</option>
116 </select>
117 <select id="collision_vertical">
118 <option value="flip">flip</option>
119 <option value="fit">fit</option>
120 <option value="flipfit">flipfit</option>
121 <option value="none">none</option>
122 </select>
123 </div>
124 <div>
125 <label for="within">within:</label>
126 <input id="within" type="checkbox" checked="checked">
127 </div>
128 <div>
129 <label for="margin">extra margin:</label>
130 <input id="margin" type="checkbox">
131 </div>
132 </form>
133 </div>
134  
135 </body>
136 </html>