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

Help needed reg Absolute Positioning

Status
Not open for further replies.
Weese

Weese

Programmer
Apr 3, 2003
17
Hai my code is like the below one.
**************************************************
<Html>
<head>
<title></title>
<SCRIPT LANGUAGE=javascript>
<!--

function DisplayNone(){
ID2.style.display = &quot;none&quot;;
ID4.style.display = &quot;none&quot;;
}

//-->
</SCRIPT>
</head>
<body id=bdy name=&quot;bdy&quot;>
<form name=&quot;frm&quot;>

<DIV ID=&quot;ID1&quot; STYLE=&quot;position:absolute; left:10; top:10;width:300; height:15; background-color:#C0C0C0;display:inline; font-family:Verdana; font-size:10pt; color:#000000; font-weight:none; font-style:none; text-decoration:none&quot;>Div ID1 Here </DIV>
<DIV ID=&quot;ID2&quot; STYLE=&quot;position:absolute; left:10; top:30;width:130; height:28; background-color:#C0C0C0;display:inline; font-family:Verdana; font-size:8pt; color:#000000; font-weight:none; font-style:none; text-decoration:none&quot;>Div ID2 Here </DIV>
<DIV ID=&quot;ID3&quot; STYLE=&quot;position:absolute; left:185; top:30;width:100; height:28; background-color:#C0C0C0;display:inline; font-family:Verdana; font-size:8pt; color:#000000; font-weight:none; font-style:none; text-decoration:none&quot;>Div ID3 Here </DIV>

<DIV ID=&quot;ID4&quot; STYLE=&quot;position:absolute; left:10; top:60;width:100; height:20; background-color:#FFFFFF;display:inline; font-family:Verdana; font-size:10pt; color:#000000; font-weight:none; font-style:none; text-decoration:none&quot;>
<INPUT NAME=&quot;A1&quot; TYPE=&quot;text&quot; STYLE=&quot; position:absolute; width:100%; height:100%; background-color:#FFFFFF font-family:Verdana; font-size:10pt; color:#000000; font-weight:none; font-style:none; text-decoration:none; text-align: Right;&quot; VALUE=&quot;1.000&quot; Datatype=&quot;number&quot; mask=&quot;&quot; Decimal=&quot;3&quot; MAXLENGTH=&quot;4&quot;>
</DIV>

<DIV ID=&quot;ID5&quot; STYLE=&quot;position:absolute; left:185; top:60;width:100; height:20; background-color:#FFFFFF;display:inline; font-family:Verdana; font-size:10pt; color:#000000; font-weight:none; font-style:none; text-decoration:none&quot;>
<INPUT NAME=&quot;A2&quot; TYPE=&quot;text&quot; STYLE=&quot; position:absolute; width:100%; height:100%; background-color:#FFFFFF font-family:Verdana; font-size:10pt; color:#000000; font-weight:none; font-style:none; text-decoration:none; text-align: Right;&quot; VALUE=&quot;1.000&quot; Datatype=&quot;number&quot; mask=&quot;&quot; Decimal=&quot;3&quot; MAXLENGTH=&quot;4&quot;>
</DIV>
<DIV ID=&quot;ID1&quot; STYLE=&quot;position:absolute; left:10; top:90;width:300; height:15; background-color:#C0C0C0;display:inline; font-family:Verdana; font-size:10pt; color:#000000; font-weight:none; font-style:none; text-decoration:none&quot;>
<INPUT NAME=&quot;B1&quot; TYPE=&quot;button&quot; style=&quot;width=120&quot; value=&quot;Display&quot; onClick=&quot;DisplayNone()&quot;>
</DIV>

</form>
</body>
</html>
****************************************************
In the above example when I click on Display button,
some piece of Div(ID2 and ID4) get disabled but I want the next piece(ID3 and ID5) should get adjusted into the place of ID2 and ID4.But since it is fixed with absolute position this not happening.I also cannot avoid absolute position since it is auto generated.

I there any way to do it.
Thanks in advance.
 
Sort by date Sort by votes
you can get the offsetHeight of the <div>s you are about to hide, then adjust the position of the other <div>s accordingly:


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
<title>test</title>
<script type=&quot;text/javascript&quot;>
function toggle() {
var id2 = document.getElementById(&quot;id2&quot;);
var id3 = document.getElementById(&quot;id3&quot;);
var id4 = document.getElementById(&quot;id4&quot;);
var id5 = document.getElementById(&quot;id5&quot;);

// if id2 & id4 shown, get height
if (id2.style.display != &quot;none&quot;) {
window.h2 = id2.offsetHeight;
window.h4 = id4.offsetHeight;
id2.style.display = &quot;none&quot;;
id4.style.display = &quot;none&quot;;
id3.style.top = parseInt(id3.style.top, 10) - h2;
id5.style.top = parseInt(id5.style.top, 10) - h2 - h4;
}
else {
id2.style.display = &quot;block&quot;;
id4.style.display = &quot;block&quot;;
id3.style.top = parseInt(id3.style.top, 10) + h2;
id5.style.top = parseInt(id5.style.top, 10) + h2 + h4;
}
}
</script>

<style type=&quot;text/css&quot;>
div {
position:absolute;
height:50px;
width:100px;
border:1px solid black;
}
</style>

<meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot;>
<meta http-equiv=&quot;Pragma&quot; content=&quot;no-cache&quot;>
</head>

<body>
<form>
<div id=&quot;id1&quot; style=&quot;top:5px;left:5px;&quot;>id1</div>
<div id=&quot;id2&quot; style=&quot;top:55px;left:5px;&quot;>id2</div>
<div id=&quot;id3&quot; style=&quot;top:105px;left:5px;&quot;>id3</div>
<div id=&quot;id4&quot; style=&quot;top:155px;left:5px;&quot;>id4</div>
<div id=&quot;id5&quot; style=&quot;top:205px;left:5px;&quot;>id5</div>
<div style=&quot;top:255px;left:5px;&quot;><input type=&quot;button&quot;
value=&quot;toggle();&quot; onclick=&quot;toggle();&quot; /></div>
</form>
</body>
</html>


=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
602
tyutghf
tyutghf
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
315
Smurfmania
Smurfmania
obtur
  • Locked
  • Question
function below calculates day of the week for any given date. not returning correctly, plz help
Replies
2
Views
287
obtur
obtur
PaulSc
  • Locked
  • Question
relative/absolute paths....
Replies
3
Views
217
PaulSc
PaulSc
waubain
  • Locked
  • Question
Syntax help to create values list for table column
Replies
1
Views
256
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top