dog78
asked on
TextBox Input on the Active Desktop
<textarea name="textbox" rows="43" cols="71" wrap="virtual" contenteditable="TRUE">
</textarea>
When I use this inside an HTML file as a desktop background, the TextBox is drawn, but it is not possible to click inside and enter text. How can I allow for text input on the desktop with a textbox or other large input area?
</textarea>
When I use this inside an HTML file as a desktop background, the TextBox is drawn, but it is not possible to click inside and enter text. How can I allow for text input on the desktop with a textbox or other large input area?
Depending on where you place the Desktop Component you should be able to use it. Make sure that you don't have any Icons over the file.
ASKER
My textbox is placed in the center of the screen. It seems as though the "desktop" is layered on top of the textbox, since I'm able to draw a "lasso" with the mouse. Here's the complete code. I'm using a resolution of 1024x768.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Wallpaper</title>
<style type="text/css">
#menu { position: absolute; top: 30px; left: 830px; z-index: 5; display : none }
#target { position: absolute; top: 10px; left:830px; z-index: 10; display: block }
#notes { position: absolute; top: 10px; left: 240px; z-index: -1; display: none }
a:link {color:black; text-decoration:none }
a:hover {color:blue; text-decoration:none }
table
{
background-color: black;
border-width: 0px;
border-color: black;
}
th
{
color: #66CCCC;
font-family: Verdana;
}
td
{
color: #66CCCC;
font-family: Verdana;
}
textarea
{
color: #333333;
background-color: black;
border-style: none;
}
body
{
background-color: black;
color: black;
}
</style>
</head>
<body>
<span id="notes">
<textarea name="textbox" rows="43" cols="71" wrap="virtual" contenteditable="TRUE">
</textarea>
</span>
<span id="target" onMouseOver="document.all.
######################
</span>
<span id="menu">
<TABLE BORDER="0">
<TR>
<TD VALIGN="top" WIDTH="200">
<table border=0 cellpadding=5 cellspacing=0>
<tr>
<td>222</td><td>Anderson</
</tr>
<tr>
<td>144</td><td>Barry</td>
</tr>
<tr>
<td>150</td><td>Charlie</t
</tr>
<tr>
<td>145</td><td>Consultant
</tr>
<tr>
<td>138</td><td>Debbie H.</td>
</tr>
<tr>
<td>122</td><td>Debbie L.</td>
</tr>
<tr>
<td>136</td><td>Jere</td>
</tr>
<tr>
<td>140</td><td>John</td>
</tr>
<tr>
<td>139</td><td>Kay</td>
</tr>
<tr>
<td>133</td><td>Ken</td>
</tr>
<tr>
<td>137</td><td>Pam</td>
</tr>
<tr>
<td>126</td><td>Richard</t
</tr>
<tr>
<td>127</td><td>Tom G.</td>
</tr>
<tr>
<td>156</td><td>Conference
</tr>
<tr>
<td>155</td><td>Back Door</td>
</tr>
</table>
</td>
</tr>
</table>
</span>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Wallpaper</title>
<style type="text/css">
#menu { position: absolute; top: 30px; left: 830px; z-index: 5; display : none }
#target { position: absolute; top: 10px; left:830px; z-index: 10; display: block }
#notes { position: absolute; top: 10px; left: 240px; z-index: -1; display: none }
a:link {color:black; text-decoration:none }
a:hover {color:blue; text-decoration:none }
table
{
background-color: black;
border-width: 0px;
border-color: black;
}
th
{
color: #66CCCC;
font-family: Verdana;
}
td
{
color: #66CCCC;
font-family: Verdana;
}
textarea
{
color: #333333;
background-color: black;
border-style: none;
}
body
{
background-color: black;
color: black;
}
</style>
</head>
<body>
<span id="notes">
<textarea name="textbox" rows="43" cols="71" wrap="virtual" contenteditable="TRUE">
</textarea>
</span>
<span id="target" onMouseOver="document.all.
######################
</span>
<span id="menu">
<TABLE BORDER="0">
<TR>
<TD VALIGN="top" WIDTH="200">
<table border=0 cellpadding=5 cellspacing=0>
<tr>
<td>222</td><td>Anderson</
</tr>
<tr>
<td>144</td><td>Barry</td>
</tr>
<tr>
<td>150</td><td>Charlie</t
</tr>
<tr>
<td>145</td><td>Consultant
</tr>
<tr>
<td>138</td><td>Debbie H.</td>
</tr>
<tr>
<td>122</td><td>Debbie L.</td>
</tr>
<tr>
<td>136</td><td>Jere</td>
</tr>
<tr>
<td>140</td><td>John</td>
</tr>
<tr>
<td>139</td><td>Kay</td>
</tr>
<tr>
<td>133</td><td>Ken</td>
</tr>
<tr>
<td>137</td><td>Pam</td>
</tr>
<tr>
<td>126</td><td>Richard</t
</tr>
<tr>
<td>127</td><td>Tom G.</td>
</tr>
<tr>
<td>156</td><td>Conference
</tr>
<tr>
<td>155</td><td>Back Door</td>
</tr>
</table>
</td>
</tr>
</table>
</span>
</body>
</html>
ASKER
I've also tried Z-indexes -1, 11, and 100. Neither seems to allow interaction with the textbox. Interestingly enough, an <INPUT type="text"> will respond correctly.
The desktop is actually ontop of the textbox.
On your desktop you have 3 layers. You can't do anything to adjust these layers either.
They are:
Background Layer (where your html page is)
Icon Layer
Application Layer
When the ActiveDesktop is envoked then you have 4 layers.
The 4th layer is the active desktop which is inbetween the background layer and icon layer.
What I would try to do is make your page a Desktop component and add it to your desktop that way rather than as your background.
On your desktop you have 3 layers. You can't do anything to adjust these layers either.
They are:
Background Layer (where your html page is)
Icon Layer
Application Layer
When the ActiveDesktop is envoked then you have 4 layers.
The 4th layer is the active desktop which is inbetween the background layer and icon layer.
What I would try to do is make your page a Desktop component and add it to your desktop that way rather than as your background.
ASKER
This doesn't explain why I can use <INPUT TYPE="TEXT"> successfully. Why would the Textbox be on a different layer than other form elements?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That did the trick!
Glad I could help thanks for the A. :^)
Cd&
Cd&