Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help needed with dynamic positioning script

Status
Not open for further replies.

JProg

Programmer
Apr 4, 2002
88
JP
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
 
first of all any piece of script declared in the head section can be accessed from anywhere in the page.
therefore your script should be correct.
 
A couple of pointers:

(1) When calling the function:
Code:
posElem('car', '100', '100');
...don't put quotes around the 100(s). These are numbers and you want the JavaScript to treat them as such.

(2) When setting the location, grab the element first, so you have it, then move it around using style.top, etc.:

Code:
var obj = document.getElementById(elementID);
obj.style.left = xPos;
obj.style.top = yPos;

I think that should get you started. You seem to know how to deal with the different browsers. Try this out and post again if you're having problems.

--Dave
 
LookingForInfo,

Thanks heaps for those two pointers, by following them both I have been able to get my script going :)
I think I still have to get used to how JavaScript deals with variables, as I am from a Java background I tend to think of variables as needing a declared type, etc. Your help has been tremendous....

Regards

Davo
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top