A new way to Position Things [Archive]

LSCare

08-09-2011, 06:35 PM

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.
<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.

<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:
<!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 © 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:
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:
div{
position:absolute;
background:#39C;
border:thin solid #666;
}

An example can be found at http://javadev.dephri.com/