Results 1 to 2 of 2

Thread: position:absolute/relative

  1. #1
    Join Date
    Sep 2004
    Location
    Stevenage
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question position:absolute/relative

    Hi All,

    this might be a bit of a newbie question as i've only recently started with Web tech stuff.

    I am trying to create some Javascript to move graphical items, currently I have 3 items which I toggle to and use key presses to move.

    the thing is, when im setting up the graphic display my graphics seem to be relative even when I set them as absolute.

    Im not able to supply a link but here's some snippets of the offending script.

    basicaly, Block1 is set correctly at 100,100 from the top left of the screen, However Block2 is then set at an offset from Block1 and block3 at an offset of Block2, so on and so forth.

    any ideas how to make all objects offset from the top left the same way block1 does?

    Thanks.

    Edit: please note that if I move block1 they all move, Block2 causes Block 2+3 to move and block3 can move by it's self, so it's some form if inheritency issue.

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

    var toggle;

    function pagestart()
    {
    toggle = 0
    block1.style.pixelLeft = 100
    block1.style.pixelTop = 100
    block1.style.zorder = 0

    block2.style.pixelLeft = 20
    block2.style.pixelTop = 20
    block2.style.zorder = 1

    block3.style.pixelLeft = 10
    block3.style.pixelTop = 10
    block3.style.zorder = 2

    document.onkeypress=ButtonPressed
    }


    function ButtonPressed()
    {

    var a_Pressed=97
    var One_pressed=49

    if( event.keyCode==One_pressed)
    {
    toggle++;

    if(toggle > 2) toggle=0;
    }

    if (event.keyCode==a_Pressed)
    {
    if(toggle == 0)
    block1.style.pixelLeft -= 15

    if(toggle == 1)
    block2.style.pixelLeft -= 10

    if(toggle == 2)
    block3.style.pixelLeft -= 5
    }

    </script>
    </head>

    <body onload = "pagestart()">
    <DIV ID="block1" STYLE="position:absolute; width = 16; height = 16"><IMG SRC="blockRed.jpg" BORDER=0>

    <DIV ID="block2" STYLE="position:absolute; width = 16; height = 16"><IMG SRC="blockGreen.jpg" BORDER=0>

    <DIV ID="block3" STYLE="position:absolute; width = 16; height = 16"><IMG SRC="blockBlue.jpg" BORDER=0>

    </body>
    </html>
    Last edited by Tonka; 09-23-2004 at 01:00 PM.

  2. #2
    Join Date
    Sep 2004
    Location
    Stevenage
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ignore me, it was a dippy newbie issue..

    I neglected to put </div>'s

    DOH!.

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
  •