0

I have a div on my page containing images. As it is 800px high and situated 400px from the bottom of the page, my images are getting cut off from the top when viewed on smaller monitors. I am not using scrollbars on my website.

I have added some CSS to my div that zooms out/scales the content...

.hello {
width:100%; 
height:800px;
position:fixed; 
top:0;
bottom-margin:400px; 
z-index:0;
-moz-transform: scale(.8);
-webkit-transform: scale(.8);
zoom : .8;
-moz-transform-origin:top center;
-webkit-transform-origin:top center;
}

But is there any script that I could implement that will only apply the zoom/scale if the user's monitor dimensions are 1200px high or smaller?

Thanks in advance for any help!

user974254
  • 21
  • 1

1 Answers1

0

What you're looking for is the screen resolution. See here. Relevant bits:

height
    Returns the height of the screen in pixels.
width
    Returns the width of the screen.

However, this does not tell you how big the window is, in which case you'll need the windows dimensions. See here. Relevant bits:

window.innerHeight
    Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
window.innerWidth
    Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.

I would detect this and change classes and whatnot appropriately.

beatgammit
  • 19,817
  • 19
  • 86
  • 129
  • Thanks for your response. How do I go about applying a CSS class to a div using Javascript? I would like to do something like this: if (window.innerHeight<=1200) { APPLY "HELLO" CLASS TO DIV } else { APPLY "HELLO2" CLASS TO DIV } – user974254 Mar 20 '13 at 03:59
  • @user974254 - http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – beatgammit Mar 20 '13 at 05:35