Ticket #4951: jquery_resizable_aspect_and_maxwidth.html

File jquery_resizable_aspect_and_maxwidth.html, 1.2 KB (added by DEfusion, 10 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3<head>
4        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
5        <title>Test</title>
6        <link rel="stylesheet" href="http://static.jquery.com/ui/themes/base/ui.base.css" type="text/css" media="all" />
7        <style type="text/css">
8                body { background-color: #1a1a1a; color: #fff; }
9                .ui-resizable-se {
10                        background-color: red;
11                        cursor: se-resize;
12                }
13        </style>
14        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
15        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
16        <script type="text/javascript">
17                $(function() {
18                        $("#testImg").resizable({
19                                aspectRatio: true,
20                                maxWidth: 500
21                        });
22                       
23                        $("#testImg2").resizable({
24                                aspectRatio: true,
25                                maxHeight: 150
26                        });
27                });
28        </script>
29</head>
30<body>
31        <h4>Max Width</h4>
32        <img id="testImg" src="http://jqueryui.com/images/logo.gif" />
33       
34        <h4>Max Height</h4>
35        <img id="testImg2" src="http://jqueryui.com/images/logo.gif" />
36</body>
37</html>