mellamokb
04-21-2006, 12:59 AM
Wow! I accidentally stumbled on something strange! When you embed elements inside of a textarea, they attain some strange properties. This can only be done via JavaScript, because if you write tags inside of textarea tags, the text is rendered inside the textarea box. However, with JavaScript, you can actually place real elements in a textarea. When you do so, you can suddenly resize buttons, inputs, labels, textareas, edit readonly inputs, and probably much more [I haven't explored very far]! It's really cool and weird!
Try this sample code out and see what I mean:
<html>
<head>
<title> COOL HTML EFFECTS </title>
</head>
<body>
<div style="background-color: blue; text-align: center; width: 100%; border: 2px solid black" id="div">
<table style="width: 100%">
<tr>
<td valign="center" align="right">
<script type="text/javascript">
<!--
for (var i = 0; i <= 20; i++)
{
document.writeln ("<input style='filter: alpha (opacity=" + (i * 5) + "); background-color: red; width: 10px; height: " + (10 + i * 2) + "; margin-bottom: " + (20 - i) + "' readonly='readonly'>");
}
-->
</script>
</td>
<td style="font-family: courier; font-size: 8px; border: 2px solid black; background-color: red; font-weight: bold; height: 50px; text-align: center">
<script type="text/javascript">
<!--
text = "COOL HTML EFFECTS";
result = "";
mb = 5;
for (var i = 0; i < text.length; i++)
{
if (text.substring(i, i+1) == " ")
{
result += ("<p style='display: inline; margin-bottom: " + mb + "px; height: 10px'> </p>");
}
else
{
result += ("<p style='display: inline; margin-bottom: " + mb + "px; height: 10px'>" + text.substring(i, i+1) + "</p>");
mb = 14 - mb;
}
}
document.writeln (result);
-->
</script>
</td>
<td valign="center" align="left">
<script type="text/javascript">
<!--
for (var i = 20; i >= 0; i--)
{
document.writeln ("<input style='filter: alpha (opacity=" + (i * 5) + "); background-color: red; width: 10px; height: " + (10 + i * 2) + "; margin-bottom: " + (20 - i) + "' readonly='readonly'>");
}
-->
</script>
</td>
</tr>
</table>
</div>
<button onclick="javascript: source();" name="bb">Edit Layout</button>
<script type="text/javascript">
<!--
textarea = document.createElement ('textarea');
textarea.name = "ta";
textarea.rows = 10;
textarea.cols = 100;
textarea.innerText = "SADASSDF";
div_child = div.childNodes [0];
function source ()
{
if (bb.innerText == "Edit Layout")
{
div.removeChild (div_child);
div.appendChild (textarea);
textarea.appendChild (div_child);
bb.innerText = "Reset Layout";
}
else
{
textarea.removeChild (div_child);
div.removeChild (textarea);
div.appendChild (div_child);
bb.innerText = "Edit Layout";
}
}
-->
</script>
</body>
</html>
If you click the "edit layout" button, everything inside the div is embedded into a textarea; then you can click on things, resize them, edit them, *delete* them, copy and paste, and so on. You can then click the button again ["reset layout"] to remove the textarea and place your changed HTML back into the div. You have suddenly edited the content of the page with almost no effort! Could this be used for some type of online WYSIWYG editor?
Is this a fluke, or is it something that is generally known [and I'm nieve], or what's going on here?
Thanks,
mellamokb
Try this sample code out and see what I mean:
<html>
<head>
<title> COOL HTML EFFECTS </title>
</head>
<body>
<div style="background-color: blue; text-align: center; width: 100%; border: 2px solid black" id="div">
<table style="width: 100%">
<tr>
<td valign="center" align="right">
<script type="text/javascript">
<!--
for (var i = 0; i <= 20; i++)
{
document.writeln ("<input style='filter: alpha (opacity=" + (i * 5) + "); background-color: red; width: 10px; height: " + (10 + i * 2) + "; margin-bottom: " + (20 - i) + "' readonly='readonly'>");
}
-->
</script>
</td>
<td style="font-family: courier; font-size: 8px; border: 2px solid black; background-color: red; font-weight: bold; height: 50px; text-align: center">
<script type="text/javascript">
<!--
text = "COOL HTML EFFECTS";
result = "";
mb = 5;
for (var i = 0; i < text.length; i++)
{
if (text.substring(i, i+1) == " ")
{
result += ("<p style='display: inline; margin-bottom: " + mb + "px; height: 10px'> </p>");
}
else
{
result += ("<p style='display: inline; margin-bottom: " + mb + "px; height: 10px'>" + text.substring(i, i+1) + "</p>");
mb = 14 - mb;
}
}
document.writeln (result);
-->
</script>
</td>
<td valign="center" align="left">
<script type="text/javascript">
<!--
for (var i = 20; i >= 0; i--)
{
document.writeln ("<input style='filter: alpha (opacity=" + (i * 5) + "); background-color: red; width: 10px; height: " + (10 + i * 2) + "; margin-bottom: " + (20 - i) + "' readonly='readonly'>");
}
-->
</script>
</td>
</tr>
</table>
</div>
<button onclick="javascript: source();" name="bb">Edit Layout</button>
<script type="text/javascript">
<!--
textarea = document.createElement ('textarea');
textarea.name = "ta";
textarea.rows = 10;
textarea.cols = 100;
textarea.innerText = "SADASSDF";
div_child = div.childNodes [0];
function source ()
{
if (bb.innerText == "Edit Layout")
{
div.removeChild (div_child);
div.appendChild (textarea);
textarea.appendChild (div_child);
bb.innerText = "Reset Layout";
}
else
{
textarea.removeChild (div_child);
div.removeChild (textarea);
div.appendChild (div_child);
bb.innerText = "Edit Layout";
}
}
-->
</script>
</body>
</html>
If you click the "edit layout" button, everything inside the div is embedded into a textarea; then you can click on things, resize them, edit them, *delete* them, copy and paste, and so on. You can then click the button again ["reset layout"] to remove the textarea and place your changed HTML back into the div. You have suddenly edited the content of the page with almost no effort! Could this be used for some type of online WYSIWYG editor?
Is this a fluke, or is it something that is generally known [and I'm nieve], or what's going on here?
Thanks,
mellamokb