asked on

How to get browser width & <div> left position using Javascript

OK, I have some problems here :
1. First, I want to detect my javascript compatinlity for Mozilla or IE ?
2. Second, I want to find know what's the browser width (based on the browser detected) and calculated it.
3. Third, I want to set my <div> layer's left position with the value i just calculated in no.2

Here's the script that I try. Result of my scipts :
I can detect the browsers (IE or Mozilla), in other words, no problem with no.2
Then in Mozilla I can done no2 calculations. But in IE no2 is an error.
And i still can not change the <div> left position value with the value i calculate.

Can anyone help me fix my javascript ? Or maybe got a better script for my problems ?

PS: no ASP, no .NET, no PHP, just Javascript.

Thanks.

<html><head>
<script language="javascript" type="text/javascript">
function windowsize()
{
  var noPx = document.childNodes ? 'px' : 0;
  var browserName=navigator.appName; 
  if (browserName=="Netscape") { i=Math.round((window.innerWidth-945)/2); } 
  if (browserName=="Microsoft Internet Explorer")
  {   
    alert(document.body.offsetWidth);
    i=Math.round((document.documentElement.clientWidth-945)/2); //Get Web Browser Width in IE ???
  }
  else
  {
    i=Math.round((screen.width-945)/2); //Get Screen Width for other browser
  }
 
  if (i<1) {i=1;}  
  alert(i);
  myReference = getRefToDiv( 'maiboard' );
  myReference.left = i + noPx; //left position for the mainboard layer.
//  document.getElementById("mainboard").style.left = i + noPx;  //--> shoud i use this ??
}
 
windowsize();
</script>
</head>
<body>
 
<div name="mainboard" style="position:absolute; top:5px; z-index:3;">
  <table cellpadding="0" cellspacing="0" border="0">
  <tr height="144">
    <td align="center" valign="top">
      <br style="line-height:120%;" />
      <h1>TEST</h1>
    </td>
  </tr>
  </table>
</div>
</body></html>

Open in new window

quincydude

hi,
you are missing the function getRefToDiv and the following is working almost fine except the getRefToDiv bit

<html><head>
<script language="javascript" type="text/javascript">
function windowsize()
{
  var noPx = document.childNodes ? 'px' : 0;
  var browserName=navigator.appName; 
  if (browserName=="Netscape") { i=Math.round((window.innerWidth-945)/2); } 
  if (browserName=="Microsoft Internet Explorer")
  {   
    alert(document.body.offsetWidth);
    i=Math.round((document.documentElement.clientWidth-945)/2); //Get Web Browser Width in IE ???
  }
  else
  {
    i=Math.round((screen.width-945)/2); //Get Screen Width for other browser
  }
 
  if (i<1) {i=1;}  
  alert(i);
  myReference = getRefToDiv( 'maiboard' );
  myReference.left = i + noPx; //left position for the mainboard layer.
//  document.getElementById("mainboard").style.left = i + noPx;  //--> shoud i use this ??
}
 
//windowsize();
</script>
</head>
<body onload="windowsize();">
 
<div name="mainboard" style="position:absolute; top:5px; z-index:3;">
  <table cellpadding="0" cellspacing="0" border="0">
  <tr height="144">
    <td align="center" valign="top">
      <br style="line-height:120%;" />
      <h1>TEST</h1>
    </td>
  </tr>
  </table>
</div>
</body></html>

Open in new window

sidhi

ASKER

GooD Quincydude, my problem no 1 and 2 solved, thanks to your "document.body.offsetWidth" now i need to resolve problem no. 3.

I want to set the HTML style - left position for my <div> layer named "mainboard" with the result calculated in i variable.

It seems the code has error in line 10

How to fix it, so i can put the value in variable i into my "mainboard" <div> layer style-left position ?

<html><head>
<script language="javascript" type="text/javascript">
function windowsize()
{
  var noPx = document.childNodes ? 'px' : 0;
  i=Math.round((document.body.offsetWidth-945)/2); //Get Screen browser Width and calculate it.
  if (i<0) { i=0; }  // if less then zero, set i as 0
 
  myReference = document.getElementById( 'maiboard' ); // assign to "mainboard" layer
  myReference.left = i + noPx; //set the left position for the "mainboard" layer as i px.
//  document.getElementById("mainboard").style.left = i + noPx;  //--> shoud i use this ??
}
</script>
</head>
<body onload="windowsize();">
 <div name="mainboard" style="position:absolute; top:5px; z-index:3;">
  <table cellpadding="0" cellspacing="0" border="0">
  <tr height="144">
    <td align="center" valign="top">
      <br style="line-height:120%;" />
      <h1>TEST</h1>
    </td>
  </tr>
  </table>
</div>
</body></html>

Open in new window

ASKER CERTIFIED SOLUTION

quincydude

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

sidhi

ASKER

Wow Great my problem's solved :)

BTW can you please tell me where I could find a complete reference for javascript and its DOM ? :)

Thanks :)

quincydude

http://www.w3schools.com/jsref/default.asp
http://www.w3schools.com/htmldom/dom_reference.asp