Ticket #4686: quirks.html

File quirks.html, 3.3 KB (added by jgentle, 10 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<html>
3<head>
4        <title>Quirks Mode</title>
5        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
6        <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script-->
7        <script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
8        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" type="text/css" />
9        <script type="text/javascript" language="javascript">
10                $(function() {
11                        var dialog = $('#dialog');
12                        var info = function()
13                        {
14                                $('#info')
15                                        .append("Dialog option height: "+dialog.dialog('option', 'height'))
16                                        .append("<br/>")
17                                        .append("Dialog actual height: "+dialog.parent().height())
18                                        .append("<br/>")
19                        };
20                        dialog.dialog({
21                                width: "350",
22                                height: "450",
23                                minHeight: "50",
24                                autoResize: false,
25                                modal: true,
26                                dragStop: info,
27                                resizeStop: info,
28                                buttons: {
29                                        Cancel: function() {
30                                                $(this).dialog('close');
31                                        }
32                                }
33                        });
34                        $('#open').click(function() {
35                                dialog
36                                        .append("<br/>"+Math.random())
37                                        .dialog('option', "height", "400")
38                                        .dialog("open")
39                                info();
40                                return false;
41                        });
42
43                        var _size = function() {
44                /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
45                 * divs will both have width and height set, so we need to reset them
46                 */
47                var options = this.options;
48
49                // reset content sizing
50                this.element.css({
51                        height: "1px",
52                        minHeight: "1px",
53                        width: 'auto'
54                });
55
56                // reset wrapper sizing
57                // determine the height of all the non-content elements
58                var nonContentHeight = this.uiDialog.css({
59                                height: 'auto',
60                                width: options.width
61                        })
62                        .height() - 1;
63
64                this.element.css(options.height == 'auto'
65                        ? {
66                                minHeight: Math.max(options.minHeight - nonContentHeight, 0),
67                                height: 'auto'
68                        }
69                        : {
70                                height: Math.max(options.height - nonContentHeight, 0)
71                        });
72
73                (this.uiDialog.is(':data(resizable)') &&
74                        this.uiDialog.resizable('option', 'minHeight', this._minHeight()));
75        }
76
77                        $('#fix').click(function() {
78                                $.ui.dialog.prototype._size = _size;
79                                $('#open').click();
80                        });
81                        info();
82                });
83        </script>
84</head>
85<body>
86        <a id="open" href="#">open</a>
87        <br/>
88        <a id="fix" href="#">fix</a>
89        <div id="dialog">
90        <label for="title" style="font-weight: bold;">Title</label>
91        <br/>
92        <input id="title" class="full-width-text ui-widget-content ui-corner-all" type="text" name="title" maxlength="255" style="width: 100%;"/>
93        <br/>
94        <br/>
95        <label for="duration" style="font-weight: bold;">Data</label>
96        <input id="title" class="full-width-text ui-widget-content ui-corner-all" type="text" name="title" maxlength="255" style="width: 100%;"/>
97        </div>
98        <div>
99        </div>
100
101        <div id="info"></div>
102</body>