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

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2

    Changing position of element with window size


    Hello

    Code:
    		div.pos1
    		{
    		position:fixed;
    		left:345px; 
    		top:200px; 
    		}
    		div.pos2
    		{
    		position:fixed; 
    		left:495px; 
    		top:200px; 
    		}
    		div.pos3
    		{
    		position:fixed; 
    		left:345px;
    		top:350px; 
    		}
    		div.pos4
    		{
    		position:fixed;
    		left:495px;
    		top:350px; 
    		}
    		div.pos5
    		{
    		position:fixed;
    		left:645px;
    		top:200px;
    		}
    		div.pos6
    		{
    		position:fixed; 
    		left:795px; 
    		top: 430px; 
    		}
    		div.pos7
    		{
    		position:fixed; 
    		left:795px;
    		top:360px;
    		}
    		div.pos8
    		{
    		position:fixed; 
    		left:865px; 
    		top:360px; 
    		}
    		div.pos9
    		{
    		position:fixed; 
    		left:795px; 
    		top:200px; 
    		}
    This is the code (for an external page) that I am using for positioning each canvas element. The problem is I did this on a tiny Macbook Air and when I load the website on a bigger screen all the canvas elements stay in the upper right hand corner. How can I make the positioning of the canvas elements relative to the size of the screen so they are always in the center? Thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    695
    Rep Power
    441
    Without seeing the actual page, it's hard to say what you'd need to do. I'm guessing you don't actually want fixed positioning for everything. Can you post a link?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2
    I can't because Im running it from my laptop I can post the code to the main part of it
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2

    Main code


    Code:
    <!DOCTYPE html> 
    <html> 
    	<head> 
    		<!--The title of the Webpage--> 
    		<title>Tralab | Home</title>  
    		
    		<!--The little image in the search bar--> 
    		<link rel="shortcut icon" href="paint-splat.png"> 
    		
    		<!--the stylesheet for the css elements--> 
    		<link rel="stylesheet" type="text/css" href="TraLabstyle.css"> 
    
    		<!--the meta data--> 
    		<meta name="keywords" content="blog,web design,TraLab,purejavascript website"> 
    		<meta name="description" content="A pure javascript website designed to exhibit various programs"> 
    		<meta name="author" content="Abstract Workshop" > 
    		
    		<style> 
    		/*the background image and copyright image*/ 
    		body
    		{
    		background-repeat:no-repeat; 
    		background-image:url('Start_screen.png'); 
    		}
    		div.copy
    		{
    		position: fixed;
    		top: 113px;
    		left:89px;
    		}
    		</style> 
    		
    		<!--shrinking effect code--> 
    		<script src="stylejava.js"></script> 
    		
    		<!--The clock array--> 
    		<script src="clockhours.js"></script> 
    		
    		<!--the time variable-->
    		<script> 
    		//The hours variables
    		$date = new Date();
    		$time = $date.getHours();
    		
    		//the minute variables
    		$date2 = new Date();
    		$minute = $date2.getMinutes(); 
    		</script> 
    	</head> 
    	<body> 
    		
    		<!--Copyright image--> 
    		<div class="copy"><img src="copyright.png"></div> 
    		
    		<!--Define the canvas elements for each shape--> 
    		<!--Each div relates a shrinking function--> 
    		<div class="pos1"><canvas onmouseover="shrinker(this)"onmouseout="normal(this)"id="can1"height="140"width="140">HTML5 canvas required</canvas></div> 
    		<div class="pos2"><canvas onmouseover="shrinker(this)"onmouseout="normal(this)"id="can2" height = "140" width="140"></canvas></div>
    		<div class="pos3"><canvas onmouseover="shrinker(this)"onmouseout="normal(this)"id="can3" height="140" width="140"></canvas></div>
    		<div class="pos4"><canvas onmouseover="shrinker(this)"onmouseout="normal(this)"id="can4"height="140"width="140"><canvas></div> 
    		<div class="pos5"><canvas onmouseover="shrinker2(this)"onmouseout="normal2(this)"id="can5" height="290" width="140"></canvas></div> 
    		<div class="pos6"><canvas id="can6" height="60" width="60"></canvas></div> 
    		<div class="pos7"><canvas id="can7" height="60" width="60"></canvas></div> 
    		<div class="pos8"><canvas id="can8" height="60" width="60"></canvas></div> 
    		<div class="pos9"><canvas onmouseover="shrinker3(this)"onmouseout="normal3(this)" id="can9" height="150" width="130"></canvas></div> 
    	
    		<!--This section contains the code for each of the shapes and images-->
    		<script> 
    			var $ketchpad1 = document.getElementById("can1"); //1
    			var $doodle1 = $ketchpad1.getContext("2d"); 
    			$doodle1.fillStyle="#00A01C";
    			$doodle1.fillRect(0,0,140,140); 
    			
    			var $about = new Image();
    			$about.onload = function function1()
    			{
    			$doodle1.drawImage($about,38,33,70,77)
    			}
    			$about.src="abouticon.png"; 
    		</script> 
    	
    		<script> 
    			var $ketchpad2 = document.getElementById("can2"); //2
    			var $doodle2 = $ketchpad2.getContext("2d"); 
    			$doodle2.fillStyle="#BE1C4B"; 
    			$doodle2.fillRect(0,0,140,140); 
    		
    			//var $camera = new Image();
    			$camera.onload = function function2()
    			{
    			$doodle2.drawImage($camera,40,40,70,50)
    			}
    			$camera.src="camera.png";
    		</script> 
    	
    		<script> 
    			var $ketchpad3 = document.getElementById("can3"); //3
    			var $doodle3 = $ketchpad3.getContext("2d");
    			$doodle3.fillStyle="#BE1C4B";
    			$doodle3.fillRect(0,0,140,140);
    		</script> 
    	
    		<script> 
    			var $ketchpad4 = document.getElementById("can4"); //4
    			var $doodle4 = $ketchpad4.getContext("2d"); 
    			$doodle4.fillStyle="#2D8BEF";
    			$doodle4.fillRect(0,0,140,140); 
    		
    			var $house = new Image();
    			$house.onload = function function4()
    			{
    			$doodle4.drawImage($house,36,37,70,70)
    			}
    			$house.src="Home_Icon.svg.png";
    		</script> 
    	
    		<script> 
    			var $ketchpad5 = document.getElementById("can5"); //5
    			var $doodle5 = $ketchpad5.getContext("2d"); 
    			$doodle5.fillStyle="#DB562D";
    			$doodle5.fillRect(0,0,140,290);
    	
    			$line = new Image()
    			$line.onload = function function5()
    			{
    			$doodle5.drawImage($line,70,0,5,152)
    			}
    		
    			$bulb = new Image()
    			$bulb.onload = function function6()
    			{
    			$doodle5.drawImage($bulb,51.45,151,42,68)
    			}
    			$line.src="cord.png"; 
    			$bulb.src="thor.png";
    		</script> 
    	
    		<script> 
    			var $ketchpad6 = document.getElementById("can6"); //6
    			$doodle6 = $ketchpad6.getContext("2d"); 
    			$doodle6.fillStyle="#00A01C";
    			$doodle6.fillRect(0,0,60,60); 
    		
    			var $clock = new Image();
    			$clock.onload = function function6()
    			{
    			$doodle6.drawImage($clock,7.5,7.5,45,45); 
    			}
    			$rim = new Image();
    			$rim.onload = function function20()
    			{
    			$doodle6.drawImage($rim,-12,-10,90,90);
    			}
    			$clock.src="clock-icon.png";
    			$rim.src="rim.png"; 
    			//this is the code for the clock
    			$doodle6.lineWidth=2;
    			$doodle6.strokeStyle="white";
    			$doodle6.lineCap="round";
    			$doodle6.beginPath();
    			$doodle6.moveTo(30,30);
    			$doodle6.lineTo(44,22);
    			$doodle6.stroke(); 
    			$doodle6.closePath(); 
    		</script> 
    		<script> 
    			var $ketchpad7 = document.getElementById("can7"); //7
    			$doodle7 = $ketchpad7.getContext("2d"); 
    			$doodle7.fillStyle="#BE1C4B"; 
    			$doodle7.fillRect(0,0,60,60);
    		</script> 
    	
    		<script> 
    			var $ketchpad8 = document.getElementById("can8"); //8
    			$doodle8 = $ketchpad8.getContext("2d"); 
    			$doodle8.fillStyle="#2D8BEF";
    			$doodle8.fillRect(0,0,60,60); 
    		</script> 
    	
    		<script> 
    			var $ketchpad9 = document.getElementById("can9"); //9
    			$doodle9 = $ketchpad9.getContext("2d");
    			$doodle9.fillStyle="#00A01C";
    			$doodle9.fillRect(0,0,130,150);
    		
    			var $movie = new Image()
    			$movie.onload = function function9()
    			{
    			$doodle9.drawImage($movie,17,35,100,70)
    			}
    			$movie.src="movcam.png"
    		</script> 
    	</body> 
    </html>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2
    Code:
    <!DOCTYPE html> 
    <html> 
    	<head> 
    		<!--The title of the Webpage--> 
    		<title>Tralab | Home</title>  
    		
    		<!--The little image in the search bar--> 
    		<link rel="shortcut icon" href="paint-splat.png"> 
    		
    		<!--the stylesheet for the css elements--> 
    		<link rel="stylesheet" type="text/css" href="TraLabstyle.css"> 
    
    		<!--the meta data--> 
    		<meta name="keywords" content="blog,web design,TraLab,purejavascript website"> 
    		<meta name="description" content="A pure javascript website designed to exhibit various programs"> 
    		<meta name="author" content="Abstract Workshop" > 
    		
    		<style> 
    		/*the background image and copyright image*/ 
    		body
    		{
    		background-repeat:no-repeat; 
    		background-image:url('Start_screen.png'); 
    		}
    		div.copy
    		{
    		position: fixed;
    		top: 113px;
    		left:89px;
    		}
    		</style> 
    		
    		<!--shrinking effect code--> 
    		<script src="stylejava.js"></script> 
    		
    		<!--The clock array--> 
    		<script src="clockhours.js"></script> 
    		
    		<!--the time variable-->
    		<script> 
    		//The hours variables
    		$date = new Date();
    		$time = $date.getHours();
    		
    		//the minute variables
    		$date2 = new Date();
    		$minute = $date2.getMinutes(); 
    		</script> 
    	</head> 
    	<body> 
    		
    		<!--Copyright image--> 
    		<div class="copy"><img src="copyright.png"></div> 
    		
    		<!--Define the canvas elements for each shape--> 
    		<!--Each div relates a shrinking function--> 
    		<div class="pos1"><canvas onmouseover="shrinker(this)"onmouseout="normal(this)"id="can1"height="140"width="140">HTML5 canvas required</canvas></div> 
    		<div class="pos2"><canvas onmouseover="shrinker(this)"onmouseout="normal(this)"id="can2" height = "140" width="140"></canvas></div>
    		<div class="pos3"><canvas onmouseover="shrinker(this)"onmouseout="normal(this)"id="can3" height="140" width="140"></canvas></div>
    		<div class="pos4"><canvas onmouseover="shrinker(this)"onmouseout="normal(this)"id="can4"height="140"width="140"><canvas></div> 
    		<div class="pos5"><canvas onmouseover="shrinker2(this)"onmouseout="normal2(this)"id="can5" height="290" width="140"></canvas></div> 
    		<div class="pos6"><canvas id="can6" height="60" width="60"></canvas></div> 
    		<div class="pos7"><canvas id="can7" height="60" width="60"></canvas></div> 
    		<div class="pos8"><canvas id="can8" height="60" width="60"></canvas></div> 
    		<div class="pos9"><canvas onmouseover="shrinker3(this)"onmouseout="normal3(this)" id="can9" height="150" width="130"></canvas></div> 
    	
    		<!--This section contains the code for each of the shapes and images-->
    		<script> 
    			var $ketchpad1 = document.getElementById("can1"); //1
    			var $doodle1 = $ketchpad1.getContext("2d"); 
    			$doodle1.fillStyle="#00A01C";
    			$doodle1.fillRect(0,0,140,140); 
    			
    			var $about = new Image();
    			$about.onload = function function1()
    			{
    			$doodle1.drawImage($about,38,33,70,77)
    			}
    			$about.src="abouticon.png"; 
    		</script> 
    	
    		<script> 
    			var $ketchpad2 = document.getElementById("can2"); //2
    			var $doodle2 = $ketchpad2.getContext("2d"); 
    			$doodle2.fillStyle="#BE1C4B"; 
    			$doodle2.fillRect(0,0,140,140); 
    		
    			//var $camera = new Image();
    			$camera.onload = function function2()
    			{
    			$doodle2.drawImage($camera,40,40,70,50)
    			}
    			$camera.src="camera.png";
    		</script> 
    	
    		<script> 
    			var $ketchpad3 = document.getElementById("can3"); //3
    			var $doodle3 = $ketchpad3.getContext("2d");
    			$doodle3.fillStyle="#BE1C4B";
    			$doodle3.fillRect(0,0,140,140);
    		</script> 
    	
    		<script> 
    			var $ketchpad4 = document.getElementById("can4"); //4
    			var $doodle4 = $ketchpad4.getContext("2d"); 
    			$doodle4.fillStyle="#2D8BEF";
    			$doodle4.fillRect(0,0,140,140); 
    		
    			var $house = new Image();
    			$house.onload = function function4()
    			{
    			$doodle4.drawImage($house,36,37,70,70)
    			}
    			$house.src="Home_Icon.svg.png";
    		</script> 
    	
    		<script> 
    			var $ketchpad5 = document.getElementById("can5"); //5
    			var $doodle5 = $ketchpad5.getContext("2d"); 
    			$doodle5.fillStyle="#DB562D";
    			$doodle5.fillRect(0,0,140,290);
    	
    			$line = new Image()
    			$line.onload = function function5()
    			{
    			$doodle5.drawImage($line,70,0,5,152)
    			}
    		
    			$bulb = new Image()
    			$bulb.onload = function function6()
    			{
    			$doodle5.drawImage($bulb,51.45,151,42,68)
    			}
    			$line.src="cord.png"; 
    			$bulb.src="thor.png";
    		</script> 
    	
    		<script> 
    			var $ketchpad6 = document.getElementById("can6"); //6
    			$doodle6 = $ketchpad6.getContext("2d"); 
    			$doodle6.fillStyle="#00A01C";
    			$doodle6.fillRect(0,0,60,60); 
    		
    			var $clock = new Image();
    			$clock.onload = function function6()
    			{
    			$doodle6.drawImage($clock,7.5,7.5,45,45); 
    			}
    			$rim = new Image();
    			$rim.onload = function function20()
    			{
    			$doodle6.drawImage($rim,-12,-10,90,90);
    			}
    			$clock.src="clock-icon.png";
    			$rim.src="rim.png"; 
    			//this is the code for the clock
    			$doodle6.lineWidth=2;
    			$doodle6.strokeStyle="white";
    			$doodle6.lineCap="round";
    			$doodle6.beginPath();
    			$doodle6.moveTo(30,30);
    			$doodle6.lineTo(44,22);
    			$doodle6.stroke(); 
    			$doodle6.closePath(); 
    		</script> 
    		<script> 
    			var $ketchpad7 = document.getElementById("can7"); //7
    			$doodle7 = $ketchpad7.getContext("2d"); 
    			$doodle7.fillStyle="#BE1C4B"; 
    			$doodle7.fillRect(0,0,60,60);
    		</script> 
    	
    		<script> 
    			var $ketchpad8 = document.getElementById("can8"); //8
    			$doodle8 = $ketchpad8.getContext("2d"); 
    			$doodle8.fillStyle="#2D8BEF";
    			$doodle8.fillRect(0,0,60,60); 
    		</script> 
    	
    		<script> 
    			var $ketchpad9 = document.getElementById("can9"); //9
    			$doodle9 = $ketchpad9.getContext("2d");
    			$doodle9.fillStyle="#00A01C";
    			$doodle9.fillRect(0,0,130,150);
    		
    			var $movie = new Image()
    			$movie.onload = function function9()
    			{
    			$doodle9.drawImage($movie,17,35,100,70)
    			}
    			$movie.src="movcam.png"
    		</script> 
    	</body> 
    </html>
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2

    Anchoring multiple elements to the center of a page


    Hello I posted this question yesterday but I did not supply sufficient information and I think my question was a little confusing.

    Here is an image of the page I am trying to fix
    http://tinypic.com/r/2dgrnyq/5


    I made that page on my tiny macbook air screen and when it is viewed on a bigger screen everything is in the upper lefthand corner. What I want to do is make sure that no matter the window size all of the elements stay in the center of the page. However they need to retain their current structure. Can anyone help? Thanks ~ Nick

    also the multi colored shapes were done in javascript
    Last edited by Nick Wyden; August 22nd, 2013 at 10:37 AM.
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    *** Threads merged ***

    As rdoyle720 suggested, use absolute positioning instead of fixed positioning. Then you can put those 9 <div>s in a container that has "position:relative" (to create a new positioning context) and position the container where you want it.

    To center it, I recommend the technique shown here:
    http://www.search-this.com/2008/05/1...ring-with-css/
    http://d-graff.de/fricca/center.html
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2
    Great thank you

IMN logo majestic logo threadwatch logo seochat tools logo