3

i want let the javascript to detect the screen resolution itself because i might have different LCD and each of them are in different size. this is the code temporary i have. 

<html>
<head>
<title>ViewImage</title>
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
</head>
<body onload="JavaScript:timedRefresh(1);">

<img src = "screenshot.jpeg" width="1014" height="751">
</body>
</html>

i have try to put the javascript into the code 

<img src = "screenshot.jpeg" <script type="text/JavaScript">"width ="screen.width </script>>

but it failed. when i open that, i wish it can get the resolution itself at the can anyone help me with this problem ? thanks in advance

kapa
  • 77,694
  • 21
  • 158
  • 175
Eric
  • 401
  • 4
  • 13
  • 21
  • possible duplicate of [How to detect the screen resolution with JavaScript?](http://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript) – zerkms May 17 '12 at 10:12
  • @zerkms I think it is not a duplicate. The screen resolution is not what the OP needs for this purpose. – kapa May 17 '12 at 10:22

5 Answers5

3

You seem to have a few problems with your code:

You can remove JavaScript: from your onLoad event, this is used within hyperlinks

<a href="javascript: doSomething()" />Link</a>

Also you are trying to refresh the page every 1 millisecond (if you are trying to refresh every second you should change it to 1000).

Your function would be better written like this so you avoid using eval:

function timedRefresh(timeoutPeriod) {
    setTimeout(function() { 
        location.reload(true); 
    }, timeoutPeriod);
}
OdinX
  • 4,135
  • 1
  • 24
  • 33
2

In your case, this would suffice:

<img src = "screenshot.jpeg" width ="100%" />

jsFiddle Demo

Of course this will only do what you want if body is the same size as the viewport. This basically tells the browser that the img should be just as big as its parent (in this case the body).

Note: Javascript does not work the way you expect it. <script> is an HTML element, that lets you embed scripts (Javascript mostly) into your document. You cannot change the HTML source with Javascript on the client side (like you can with PHP, Python, etc. on the server side). You can modify the DOM though.

kapa
  • 77,694
  • 21
  • 158
  • 175
1

You can try this

window.screen.availHeight for getting height
window.screen.availWidth  for getting width

Thanks.

Tuhin Subhra Dey
  • 970
  • 6
  • 19
  • Yeah, and do you think it is a good idea to use this here? Let me help: no, because the browser's available area is not the same as the screen's available area, and the OP needs the first one. [Check demo](http://jsfiddle.net/Z3a34/1/). – kapa May 17 '12 at 10:19
  • @Eric This is Javascript, but this is not what you need. If you want to solve your problem with Javascript, you need the size of the viewport. See this question: http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript – kapa May 17 '12 at 10:28
1

The CSS3 'size' and 'cover' properties also help in this situation only if you are not much worried about older versions of IE. And no need to use any JavaScript

Demo - http://jsfiddle.net/fHwu8/

body{
    background: #000 url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg) left top fixed no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%; /*cover*/
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
}
Dipak
  • 11,930
  • 1
  • 30
  • 31
  • +1 Good solution for the future. I'm glad you liked the background image :). The first result when I searched for "background" in Google Images. – kapa May 17 '12 at 11:30
0

try:

window.screen.availHeight
window.screen.availWidth
Zaheer Ahmed
  • 28,160
  • 11
  • 74
  • 110