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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

position DIV element - simple question 1

Status
Not open for further replies.
DotNetGnat

DotNetGnat

Programmer
Mar 10, 2005
5,548
IN
guys,

here is the sample code in its simplest form
Code: 
<html>
<head>
<script>
function showpop() {

_textForDisplay = "some text some text some text some text";

document.getElementById("alert_msg").innerHTML = _textForDisplay;
document.all['alert_msg'].style.left = "100px";
document.all['alert_msg'].style.top = "100px";
document.all['alert_msg'].style.width = "300px";
document.all['alert_msg'].style.height = "100px";
document.all['alert_msg'].style.padding = "5px";
document.all['alert_msg'].style.border = "1px solid black";
document.all['alert_msg'].style.background = "#FFFF99";
document.all['alert_msg'].style.display = "block"; //show

}

</script>
</head>
<body>
<div id='alert_msg' style='display:none; position:absolute'></div>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
<form id="form1" name="form1">
<input type="submit" value="click" name="B1" onclick="showpop();return false;">
</form>
</body>
</html>

currently...the div tag appears at an absolute fixed position irrespective of where the button is situated.

How can I make it relatively to the position of the button.

Thanks in advance...

-DNG
 
Sort by date Sort by votes
You can use the offsetLeft and offsetTop methods to position that div relative to where that button is. This is a tested example:

Code: 
<html>
<head>
<script>
function showpop() {

_textForDisplay = "some text some text some text some text";

document.getElementById("alert_msg").innerHTML = _textForDisplay;
document.all['alert_msg'].style.width = "300px";
document.all['alert_msg'].style.height = "100px";
document.all['alert_msg'].style.padding = "5px";
document.all['alert_msg'].style.border = "1px solid black";
document.all['alert_msg'].style.background = "#FFFF99";
document.all['alert_msg'].style.display = "block"; //show
document.getElementById("alert_msg").style.top = document.getElementById("submitButton").offsetTop + "px";
document.getElementById("alert_msg").style.left = document.getElementById("submitButton").offsetLeft + "px";

}

</script>
</head>
<body>
<div id='alert_msg' style='display:none; position:absolute'></div>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
Some sample text<br>
<form id="form1" name="form1">
<input id="submitButton" type="submit" value="click" name="B1" onclick="showpop();return false;">
</form>
</body>
</html>

This example will cause the alert div to open such that the top left corner of the div is in the same place as the button's top left corner. To get it where you want, just mess with the values:

Code: 
document.getElementById("alert_msg").style.top = document.getElementById("submitButton").offsetTop[!] + 20 [/!] + "px";
document.getElementById("alert_msg").style.left = document.getElementById("submitButton").offsetLeft[!] + 300 [/!]  + "px";



[small]"Mom........MEATLOAF!!!! F***!!!!"[/small]
<.
 
Upvote 0 Downvote
thanks so much monksnake...that kinda worked...but did you run the code you posted...it creates an empty space on the top of the page...

how can i get rid of the empty space...my JS skills are rusty...

-DNG
 
Upvote 0 Downvote
I'll take a look at it, brb.

[small]"Mom........MEATLOAF!!!! F***!!!!"[/small]
<.
 
Upvote 0 Downvote
Set a z-index on the alert div to something other than 0

Code: 
<div id='alert_msg' style='display:none; position:absolute; [!]z-index:20[/!]'></div>

I tested it and I have no problems, no empty space.

If you still have empty space, then repost what you have written.

[small]"Mom........MEATLOAF!!!! F***!!!!"[/small]
<.
 
Upvote 0 Downvote
ok wonderful...that worked fine...i have position as relative...changed it to absolute and worked and it worked fine...

have a star...

-DNG
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
zydjohn
  • Locked
  • Question
How to load JavaScript files to enable DOM element click
Replies
1
Views
179
ggriffit
ggriffit
JPSeo
  • Locked
  • Question
simple SyntaxError: missing ) after argument list error
Replies
2
Views
178
JPSeo
JPSeo
waubain
  • Locked
  • Question
Find max value of element in array located in text file 1
Replies
2
Views
135
waubain
waubain
BobMCT
  • Locked
  • Question
php + js + jquery + $.post combination question(s)???
Replies
1
Views
120
BobMCT
BobMCT

Part and Inventory Search

Sponsor

Back
Top