Results 1 to 5 of 5

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

  1. #1
    Join Date
    Apr 2007
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default how to place a division( using <div> tag) at a particular location

    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
    Last edited by janunme; 04-24-2007 at 05:32 AM.

  2. #2
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default YEs

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

  3. #3
    Join Date
    Apr 2007
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks fo ryou reply

  4. #4
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Quote Originally Posted by Bob90 View Post
    <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>

    Code:
    <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>
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Try the following code

    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.

Bookmarks

Posting Permissions

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