David Berman

Email conversation

From	David Berman
To	Me
Subject	Positioning DIV using javascript
Date	14 January 2005 3:33

I found your site via Google and I see that you answered a similar question
to mine on 1 April 2003.  (My question is slightly different).
 
I have a line of text on my web page that is positioned absolutely.  The
first section is positioned so:
 
<DIV STYLE="position: absolute; top:95px; left:35px;">
 
This works fine for 800 x 600 but it does not work for 1024 x 768.  By my
calculation, I would want to add 112 to left position, making it 147px
rather than 35px for a person with a 1024 x 768 screen resolution.
 
Is there a way to do this in Javascript?
 
Thanks in advance,
David Berman

From	Me
To	David Berman
Subject	Re: Positioning DIV using javascript
Date	14 January 2005 13:04

David,

this is effectively the same thing as that email;

if you are trying to make the position correct depending on available
window width (much more important than screen width - not all people
maximise their windows), you probably would be better off using percentages
instead of pixels:
left: 4.5%

but this calculation may not work properly for what you are doing. it
sounds like you are trying to centre some text, and centring text is not
easy with Internet Explorer's CSS limitations (Opera, Mozilla, Safari,
Konqueror, etc all the correct technique - automatic margins - just fine).
The QuirksMode site has some nice solutions:
http://www.quirksmode.org/css/centering.html

If you feel you need to use JavaScript, you will need to assign an ID to
the div, check the screen width, then use DHTML referencing to reference it,
and reposition it:
<DIV STYLE="position: absolute; top:95px; left:35px;" id="mydiv">
...
</div>
<script type="text/javascript"><!--
function getRefToDiv(divID,oDoc) {
  if( !oDoc ) { oDoc = document; }
  if( document.layers ) {
      if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {
          //repeatedly run through all child layers
          for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {
              //on success, return that layer, else return nothing
              y = getRefToDiv(divID,oDoc.layers[x].document); }
          return y; } }
  if( document.getElementById ) {
      return document.getElementById(divID); }
  if( document.all ) {
      return document.all[divID]; }
  return false;
}

if( screen.availWidth > 800 ) {
 myReference = getRefToDiv( 'mydiv' );
 if( myReference ) {
   if( myReference.style ) { myReference = myReference.style; }
   var noPx = document.childNodes ? 'px' : 0;
   myReference.left = 147 + noPx;
 }
}
//--></script>

hope this helps

Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	David Berman
To	Me
Subject	Re: Positioning DIV using javascript
Date	14 January 2005 16:00

Mark,
 
Thank you.  It works perfectly.
 
I was able to prune it down to this:
 
<script type="text/javascript"><!--
function  getRefToDiv(divID,oDoc) {
if( !oDoc ) { oDoc = document;  }
if( document.getElementById )  {
return document.getElementById(divID);  }
return false;
}
 
if( screen.availWidth > 800 ) {
myReference = getRefToDiv(  'div1' );
if( myReference ) {
if(  myReference.style ) { myReference = myReference.style; }
myReference.left = 147;
}
}
//--></script>
 
and that works fine.
 
However, I have a problem in that there are 8 of these DIV's in a line and  I 
cannot figure out how to make this work for more than one DIV.  I tried  
appending:
 
}
myReference2 = getRefToDiv( 'div2' );
if(  myReference2 ) {
if( myReference2.style ) { myReference2 =  myReference2.style; }
myReference2.left = 200;
}
 
but that does not seem to work.
 
 
Best regards,
Dave

From	David Berman
To	Me
Subject	Re: Positioning DIV using javascript
Date	14 January 2005 18:31

Mark,
 
I figured it out now.  It works great for all 8 DIV's.
 
Thank you very much.
 
Take a look at it if you wish.
 
[sample page address]

From	Me
To	David Berman
Subject	Re: Positioning DIV using javascript
Date	16 January 2005 11:21

Dave,

> Thank you.  It works perfectly.

no problem :)

good to hear you got it all working.

> I was able to prune it down to this:

There is a reason I included the extra stuff. The bits you removed support
older browsers; Netscape 4, IE 4, Escape, WebTV/MSNTV (actually still a
current browser, and Microsoft have still not bothered to update its script
support) and Clue.  However, as virtually none of these will be used by any
of your visitors, this should not matter (it still makes sense without the
script, so that is OK). All modern browsers (Opera, Mozilla, IE5+,
Konqueror, Safari, ICE, Netgem, OpenTV, etc.) will work with the trimmed
down version.

[Ed. Note, Dave also removed the "document.childNodes ? 'px' : 0;" - this
is important and must NOT be removed if using a strict doctype, as
standards compliant browsers will ignore the declaration without it]

Tarquin

David Berman

Navigation

Search

Site navigation

Email conversation