...

View Full Version : Help needed with dynamic positioning script



3D_Dog_Man
07-08-2004, 07:13 AM
Hi Everyone,

I am currently in the process of writing a script that will position all html (or other appropriate tag) elements on screen dynamically. I have seen a number of examples on the net demonstrating how to reposition an element after a mouseover event, and other interesting (cool) effects. The thing is I want to position my elements with three peices of information, the elements id, an x coordinate and a y coordinate. At this stage I am still a DOM novice so I am trying to work out the correct methods (etc) to use. This having been said I am facing a larger challenge in that I want my script to be called multiple times, each time being passed a different page element. This is probably not that big a deal however, the script needs to be called when the page loads not when a special event, like mouseover, takes place.

My code looks like the following....

<html>
<title> Simple Element Positioning Script </title>
<head>
<style type="text/css">
#car
{
position: absolute;
}
</style>
<script language="javascript" type="text/javascript">
// <!--
// Set an indicator variable to determine DOM supported by current browser.

var domIndicator = 0;

if(document.getElementById)
{
// IE5+ or NS6+ Browser detected.
domIndicator = 1;
}
else
if(document.all)
{
// IE4 Browser detected.
domIndicator = 2;
}
else
if(document.layers)
{
// NS4 Browser detected.
domIndicator = 3;
}

function posElem(elementID, xPos, yPos)
{
if(domIndicator == 1)
{
document.getElementById(elementID).left=xPos;
//doucment.getElementById(elementID).
}
else
if(domIndicator == 2)
{
//
}
else
if(domIndicator == 3)
{
//
}
}

// -->
</script>
</head>
<body>
<img id="car" src="car.jpg">
<script type="text/javascript">
// I don't think that the top level scripts posElem() function can be
// referenced from down here!
posElem('car', '100', '100');
</script>
</body>
</html>

Is it possible to call my posElem() function (declared in the head section) from the <script> code snippet that follows the <img> tag? Also are there any broad suggestions or pointers that you could give me to help me achieve my goals with this script. Any help will be greatly appreciated. Thanks for your time.

Regards

Davo

:)

Willy Duitt
07-08-2004, 07:25 AM
<script type="text/javascript">
function posElem(elementID, xPos, yPos){
var element = document.getElementById(elementID);
element.style.position = 'absolute';
element.style.top = yPos;
element.style.left = xPos;
}
</script>
</head>
<body>
<img id="car" src="car.jpg">
<script type="text/javascript">
posElem('car', '500', '500');
</script>
</body>
</html>

SpiritualStorms
07-09-2004, 04:06 AM
Thumbs up, bro.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum