Bug Tracker

Ticket #6199: slide_test.html

File slide_test.html, 3.1 KB (added by fidian, 9 years ago)

My test file, probably bigger than necessary a bit

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">
3<head> 
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
5
6<style type="text/css">
7
8.monitor {
9        margin-left: 20em;
10}
11
12#helpBtn {
13        display: inline-block;
14        width: 76px;
15        height: 19px;
16        background-color: red;
17}
18
19#helpBtn.helpHideBtn {
20        background-color: blue;
21}
22
23#helpContainer {
24        position:absolute;
25        background-color: green;
26}
27
28</style>
29</head> 
30<body> 
31<a href="#" id="helpBtn" title="Help"></a> 
32<div id="helpContainer" style="display: none"> 
33        <p>Blah blah blah</p>
34        <p>Blah blah blah</p>
35        <p>Blah blah blah</p>
36        <p>Blah blah blah</p>
37</div> 
38<p>Trigger:</p>
39<div id=monitorTrigger class=monitor></div>
40<p>Container:</p>
41<div id=monitorContainer class=monitor></div>
42<p><a id=fix1 href="#">Fix 1 - change link to display: block</a>,
43<a id=fix2 href="#">Fix 2 - add text to link</a>,
44<a id=fix3 href="#">Fix 3 - wrap in an empty span</a>,
45<a id=fix4 href="#">Fix 4 - add comment before</a>
46</p>
47<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
48<script type="text/javascript" language="Javascript">
49
50$(function() {
51        $('#helpBtn').click(function() {
52                var b = $('#helpBtn');
53
54                if (b.hasClass('helpHideBtn')) {
55                        $('#helpContainer').slideUp('slow');
56                } else {
57                        $('#helpContainer').slideDown('slow');
58                }
59
60                b.toggleClass('helpHideBtn');
61
62                return false;
63        });
64        var updateMonitors = function() {
65                var updateMonitor = function (inquire, monitor) {
66                        var inq = $(inquire);
67                        var mon = $(monitor);
68                        var out = 'width/height ' + inq.width() + " x " + inq.height();
69                        out += " (offset " + inq[0].offsetWidth + " x " + inq[0].offsetHeight + ")<br>";
70                        out += "css(display): " + inq.css('display') + " (style.display: " + inq[0].style.display + ")<br>";
71                        out += "attributes:";
72                        if (inq.is(':hidden')) {
73                                out += " hidden";
74                        } else {
75                                out += " visible";
76                        }
77                        if (inq.prev().length) {
78                                out += " prev=";
79                                out += inq.prev()[0].nodeName;
80                        }
81                        if (inq.next().length) {
82                                out += " next=";
83                                out += inq.next()[0].nodeName;
84                        }
85                        if (inq[0].previousSibling) {
86                                out += " previousSibling=" + inq[0].previousSibling.nodeName;
87                        }
88                        if (inq[0].nextSibling) {
89                                out += " nextSibling=" + inq[0].nextSibling.nodeName;
90                        }
91                        out += "<br>";
92                        mon.html(out);
93                }
94                updateMonitor('#helpBtn', '#monitorTrigger');
95                updateMonitor('#helpContainer', '#monitorContainer');
96        }
97
98        window.setInterval(updateMonitors, 1);
99
100        $('#fix1').click(function () {
101                $('#helpBtn').css('display', 'block');
102        });
103        $('#fix2').click(function () {
104                var button = $('#helpBtn');
105                // button.html('asdf');  // Unfortunately, this does not work
106                var copy = button.clone(true);
107                copy.html('x').insertAfter(button);
108                button.remove();
109        });
110        $('#fix3').click(function () {
111                var container = $('#helpContainer');
112                $('<span />').insertAfter(container).append(container.detach());
113        });
114        $('#fix4').click(function () {
115                $('#helpContainer').before('<!-- -->');
116        });
117});
118
119</script>
120</body> 
121</html>