#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2

    Moving an image in accordance to window size


    Hello

    Code:
    <!DOCTYPE html> 
    <html> 
    	<head> 
    		<title>Experiment</title> 
    		<script> 
    		var $width = window.innerWidth(); 
    		var $height = window.innerHeight(); 
    		var positionw = $width-400;
    		var positionh = $height-400; 
    		</script>
    		
    		<style> 
    		div.center
    		{
    		position: absolute;
    		left:1px; 
    		top:1px; 
    		} 
    		</style> 
    	
    	</head> 
    	<body> 
    	<div class="center" id="blah"><img src="llama.jpg" width="150" height="150"></div>
    	
    	<script> 
    	document.getElementById("blah").style.left=positionw; 
    	document.getElementById("blah").style.top=positionh; 
    	</script> 
    	</body> 
    </html>
    So the problem here is "window.innerWidth()" and "window.innerHeight()" don't give their values in pixels so I cannot use them to position the div. Is there a way around this?
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    Javascript Code:
    var positionw = ($width-400)+'px';
    var positionh = ($height-400)+'px';
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.

IMN logo majestic logo threadwatch logo seochat tools logo