I actually have to put some information in html form in that div. since it
doesn't really matter for the sake of this exercise I left it out. I guess I
should have mentioned it... sorry.
the closest I have come to my needs is this:
http://www.dyn-web.com/dhtml/write-drag/img-txt.html
here are some pieces that I still need to consider:
1. four js include files sounds like a bit much for my needs.
2. I have to turn the whole thing into a C#.NET control: the less js to
maintain the better. but then again, includes are ok
3. Dragging is a cool feature but not needed in my case. for that,
ferant.com is ideal!
4. I'll have to find the top-offsets for the height of the <input
type="text">... how to do that?
5. need to find a solution for the <select> z-index problem
6. div needs to close automatically
7. etc. etc. etc.
I guess, nothing earth shattering... but hovertext certainly won't work. And
I'm sure I'm missing a few things....
Well... I've been playing around a bit more and this is what I've come up
with... rather crude but you get the idea -- excuse the colors... ;)
<CODE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My cool div pop-out</title>
<style>
</style>
</head>
<body>
<form>
<table border=1>
<tr>
<td>some field here</td>
<td><a id="aText"/><input class="txt" value="click here - dead!"
type="text" xstyle="height:40px"></td>
</tr>
<tr>
<td>some field here</td>
<td><a id="aText"/><input class="txt" value="tab here from prev. textbox,
don't click! use dwn-arrow" type="text" style="width:400px" id="thisText"
onKeyUp="tryKey(this, divOne)" onClick="openit(this, divOne)"><div
onClick="closeit(this)" id="divOne"
style="background-color:#ffcc33;display:none;position:relative;borde r:1px
solid;width:200px;height:150px;overflow:auto">clic k on me to close... or hit
[Esc]<br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br></div></td>
</tr>
<tr>
<td>some field there</td>
<td><input type="text" id="thisText" value="click here to open"
onClick="openit(this, divTwo)"><div onClick="closeit(this)" id="divTwo"
style="background-color:#ffcc33;display:none;position:relative;borde r:1px
solid;width:200px;height:150px">click on me to close</div></td>
</tr>
<tr>
<td>some field there</td>
<td><select name="bother"><option>one<option>two<option>three</select></td>
</tr>
</table>
</form>
</body>
</html>
<script language="JavaScript">
function tryKey(t, d){
var e = event.keyCode;
//alert(typeof(e) + ': ' + e);
if(e == 40){
openit(t, d);
}
else if(e == 27){
closeit(d);
}
}
function openit(t, d){
var x = findX(t);
var y = findY(t);
d.style.display=''
d.style.position='absolute';
d.style.top = y+20; //<<< needs to be determined programmatically!
d.style.left = x;
t.focus();
}
function closeit(o){
o.style.display='none';
}
function findX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function findY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
</script>
</CODE>
