diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2012-09-10 11:33:46 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2012-09-10 11:33:46 -0400 |
| commit | 303f20e1b3c977d75047bed1a3533a180d73fab5 (patch) | |
| tree | c8cf97b57f2493313dfd92c1dfceedb29d137d67 /demos/position | |
| parent | 9e259c6e5369bf272dd14df7aea1372c5b064300 (diff) | |
| download | jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.tar.gz jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.zip | |
Demos: Cleanup.
Diffstat (limited to 'demos/position')
| -rw-r--r-- | demos/position/cycler.html | 62 | ||||
| -rw-r--r-- | demos/position/default.html | 11 | ||||
| -rw-r--r-- | demos/position/index.html | 14 |
3 files changed, 36 insertions, 51 deletions
diff --git a/demos/position/cycler.html b/demos/position/cycler.html index 16542b962..241dae9a0 100644 --- a/demos/position/cycler.html +++ b/demos/position/cycler.html @@ -9,6 +9,17 @@ <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <link rel="stylesheet" href="../demos.css"> + <style> + #container { + overflow: hidden; + position: relative; + height: 400px; + } + + img { + position: absolute; + } + </style> <script> $(function() { // TODO refactor into a widget and get rid of these plugin methods @@ -16,7 +27,7 @@ return this.position({ my: "right middle", at: "left+25 middle", - of: window, + of: "#container", collision: "none", using: using }); @@ -25,7 +36,7 @@ return this.position({ my: "left middle", at: "right-25 middle", - of: window, + of: "#container", collision: "none", using: using }); @@ -34,21 +45,11 @@ return this.position({ my: "center middle", at: "center middle", - of: window, + of: "#container", using: using }); }; - $( "body" ).css({ - overflow: "hidden" - }) - $( ".demo" ).css({ - position: "relative", - }); - $( ".demo img" ).css({ - position: "absolute", - }); - $( "img:eq(0)" ).left(); $( "img:eq(1)" ).center(); $( "img:eq(2)" ).right(); @@ -60,19 +61,19 @@ event.preventDefault(); $( "img:eq(2)" ).center( animate ); $( "img:eq(1)" ).left( animate ) - $( "img:eq(0)" ).right().appendTo( ".demo" ); + $( "img:eq(0)" ).right().appendTo( "#container" ); } function previous( event ) { event.preventDefault(); $( "img:eq(0)" ).center( animate ); $( "img:eq(1)" ).right( animate ); - $( "img:eq(2)" ).left().prependTo( ".demo" ); + $( "img:eq(2)" ).left().prependTo( "#container" ); } $( "#previous" ).click( previous ); $( "#next" ).click( next ); - $( ".demo img" ).click(function( event ) { - $( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event ); + $( "img" ).click(function( event ) { + $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); }); $( window ).resize(function() { @@ -85,25 +86,20 @@ </head> <body> -<div class="demo"> - -<img src="images/earth.jpg" width="458" height="308" alt="earth" /> -<img src="images/flight.jpg" width="512" height="307" alt="flight" /> -<img src="images/rocket.jpg" width="300" height="353" alt="rocket" /> - -<a id="previous" href="#">Previous</a> -<a id="next" href="#">Next</a> - -</div><!-- End demo --> - +<div id="container"> + <img src="images/earth.jpg" width="458" height="308" alt="earth"> + <img src="images/flight.jpg" width="512" height="307" alt="flight"> + <img src="images/rocket.jpg" width="300" height="353" alt="rocket"> + <a id="previous" href="#">Previous</a> + <a id="next" href="#">Next</a> +</div> <div class="demo-description"> <p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them. -<br/>Use the links at the top to cycle, or click on the images on the left and right. -<br/>Note how the images are repositioned when resizing the window. -<br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p> -</div><!-- End demo-description --> - +<br>Use the links at the top to cycle, or click on the images on the left and right. +<br>Note how the images are repositioned when resizing the window. +<br>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p> +</div> </body> </html> diff --git a/demos/position/default.html b/demos/position/default.html index 7c15c8037..b4af06e31 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -67,8 +67,6 @@ </head> <body> -<div class="demo"> - <div id="parent"> <p> This is the position parent element. @@ -136,14 +134,9 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset. -<br/>Drag around the parent element to see collision detection in action.</p> -</div><!-- End demo-description --> - +<br>Drag around the parent element to see collision detection in action.</p> +</div> </body> </html> diff --git a/demos/position/index.html b/demos/position/index.html index 498c09b2b..a7b754876 100644 --- a/demos/position/index.html +++ b/demos/position/index.html @@ -1,19 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Position Demo</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="cycler.html">Cycling images</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="cycler.html">Cycling images</a></li> +</ul> </body> </html> |