PDA

View Full Version : how to place a division( using <div> tag) at a particular location



janunme
04-24-2007, 05:25 AM
hi to all


i want to place a division(using <div> tag) at a perticular location(x,y). is it possible. if possible please tell me how to do it.

regards

Bob90
04-24-2007, 05:46 AM
<div id="divid" style="position:absolute; left:400; top:300;">Hello World</div>

<script>
document.getElementById("divid").style.position = "absolute";

document.getElementById("divid").style.left= "200";

document.getElementById("divid").style.top= "30";
</script>

janunme
04-24-2007, 06:04 AM
thanks fo ryou reply

tech_support
04-24-2007, 06:53 AM
<div id="divid" style="position:absolute; left:400; top:300;">Hello World</div>

<script>
document.getElementById("divid").style.position = "absolute";

document.getElementById("divid").style.left= "200";

document.getElementById("divid").style.top= "30";
</script>
Don't forget "px". And the type attribute for <script>



<div id="divid" style="position:absolute; left:400; top:300;">Hello World</div>
<script type="text/javascript">
document.getElementById("divid").style.left= "200px";
document.getElementById("divid").style.top= "30px";
</script>

codeexploiter
04-24-2007, 07:24 AM
Try the following code



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dyanmic Div</title>
<script type="text/javascript">
function placeTheDiv(leftspace,topspace,wid)
{
var divobj = document.createElement("div");
divobj.style.position = "absolute";
divobj.style.left = leftspace;
divobj.style.top = topspace;
divobj.style.border = "1px solid #000";
divobj.style.width = wid;

document.body.appendChild(divobj);
}

function init()
{
var left = parseInt(prompt("Enter the width you want on the left side"));
var top = parseInt(prompt("Enter the width you want on the top side"));
var width = parseInt(prompt("Enter the width you want for the new div block"));

placeTheDiv(left,top, width);
}
</script>
</head>
<body>
<a href="#" onclick="javascript:init();">Click To Add a Div</a>
</body>
</html>


The above code will create and place a div block dynamically and the script asks for the configurations from the user itself. Click on the link available to add the div blocks and enter the configurations too.