...

View Full Version : Relative Positioning with getElementbyID()



Dark Nation
12-05-2004, 07:36 AM
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>

coothead
12-05-2004, 09:49 AM
Hi there Dark Nation,

and a warm welcome to these forums :)

You do not need javascript to position the iframe just use css...

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

Dark Nation
12-05-2004, 06:04 PM
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.

coothead
12-05-2004, 07:27 PM
Hi there Dark Nation,

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

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

coothead

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

Dark Nation
12-05-2004, 09:04 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum