question: How to re-size image to fit window size?

Page 1 of 1

4 Replies - 1162 Views - Last Post: 04 September 2011 - 06:21 PM

#1 beastmb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 06-January 11

question: How to re-size image to fit window size?

Posted 31 August 2011 - 02:12 PM

I started learning javascript couple of days ago, so this may be a noobie question.

I wrote a simple code that should re-size the image (there's some other code in here just in case):
var userName, 
    imageHeight = document.getElementById("rock").style.height;
	  		
function resizeRock() {
    imageHeight = (document.body.clientHeight - 100) * 0.9;
}
	
function greetUser() {
    alert("Hello, I am your pet rock.");
}
	  
function touchRock() {
    userName = prompt("What is your name?", "Enter your name here.");
	    if (userName) {
			document.getElementById("rock").src = "rock_happy.png";
			alert("It is good to meet you, " + userName + ".");
		}
		setTimeout("document.getElementById('rock').src='rock.png';", 20000);
}


My problem is that it doesn't work. Image always stays the same. Any tips how I can fix this?

P. S. Here's the HTML code also (if it helps):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

   <head>
   
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Irock nesto</title>
	  <link type="text/css" rel="stylesheet" href="generic.css" />
	  <script type="text/javascript" src="jsSkripta.js"></script>

   </head>

   <body onload="resizeRock(); greetUser();">
   
      <div id="slika">
	  
	     <img id="rock" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
		 
	  </div>
	  
   </body>

</html>


Is This A Good Question/Topic? 0
  • +

Replies To: question: How to re-size image to fit window size?

#2 beastmb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 06-January 11

Re: question: How to re-size image to fit window size?

Posted 01 September 2011 - 04:40 AM

Update:

When I exclude DOCTYPE from the HTML code it works fine. Image is re-sized when I re-size the window and refresh it. So I presume there is something in the DOCTYPE declaration that conflicts with the javascript code. But when I validate HTML it reports no errors. I'm really puzzled here. Can't find anything on the web (for now) similar to this kind of problem.
Was This Post Helpful? 0
  • +
  • -

#3 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,329
  • Joined: 15-February 11

Re: question: How to re-size image to fit window size?

Posted 01 September 2011 - 06:18 AM

Changing the imageHeight doesn't update the actual object's height. imageHeight will only hold a copy of the height. What you should/could have done was 
image = document.getElementById('rock');
// ... other declarations and code
function resizeRock() {
	/* The reference to the actual object is stored in image so therefore the any changes will be reflected*/
	image.style.height = (document.body.clientHeight - 100) * 0.9;
}


EDIT: I forgot a very important point. document.getElementById will only work on an element if the element has already been created. That's where the window.onload event comes in. This event is triggered after all the elements have been loaded.
var image = null;
window.onload = function() {
	image = document.getElementById('rock');
	//call other functions
	resizeRock(); 
	greetUser();
}

This post has been edited by codeprada: 01 September 2011 - 06:23 AM

Was This Post Helpful? 1
  • +
  • -

#4 beastmb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 06-January 11

Re: question: How to re-size image to fit window size?

Posted 04 September 2011 - 01:53 PM

Thanks for the tip codeprada.

I did managed to find another solution though. Instead of using 
document.body.clientHeight
, I used 
window.innerHeight
. And it works splendidly. But I'm not so sure whether I should be using it for future scripting or not. Any recommendations?
Was This Post Helpful? 0
  • +
  • -

#5 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,329
  • Joined: 15-February 11

Re: question: How to re-size image to fit window size?

Posted 04 September 2011 - 06:21 PM

This should answer your question.

javascripter.net said:

Question: How do I determine the browser window size in Javascript?

Answer: To determine the actual size of the browser window, use the following properties:
*in Internet Explorer (backward-compatibility mode):
document.body.offsetWidth, document.body.offsetHeight
*in Internet Explorer (standards mode, document.compatMode=='CSS1Compat'):
document.documentElement.offsetWidth, document.documentElement.offsetHeight
*in most other browsers:
window.innerWidth, window.innerHeight

Was This Post Helpful? 1
  • +
  • -
Page 1 of 1