Ticket #74: replaceElementOnClick.htm

File replaceElementOnClick.htm, 5.9 KB (added by judah@…, 15 years ago)

code to add or remove xinhaarea

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"http://www.w3.org/TR/html4/loose.dtd">
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
6<title>Replace Element on Click</title>
7<script language="JavaScript" type="text/JavaScript">
8var isIE = navigator.appName.indexOf("Microsoft") != -1;
9function createButtons() {
10        textareas = document.getElementsByTagName('textarea')
11
12        for (var i=0;i<textareas.length;i++) {
13                var button = document.createElement("input");
14                button.type = "button";
15                button.value = "Enable HTML Editor";
16                button.id = "hello"+i;
17                button.enableHTML = false;
18                button.textArea = textareas[i];
19               
20
21                taTop = textareas[i].offsetTop;
22                taLeft = textareas[i].offsetLeft;
23                taHeight = textareas[i].offsetHeight;
24                taWidth = textareas[i].offsetWidth;
25                //alert("height="+taHeight);
26                //alert("width="+taWidth);
27                //alert("offsetTop="+taTop);
28                //alert("offsetLeft="+taLeft);
29                button.style.top = taTop - taHeight*.25+2 + "px";
30                button.style.left = taLeft + "px";
31                button.style.height = "18px";//taHeight*.25 + "px";
32                //button.style.lineHeight = "8px";//taHeight*.25 + "px";
33                button.style.fontSize = "9px";//taHeight*.25+"px";
34                button.style.width = taWidth-1 + "px";
35                button.style.display = "block";
36                //button.style.position = "absolute";
37                button.onclick = function() {
38                        this.enabledHTML = !this.enabledHTML;
39                        if (this.enabledHTML) {
40                                this.value = "Disable HTML Editor";
41                                this.textArea.value = "I am an htmlarea";
42                        }
43                        else {
44                                this.value = "Enable HTML Editor";
45                                this.textArea.value = "I am an textarea";
46                        }
47                };
48        textareas[i].parentNode.insertBefore(button,textareas[i]);
49        }
50
51}
52function createCheckboxesAbs() {
53        textareas = document.getElementsByTagName('textarea');
54
55        for (var i=0;i<textareas.length;i++) {
56                var checkbox = document.createElement("input");
57                checkbox.checked = false;
58                checkbox.type = "checkbox";
59                checkbox.id = "box"+i;
60                checkbox.textArea = textareas[i];
61               
62                taTop = textareas[i].offsetTop;
63                taLeft = textareas[i].offsetLeft;
64                taHeight = textareas[i].offsetHeight;
65                taWidth = textareas[i].offsetWidth;
66                //alert("height="+taHeight);
67                //alert("width="+taWidth);
68                checkbox.onclick = function() {
69                        if (this.checked) {
70                                this.textArea.value = "I am an htmlarea";
71                        }
72                        else {
73                                this.textArea.value = "I am an textarea";
74                        }
75                }
76                var div = document.createElement("span");
77                var text = document.createTextNode('Enable HTMLArea ');
78                //alert("offsetTop="+taTop);
79                //alert("offsetLeft="+taLeft);
80                div.appendChild(text);
81                div.appendChild(checkbox);
82        textareas[i].parentNode.insertBefore(div,textareas[i]);
83                taTop = textareas[i].offsetTop;
84                taLeft = textareas[i].offsetLeft;
85                div.style.position = "absolute";
86                //div.style.left = taLeft + "px";// + taWidth*.25
87                div.style.width = taWidth*.99 + "px";//  * .75
88                div.style.border = "1px black solid";
89                div.style.align = "right";
90                div.style.textAlign = "right";
91                div.style.display = "block";
92                //alert("div.offsetHeight="+div.offsetHeight)
93                //alert("div.style.height="+div.style.height)
94                if (isIE) {
95                        div.style.top = taTop - div.offsetHeight*.25 + "px";// - taHeight*.25+2
96                }
97                else {
98                        div.style.top = taTop - div.offsetHeight + "px";// - taHeight*.25+2
99                }
100                div.align = "right";
101        }
102
103}
104function createCheckboxes() {
105        textareas = document.getElementsByTagName('textarea');
106
107        for (var i=0;i<textareas.length;i++) {
108                var checkbox = document.createElement("input");
109                checkbox.checked = false;
110                checkbox.type = "checkbox";
111                checkbox.id = "box"+i;
112                checkbox.textArea = textareas[i];
113               
114                taTop = textareas[i].offsetTop;
115                taLeft = textareas[i].offsetLeft;
116                taHeight = textareas[i].offsetHeight;
117                taWidth = textareas[i].offsetWidth;
118                //alert("height="+taHeight);
119                //alert("width="+taWidth);
120                //checkbox.style.display = "inline";
121                //checkbox.style.position = "absolute";
122                checkbox.onclick = function() {
123                        if (this.checked) {
124                                this.textArea.value = "I am an htmlarea";
125                        }
126                        else {
127                                this.textArea.value = "I am an textarea";
128                        }
129                }
130                var div = document.createElement("span");
131                var text = document.createTextNode('Enable HTMLArea ');
132                //alert("offsetTop="+taTop);
133                //alert("offsetLeft="+taLeft);
134                div.appendChild(text);
135                div.appendChild(checkbox);
136        textareas[i].parentNode.insertBefore(div,textareas[i]);
137                //div.style.position = "absolute";
138                div.style.left = taLeft+taWidth*.25 + "px";
139                div.style.width = taWidth-5 + "px";
140                div.style.border = "1px black solid";
141                div.style.align = "right";
142                div.style.textAlign = "right";
143                div.style.display = "block";
144                div.align = "right";
145        }
146
147}
148function createButton() {
149        var button = document.createElement("input");
150        button.type = "button";
151        button.value = "Hello Kitty1";
152        button.id = "hello0";
153        button.style.width = 120+"px";
154        button.style.height = 20 + "px";
155        document.body.appendChild(button);
156
157}
158</script>
159</head>
160
161<body onLoad="">
162<form name="form1" method="post" action="">
163  <p>Enable or Disable HTMLArea JavaScript Tests... <br>
164    </p>
165  <p>
166    <textarea name="textarea" cols="30"></textarea>
167  </p>
168  <p>
169    <script language="JavaScript" type="text/JavaScript"></script>
170</p>
171  <p>
172    <label for="textarea3" style="">Description Label:</label>
173     <br><textarea name="textarea3" cols="45" id="textarea3"></textarea>
174        </p>
175        <p>     
176          <input name="createCheckboxes2_btn" onClick="createCheckboxesAbs()" type="button" id="createCheckboxes2_btn" value="Create Absolute Checkboxes">
177          <input name="createCheckboxes_btn" onClick="createCheckboxes()" type="button" id="createCheckboxes_btn" value="Create Labeled Checkboxes">
178          <input name="createButtons_btn" onClick="createButtons()" type="button" id="createButtons_btn" value="Create Buttons">
179    <br>
180    <br>
181  <em>Reload the page for each test.</em>  </p>
182</form>
183</body>
184</html>