Ivan Linton

Email conversation

From	Ivan Linton
To	Me
Subject	Positioning DIV using javascript....
Date	1 April 2003 08:59 AM

Hello
 
Can you help?  What I need to do when a page loads is check the screen
resolution and then position a <DIV> 200 pixels say less than centered
horizontally on the screen.  
 
Have tried a large number of things but with no success.  Do you have
an example of how this should be done.
 
Regards Ivan Linton

From	Me
To	Ivan Linton
Subject	Re: Positioning DIV using javascript....
Date	1 April 2003 11:02 PM

Sure, I think I get what you are asking.

If you want to position the div in the middle of the browser window, there
is no need for screen measuring. try this:

#myDiv {
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
}

If you want to position it in the middle of the screen, you will need to
know where the browser window is on the screen, which is not possible in
cross-browser scripting, but I can try to dig out some partially cross
browser solutions for you if you need to ... :-/


hope this helps


Tarquin

From	Ivan Linton
To	Me
Subject	Re: Positioning DIV using javascript....
Date	1 April 2003 9:29 PM

Hello Tarquin

Thanks for that, however it's not quite what I was looking for.  Let me
explain in more detail.

I design my pages to fit onto a screen with the resolution 800x600 pixels,
but when it is viewed on screen by someone with a different resolution I
want everything to be centralized on the page.

OK now say I have a div as follows

<div style = "position:absolute; top:1; left:50%; width:700;
height:100"><div>

I also have a second div which on a 800x600 resolution screen I positioned
with it's left being the same as the first div's left position on screen.
Now when I view the page using say 1024x760 screen resolution the first div
centralizes itself while the second div remains in the position that was set
for the 800x600 resolution.  I need this div's left position to
automatically adjust to be the same as the first div's left position on the
higher screen resolution.

I have tried using javascript to check the screen resolution when the page
loads and then position the second div accordingly but I have trouble.  I
think maybe it is that I am not using variables correctly to change the divs
position.  I can get the screen resolution and then determine a center
position, but dont know how to use this value to change the left position of
the div.

Hope this explains it better.

Thanks for your help

Ivan Linton

From	Me
To	Ivan Linton
Subject	Re: Positioning DIV using javascript....
Date	2 April 2003 7:54 PM

Do you have a URL so I can see this in action?

Are you saying that you don't know how to move a div element?
If so, check out my DHTML page
http://www.howtocreate.co.uk/tutorials/javascript/dhtml

To summarise:

Give the div an id: id="mydiv" and make sure it is positioned absolutely or
relatively

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;
}

function moveDivTo(x,y) {
myReference = getRefToDiv( 'mydiv' );
if( !myReference ) { return; }
if( myReference.style ) { myReference = myReference.style; }
var noPx = document.childNodes ? 'px' : 0;
myReference.left = x + noPx;
myReference.top = y + noPx;
}

From	Ivan Linton
To	Me
Subject	Re: Positioning DIV using javascript....
Date	2 April 2003 11:07 PM

Hello Tarquin

Thanks very much, that was exactly what I was looking for.  Thanks also for
the quick response to my questions.

Thank

Ivan Linton

Ivan Linton

Navigation

Search

Site navigation

Email conversation