Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts

    A new way to Position Things

    I have been trying to find a way to absolutely position stuff whilst still being able to centre things horizontally in a page.

    As such i developed the following code.

    The script is initiated by the body.
    Code:
    <body onload="position(true);">
    where true represents centered... any other value is left align.

    The code is run by the attribute (xhtml only) "position" as below.

    Code:
    <div position="w,h,l,t,z">
    	a
    </div>
    Where:

    w = width
    h = height
    l = left margin
    t = top margin
    z = zIndex


    Please see the example Implementation and all required code below.

    Page Code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	
    	<head>
    		<title>Dephri - Developement</title>
    		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    		<meta name="robots" content="none" />
    		<meta name="author" content="Laurence S Care @ Xipux" />
    		<meta name="copywrite" content="Xipux &copy; 2011" />
    		<link href="../style/style.css" rel="stylesheet" type="text/css" media="screen" />
    		<script type="text/javascript" src="../scripts/position.js"></script>
    	</head>
    	
    	<body onload="position(true);">
    		<div position="800,110,0,0,1">
    			a
    		</div>
    		<div position="800,40,0,110,2">
    			b
    		</div>
    		<div position="200,100,0,300,4">
    			c
    		</div>
    		<div position="800,600,0,150,3">
    			d
    		</div>
    		<div position="800,50,0,750,5">
    			e
    		</div>
    	</body>
    	
    </html>
    Javascript:
    Code:
    function position(ch)
    {	
    	// get window vars
    	var tx = window.innerWidth;				//tx is total x for window
    	
    	// get divs
    	var myDIVs = document.getElementsByTagName('div');
    	
    	// scroll through divs positioning
    	for(i=0; i<myDIVs.length; i++) 
    	{
    		// get divs vars
    		var s = myDIVs[i].getAttribute('position');
    		var valueArray = s.split(',');
    		var w = valueArray[0];				// w is total w for div
    		var h = valueArray[1];				// h is total h for div
    		var x = valueArray[2];				// x is total extra margin left for div
    		var y = valueArray[3];				// y is total extra margin top for div
    		var z = valueArray[4];				// z is for z index
    		
    		var d = tx-w;
    		var e = d/2;
    		var f = x*-1;
    		var g = e-f;
    		
    		
    		if(ch == true)
    		{
    			var l = g + "px";
    		}
    		else
    		{
    			var l = x + "px";
    		}
    		var t = y + "px";
    		
    		var w = w + "px";
    		var h = h + "px";
    		
    		myDIVs[i].style.width = w;
    		myDIVs[i].style.height = h;
    		myDIVs[i].style.left = l;
    		myDIVs[i].style.top = t;
    		myDIVs[i].style.zIndex = z;
    		
    	}
    }
    Style:
    Code:
    div{
    	position:absolute;
    	background:#39C;
    	border:thin solid #666;
    }
    An example can be found at http://javadev.dephri.com/
    Last edited by LSCare; 08-09-2011 at 08:15 PM. Reason: Error in JavaScript Pasting

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    That's really cool... I'm jealous of your jskills.

    I'm new to javascript and this was a helpful read, thanks.

  • #3
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    My skills aren't all that... Just time and reading mainly...

    Couldn't of done it without this forum though!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •