| OLD | NEW |
| (Empty) |
| 1 <script> | |
| 2 function toggleDisplay(element, button) | |
| 3 { | |
| 4 if (element.style.display == "none") | |
| 5 element.style.display = ""; | |
| 6 else | |
| 7 element.style.display = "none"; | |
| 8 } | |
| 9 | |
| 10 function toggleVisibility(element, button) | |
| 11 { | |
| 12 if (element.style.visibility == "hidden") | |
| 13 element.style.visibility = ""; | |
| 14 else | |
| 15 element.style.visibility = "hidden"; | |
| 16 } | |
| 17 | |
| 18 </script> | |
| 19 <p> | |
| 20 Play with the display and visibility toggles. Make sure that turning an inne
r element visible does not show it if it has a hidden or | |
| 21 non-displaying ancestor, and that making an ancestor visible and displayi
ng shows only its descendants the are visible and displaying. | |
| 22 </p> | |
| 23 <table> | |
| 24 <tr> | |
| 25 <td> | |
| 26 <input type="checkbox" checked="true" onclick="toggleDisplay(documen
t.getElementById('middle'))"> Outer frame display | |
| 27 </td> | |
| 28 <td> | |
| 29 <input type="checkbox" checked="true" onclick="toggleDisplay(documen
t.getElementById('middle').contentDocument.getElementById('inner'))"> Inner fram
e display | |
| 30 </td> | |
| 31 </tr> | |
| 32 <tr> | |
| 33 <td> | |
| 34 <input type="checkbox" checked="true" onclick="toggleVisibility(docu
ment.getElementById('middle'))"> Outer frame visibility | |
| 35 </td> | |
| 36 <td> | |
| 37 <input type="checkbox" checked="true" onclick="toggleVisibility(docu
ment.getElementById('middle').contentDocument.getElementById('inner'))"> Inner f
rame visibility | |
| 38 </td> | |
| 39 <td> | |
| 40 <input type="checkbox" checked="true" onclick="toggleVisibility(docu
ment.getElementById('middle').contentDocument.getElementById('inner').contentDoc
ument.getElementById('plugin'))"> Inner plug-in visibility | |
| 41 </td> | |
| 42 </tr> | |
| 43 </table> | |
| 44 | |
| 45 <iframe id="middle" style="height: 400px; width: 400px;" src="resources/nested-p
lug-ins-outer-frame.html"></iframe> | |
| OLD | NEW |