textbox and div

A

Alex

could someone please point me to a site with an explanation or give me a
*very* simple example of a div that would open right below a textbox on a
page. I've seen lots of examples out there. Unfortunately I don't have time
right now to dig through that code to extract the basic functionality. The
one implementation that really hits the spot can be found here:

http://www.eworldui.net/CustomControls/CalendarPopupDemo.aspx

look at the "Calendar Popup with Textbox and Image:"

thank you so much in advance!!
 
A

Alex

Thanks, Mike, for the reply! The problem with the tigra implementation is
that it pops up an actual browser window and not a div. also, I don't really
need it for a calendar right now just to display some additional information
about the textbox the user just clicked on... does that make sense?

Here's a mind-numbingly simple example that I need to be converted to the
point where the divs (when shown) will not push other content down but
"float" right below the textbox... I guess the style has to change to
position:absolute... but how can I grab the coordinates to put the div in??

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My cool div pop-out</title>
</head>

<body>
<form>
<table border=1>
<tr>
<td>some field here</td>
<td><input type="text" id="thisText"
onClick="JavaScript:document.all.divOne.style.display=''"><div id="divOne"
style="display:none;position:relative;border:1px
solid;width:200px;height:150px"></div></td>
</tr>
<tr>
<td>some field there</td>
<td><input type="text" id="thisText"
onClick="JavaScript:document.all.divTwo.style.display=''"><div id="divTwo"
style="display:none;position:relative;border:1px
solid;width:200px;height:150px"></div></td>
</tr>
</table>
</form>
</body>
</html>
 
A

Alex

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;border:1px
solid;width:200px;height:150px;overflow:auto">click on me to close... or hit
[Esc]<br><br><br><br><br><br><br><br><br><br><br><br><br><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;border: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>
 
A

Alex

Those are two great examples. The fact that they are very concise is awsome!
The only *one* problem now remains that they will have to stay open as long
as focus is in the textbox OR they are doing something in the div -- like
selecting a value to be put in the textbox. Once they tab off the field,
click somewhere in the body of the page or just onMouseOut off the div the
div should "close". Thanks so much!!

mscir said:
Alex said:
Thanks, Mike, for the reply! The problem with the tigra implementation is
that it pops up an actual browser window and not a div. also, I don't
really need it for a calendar right now just to display some additional
information about the textbox the user just clicked on... does that make
sense?
Click to expand...

Will something like this work?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My cool div pop-out</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
div.tooltip{
width: 100%;
border: 0;
padding: 0;
margin: 0;
}
table{
border: 1px;
padding: 0;
}
</style>
<script type="text/javascript">
var msg= new Array(2);
msg[0]='This is the first<br>explanation';
msg[1]='This is the second<br>explanation';
function showmsg(n){
d=document.getElementById('tooltip');
if (n==-1){
d.innerHTML='';
}else{
d.innerHTML=msg[n];
}
}
</script>
</head>

<body>
<form action="#">
<table border=1>
<tr>
<td>some field here</td>
<td><input type="text" onMouseMove="showmsg(0)"
onmouseout="showmsg(-1)"></td>
<td rowspan="2"><div id='tooltip'></div></td>
</tr>
<tr>
<td>some field there</td>
<td><input type="text" onMouseMove="showmsg(1)"
onmouseout="showmsg(-1)"></td>
</tr>
</table>
</form>
</body>
</html>
Click to expand...
 
R

Robert

mscir said:
var msg=new Array(5);
msg[1]='This is the first message to appear in the message div';
msg[2]='This is the second message to appear in the message div';
msg[3]='This is the third message to appear in the message div';
msg[4]='This is the fourth message to appear in the message div';
msg[5]='This is the fifth message to appear in the message div';
Click to expand...

A minor point or two.

Javascript arrays are zero based so new Array(5) says you will be using
array elements 0, 1, 2 3, and 4. Declaring how many elements you will
use is somewhat redundant because Javascript sizes the array dynamically.

I like to declare arrays as such:

var msg= [ ];

Although in this instance, I like the direct assignment
of the array values, you could also do this:

var msg= [
/* 0 */ '',
/* 1 */ 'This is the first message to appear in the message div',
/* 2 */ 'This is the second message to appear in the message div',
/* 3 */ 'This is the third message to appear in the message div',
/* 4 */ 'This is the fourth message to appear in the message div',
/* 5 */ 'This is the fifth message to appear in the message div'
]

I thought the program was will written. I hope you find this suggestion
useful.

Robert
 
M

McKirahan

Alex said:
Those are two great examples. The fact that they are very concise is awsome!
The only *one* problem now remains that they will have to stay open as long
as focus is in the textbox OR they are doing something in the div -- like
selecting a value to be put in the textbox. Once they tab off the field,
click somewhere in the body of the page or just onMouseOut off the div the
div should "close". Thanks so much!!
Click to expand...


Here's a variation of mscir's that does what you want.

The "tooltip" is on the sameline as the text box.

<html>
<head>
<title>My cool div pop-out</title>
<style type="text/css">
div.tooltip {
width: 100%;
border: 0;
padding: 0;
margin: 0;
}
table {
border: 1px;
padding: 0;
}
</style>
<script type="text/javascript">
var msg = new Array();
msg[1] = "This is the 1st explanation";
msg[2] = "This is the 2nd explanation";
function showmsg(n) {
var i = Math.abs(n);
var d = document.getElementById('tooltip'+i);
if (n < 0) {
d.innerHTML = "";
} else {
d.innerHTML = msg[n];
}
}
</script>
</head>
<body>
<form action="#">
<table>
<tr>
<td>some field here</td>
<td><input type="text" onfocus="showmsg(1)" onblur="showmsg(-1)"></td>
<td><div id='tooltip1'></div></td>
</tr>
<tr>
<td>some field there</td>
<td><input type="text" onfocus="showmsg(2)" onblur="showmsg(-2)"></td>
<td><div id='tooltip2'></div></td>
</tr>
</table>
</form>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I hide a div using an event listener on multiple checkboxes? 6
read get variables and show/hide div 4
How to properly insert a landing page within same container beneath an image element? 1
Positioning a popup 1
problem assigning function to <div>.onclick 4
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
Gallery - mosiac/grid layout with filtering and information page popup 1
Rich Text Format (RTF) Document Builder in C++: Code and Features 0

Members online

No members online now.
Total: 291 (members: 1, guests: 290)
Robots: 400

Forum statistics

Threads
474,431
Messages
2,571,677
Members
48,796
Latest member
Greg L.

Latest Threads

Top