Get the clients screen size and resize the image to it

Question

i am trying to get the users screen size and resize an image to fit their screen size my current code works but only in firefox. In IE and Chrome the image never resize could somebody please help me?

http://jsfiddle.net/dwcribbs/ZK4tK/2/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../style.css">
 <script type="text/javascript" src="../javascript.js"></script>
 <script>
 window.onload = function(){ 
var w =screen.availWidth - 20 + "px";
var h =screen.availHeight - 80 + "px";
document.getElementById('full').style= "height:" +  h + ";" + "width:" +  w; +";";
alert(h+w);

checkCookie();
document.getElementsByClassName('box1')[0].addEventListener('click', correct, false); 
document.getElementsByClassName('box1')[0].addEventListener('mouseover', shade, false);
document.getElementsByClassName('box1')[0].addEventListener('mouseout', unshade, false);
document.getElementsByClassName('bg')[0].addEventListener('click', wrong, false);


function shade()
{

document.getElementById('button').style= "background-color: #ADD8E6; opacity:.4;";

}

function unshade()
{

document.getElementById('button').style= " ";

}

function loc()
{
var lo = "OS2.html";

return lo;

} 
}
 </script>

</head>
<body>
<div style="color: red;" onclick=" alert('Open Microsoft Power Point without *searching* for it\nSave it in the documents library (using backstage-view, save as), with the default name');" id="help">
<center>
?
</center>
</div>
<div class="wrap">
    <img id="full" style = "height: 500px; width: 500px;"class="bg" src = "../Pic/desktop.png" >
    <div id="button" style=" " class="box box1"></div>    
</div>








</body>
</html>

Thanks!

Why do you want to resize the image according to the screen size rather than the window size? — icktoofay, Mar 09 '14 at 01:44
i would actually rather set it to the window size but i couldnt figure out how... im assuming that i would have the same problem that way as well though. — Dave Cribbs, Mar 09 '14 at 01:48
[This](http://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript) question should cover that — user70585, Mar 09 '14 at 01:52
well the code i have actually gets the sizes correctly in every browser it just will not set the size in every browser except FireFox — Dave Cribbs, Mar 09 '14 at 01:59
I tried it in Firefox and it worked properly; have you cleared firefox's cache? — user70585, Mar 09 '14 at 02:03
You misunderstood it **only** works in firefox and nothing else and i cannot figure why — Dave Cribbs, Mar 09 '14 at 02:09
no i just tried it, it does not work in chrome it gets the size but never sets the size at all — Dave Cribbs, Mar 09 '14 at 02:36

score 1 · Accepted Answer · answered Mar 09 '14 at 03:20

Instead of

document.getElementById('full').style = "height:" +  h + ";" + "width:" +  w;
+";"; // Useless NaN

you should use [Demo]

var s = document.getElementById('full').style;
s.height = h;
s.width = w;

or [Demo]

document.getElementById('full')
    .setAttribute('style', "height:" +  h + ";" + "width:" +  w);

Get the clients screen size and resize the image to it

1 Answers1