How to Change the Style Top:

How to Change the Style Top:

Page 1 of 1

1 Replies - 1492 Views - Last Post: 04 March 2009 - 03:08 AM

#1 sutr_kam   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-February 09

How to Change the Style Top:

Posted 04 March 2009 - 12:04 AM

The thing is that I have to change the top style to
120px and 124 px based on condition regularly

in another jsp welcome.jsp a table with id welcomeTable is present
based on that table height
the div's top attribute to be changed.

i) can I write style as top: document.all.welcomeTable.offsetHeight;
OR
ii) can i write Style in script like
if(document.all.welComePage.offsetHeight = 70){
<style>
.selectFree{
top: 120px;
}
</style>
}else{
<style>
.selectFree{
top: 130px;
}
</style>
}


in view.jsp file
<style>
	.select-free
	{
		position:absolute;
		left:627px;
		top: 120px;
		z-index:10;/*any value*/
		overflow:auto;/*must have*/
	/*	width:33em;/*must have for any value*/;
	}
</style>

<div id="outerDIV" style="visibility:hidden;" class="select-free">

in welcome.jsp file
there is a table

<table cellSpacing="0" cellPadding="0" width="823" border="0" id="welcomeTable" name="welcomeTable">




This post has been edited by sutr_kam: 04 March 2009 - 12:16 AM


Is This A Good Question/Topic? 0
  • +

Replies To: How to Change the Style Top:

#2 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: How to Change the Style Top:

Posted 04 March 2009 - 03:08 AM

You can do this with javascript, but you shouldn't use document.all. It is a microsoft invention from the IE4 days that was superseded quickly by document.getElementById().

You could do something like this:
<script type="text/javascript">
function checkHeight() {
   if(document.getElementById('welcomePage').style.offsetHeight == 70) {
	  document.getElementById('outerDIV').style.top = "120px";
   } else {
	  document.getElementById('outerDIV').style.top = "130px";
   }
}
</script>



Then call the function when the page is loaded by attaching it to the body tag: <body onload="checkHeight()">

This post has been edited by thehat: 04 March 2009 - 03:10 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1