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
    Dec 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Relative Positioning with getElementbyID()

    Hi, I'm kinda new on the Javascript scene, but I'm trying to position an iframe in relation to an image. I know you have to use the getElementbyID() function but I haven't the knowledge on how to do so. Here's what I have so far...

    <html>
    <head>
    <title>T H E&nbsp&nbsp D A R K&nbsp&nbsp N A T I O N</title>
    <link rel="stylesheet" href="scripts/style.css">
    <script language="JavaScript">
    var left = document.image.left;
    document.getElementById('frame').style.position = left + 30 + 'px';
    </script>
    </head>
    <body bgcolor="#101010">
    <div style="position:absolute;left:62px;">
    <img id="image" src="images/index.bmp"><br>
    <font class="legal">Copyright © 2004 The Dark Nation. All rights reserved.<br>
    All content including but not limited to images, design, and structure is property of Colin Basnett.</font><br>
    <iframe id="frame"></iframe>
    </div>
    </body>
    </html>
    Last edited by Dark Nation; 12-05-2004 at 07:58 AM.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Dark Nation,

    and a warm welcome to these forums

    You do not need javascript to position the iframe just use css...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>T H E&nbsp;&nbsp; D A R K&nbsp;&nbsp; N A T I O N</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <link rel="stylesheet" type="text/css" href="scripts/style.css"/>
    
    <style type="text/css">
    <!--
    body {
         background:#101010;
     }
    #container {
         position:absolute;
         left:62px;
      
     }
    #frame {
         position:relative;
         left:30px;
       
    }
    //-->
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <img id="image" src="images/index.bmp" alt=""/>
    <iframe id="frame"></iframe>
    
    <p class="legal">
    Copyright &copy; 2004 The Dark Nation. All rights reserved.<br />
    All content including but not limited to images, design, and structure is 
    the property of Colin Basnett.
    </p>
    
    </div>
    
    </body>
    </html>
    coothead

  • #3
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    While the concept works in that code, I still need the image to be centered on the page at all times, and keep the iframe relative.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Dark Nation,

    I see no mention of a centered img in your original post or
    in the code that you supplied

    So do you require the img centered and the iframe 30px to the right or...
    do you require the img and the iframe centered with a 30px gap between them

    coothead

    p.s. and where is the text meant to go during all this positioning

  • #5
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, so i want the image centered. And the text centered below it, but i need the frame to basically overlap it so that it can be displayed properly on ALL resolutions and no matter what the window size.

    ex.
    it would find the position of the image every 1ms and move the frame -300px to to the right and -20x down.


  •  

    Posting Permissions

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