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> |
---|