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