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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to move an div tags using javascript?

    Hi guy

    I am a newbie in javascript and i am currently stuck in a testing script that i want it to have a text string moved to a new position using the javascript.

    This is the simple code, I wrote:

    <html>
    <head>
    <script language="javascript">

    function testing() {
    var a = document.all["div"];
    a.style.left = 500+"px";
    a.style.top = 900+"px";
    }

    </script>
    </head>
    <body onLoad="javascript: testing()">
    <div id="div">
    blah
    </div>
    </body>
    </html>

    Thank you if anyone can help me how to solve it...

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Give the div a style attribute for it's positioning, ie; absolute or relative.

    Code:
    <div style="position:absolute" id="div">
    blah
    </div>
    Omnis mico antequam dominus Spookster!

  • #3
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for reply

    Is it possible to use javascript to dynamically setting the div's position or other things like img's position in different position.

    i.e. Like if i have an image and want it to be moved freely around the browser.


  • #4
    New Coder
    Join Date
    May 2004
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you talking about drag n drop?

    You could do this with some text fields. This is untested

    Code:
    function moveMyImage()
    {
        document.getElementById('myDiv').style.left = document.forms['myForm'].elements['xPos'].value ;
        document.getElementById('myDiv').style.top = document.forms['myForm'].elements['yPos'].value ;
    }
    Then have a little form on your page, with two text inputs and a button which calls the function onclick.
    "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."

    --Tim Berners-Lee, W3C Director and Inventor of the World Wide Web

  • #5
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Doesn't work : (

    Code:
    <html>
    <head>
    <script language="javascript">
    function moveMyImage()
    {
        document.getElementById('myDiv').style.left = 356; 
        document.getElementById('myDiv').style.top = 566; 
    }
    
    </script>
    </head>
    <body >
    <div id="myDiv" onClick="javascript: moveMyImage();">blah</div>
    </body>
    </html>
    The above code is the thing that i currently testing on but it doesn't seems to position correctly. I have put this attribute in the div as well ( left="300px" ). But it works only this attribute: align="CENTER"


    Quote Originally Posted by LynxGrr
    Are you talking about drag n drop?

    You could do this with some text fields. This is untested

    Code:
    function moveMyImage()
    {
        document.getElementById('myDiv').style.left = document.forms['myForm'].elements['xPos'].value ;
        document.getElementById('myDiv').style.top = document.forms['myForm'].elements['yPos'].value ;
    }
    Then have a little form on your page, with two text inputs and a button which calls the function onclick.


  •  

    Posting Permissions

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