Ticket #8846: magic_box.html

File magic_box.html, 1.5 KB (added by Frederico Caldeira Knabben, 8 years ago)

Rough sample illustrating the idea

Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <title></title>
5        <style type="text/css">
6                .magic_box
7                {
8                        border: 2px dashed #fff;
9                        height: 1px;
10                        margin: 0;
11                        padding: 0;
12                        overflow: hidden;
13                        font-style: italic;
14                        color: #bbb;
15                        cursor: default;
16                }
17        </style>
18        <script>
19
20window.onload = function()
21{
22        var paras = document.getElementsByTagName( 'p' );
23
24        for ( var i = 0 ; i < paras.length ; i++ )
25        {
26                var para = paras[ i ];
27
28                para.onmouseover = function()
29                        {
30                                this.style.borderColor = '#bbb';
31                                this.style.height = 'auto';
32                                this.style.padding = '1em 10px';
33                        };
34
35                para.onmouseout = function()
36                        {
37                                this.style.borderColor = '#fff';
38                                this.style.height = '1px';
39                                this.style.padding = '0';
40                        };
41        }
42};
43       
44        </script>
45</head>
46<body>
47        <p class="magic_box">Click to type here (hold SHIFT to hide this box)</p>
48        <hr />
49        <p class="magic_box">Click to type here (hold SHIFT to hide this box)</p>
50        <hr />
51        <p class="magic_box">Click to type here (hold SHIFT to hide this box)</p>
52        <table border="1">
53                <tr>
54                        <td>
55                                Table Cell 1
56                        </td>
57                </tr>
58                <tr>
59                        <td>
60                                Table Cell 2
61                        </td>
62                </tr>
63        </table>
64        <p class="magic_box">Click to type here (hold SHIFT to hide this box)</p>
65        <table border="1">
66                <tr>
67                        <td>
68                                Table Cell 1
69                        </td>
70                </tr>
71                <tr>
72                        <td>
73                                Table Cell 2
74                        </td>
75                </tr>
76        </table>
77        <p class="magic_box">Click to type here (hold SHIFT to hide this box)</p>
78</body>
79</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy