Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

use javascript to layer a div below a input box 1

Status
Not open for further replies.
xpblueScreenOfDeath

xpblueScreenOfDeath

Programmer
Sep 1, 2004
87
How do I use javascript to layer a div right below a input box like in
I do not want to have to put the postion in the input box like so: <INPUT TYPE=TEXT STYLE="POSITION: absolute; LEFT: 40px; TOP: 30px; HEIGHT: 10px">

It would be nice if I can find the exact position and height of the input box on the browser with a input define like so: <INPUT TYPE=file ID=test>

Thanks in advance.
 
Sort by date Sort by votes

Here you go:

Code: 
<html>
<body>
	<form>
		<div>
			<input type="text" />
			<div style="margin-left:auto; margin-right:auto;">Your content here</div>
		</div>
	</form>
</body>
</html>

Hope this helps,
Dan

 
Upvote 0 Downvote

In fact, you don't even need the margin style on the second DIV - it is lined up right below the input box anyway.

Dan

 
Upvote 0 Downvote
Thanks BillyRayPreachersSon

Now, how do I make it so the inner div is not part of the layout so that it doesn't take up any space when it is unhidden and overlaps the contents below the input box.


<html>
<HEAD>
<SCRIPT Language=javascript>
function display()
{
var a = document.getElementById("test");
a.style.visibility = "";
}
</SCRIPT>
</HEAD>
<body>
<form>
<div>
<input type="text" onclick="display();" />
<div id=test style="visibility: hidden; margin-left:auto; margin-right:auto;">Your content here</div>
</div>
This is a test
</form>
</body>
</html>
 
Upvote 0 Downvote

Change the outer div and its contents to be:

Code: 
<div>
   <input type="text" onclick="display();" /><br />
   <div id=test style="position:absolute; visibility: hidden; margin-left:auto; margin-right:auto;">Your content here</div>
</div>

Dan

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
984
lexer
lexer
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
559
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
564
Marclem
Marclem
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
907
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top