Torne (Richard Coles) | 5c87bf8 | 2012-11-14 11:46:17 +0000 | [diff] [blame] | 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 inner element visible does not show it if it has a hidden or |
| 21 | non-displaying ancestor, and that making an ancestor visible and displaying 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(document.getElementById('middle'))"> Outer frame display |
| 27 | </td> |
| 28 | <td> |
| 29 | <input type="checkbox" checked="true" onclick="toggleDisplay(document.getElementById('middle').contentDocument.getElementById('inner'))"> Inner frame display |
| 30 | </td> |
| 31 | </tr> |
| 32 | <tr> |
| 33 | <td> |
| 34 | <input type="checkbox" checked="true" onclick="toggleVisibility(document.getElementById('middle'))"> Outer frame visibility |
| 35 | </td> |
| 36 | <td> |
| 37 | <input type="checkbox" checked="true" onclick="toggleVisibility(document.getElementById('middle').contentDocument.getElementById('inner'))"> Inner frame visibility |
| 38 | </td> |
| 39 | <td> |
| 40 | <input type="checkbox" checked="true" onclick="toggleVisibility(document.getElementById('middle').contentDocument.getElementById('inner').contentDocument.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-plug-ins-outer-frame.html"></iframe> |