Ben Dev

Email conversation

From	Ben Dev
To	Me
Subject	CSS & Javascript
Date	11 December 2004 07:56

I love your site. I really appreciate how you write to accommodate so many
browsers variances.  

I am trying to dynamically set a left and top value for absolute positioning
in a CSS.  I am using layers and the layers determine how two images lay
over each other. Unfortunately, if the window size changes, the alignment
becomes off.

I can set the positioning with the following style:
#ImageMapOverLay {position:absolute;
left: 100px;
        top: 200px;
        width: 450px;
        height: 396px;
        z-index: 2
       }

But I want to set the left value based on a calculation of the current
screen size. Can I do that?  Or can I modify the style based on the current
screen size? 


Thanks,


Ben

From	Me
To	Ben Dev
Subject	Re: CSS & Javascript
Date	13 December 2004 00:17

Ben,

CSS 3 does offer a way to do things based on screen size. It is called
media queries.

@media all and ( min-width: 900px ) {
    body { color: red; }
}

This will colour all text in the body red _if_ the body is at least 900
pixels wide. Or even better:

@media all and ( min-device-width: 900px ) {
    span { font-weight: bold; }
}

This will make all spans bold if the screen is at least 900 pixels wide (no
matter how big the spans are). Pretty cool stuff. But, as is common with
this sort of advanced CSS, only Opera is advanced enough to support it. So
until the other browsers catch up, you will have to use JavaScript:

var x = document.getElementById('ImageMapOverLay');
var screenWidth = screen.width;
x.style.left = parseInt( screenWidth / 10 ) + 'px';

This will work in all current browsers, but will not work in older ones
like Netscape 4 and IE 4.
For more cross browser friendly referencing and positioning, see my
tutorial:
http://www.howtocreate.co.uk/tutorials/javascript/dhtml
If you want to position relative to the browser window size, see
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
If you want to see what other screen properties you can use, see
http://www.howtocreate.co.uk/tutorials/javascript/javascriptobject


Hope this is useful

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

From	Ben Dev
To	Me
Subject	CSS & Javascript
Date	14 December 2004 06:02

Thanks Mark!

Ben Dev

Navigation

Search

Site navigation

Email conversation