root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/resizable/aspect-ratio.html @ 26899

Revision 26899, 1.2 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <title>jQuery UI Resizable - Preserve aspect ratio</title>
6    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7    <script src="../../jquery-1.6.2.js"></script>
8    <script src="../../ui/jquery.ui.core.js"></script>
9    <script src="../../ui/jquery.ui.widget.js"></script>
10    <script src="../../ui/jquery.ui.mouse.js"></script>
11    <script src="../../ui/jquery.ui.resizable.js"></script>
12    <link rel="stylesheet" href="../demos.css">
13    <style>
14    #resizable { width: 160px; height: 90px; padding: 0.5em; }
15    #resizable h3 { text-align: center; margin: 0; }
16    </style>
17    <script>
18    $(function() {
19        $( "#resizable" ).resizable({
20            aspectRatio: 16 / 9
21        });
22    });
23    </script>
24</head>
25<body>
26
27<div class="demo">
28   
29<div id="resizable" class="ui-widget-content">
30    <h3 class="ui-widget-header">Preserve aspect ratio</h3>
31</div>
32
33</div><!-- End demo -->
34
35
36
37<div class="demo-description">
38<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p>
39</div><!-- End demo-description -->
40
41</body>
42</html>
Note: See TracBrowser for help on using the browser.