How do I position a layer with Javascript?
I use this script but it doesnt work
function poslayer(){
OBJ1=document.getElementBy
OBJ1.style.left='100px';
}
function poslayer(){
OBJ1=document.getElementBy
OBJ1.style.left='100px';
}
ASKER
Sorry it doesnt work :(
The advert element must have a position of relative or absolute.
e.g.
<style type="text/css">
#advert { position: relative; }
</style>
Then, you can use your original script.
e.g.
<style type="text/css">
#advert { position: relative; }
</style>
Then, you can use your original script.
Hi Sorry that should be
OBJ1.style.pixelLeft = 100
Do you want me to supply code to move objects that is compliant with older browsers? i.e. Netscape 4.xx uses :
document.layers['advert'].
--jf
OBJ1.style.pixelLeft = 100
Do you want me to supply code to move objects that is compliant with older browsers? i.e. Netscape 4.xx uses :
document.layers['advert'].
--jf
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
@Fern2
I would strongly advise you to try and keep your script W3C compliant and try the comment searlas supplied. Nothing is wrong with your script so it must be the environment of the element. Using the pixelLeft attribute or moveTo function will not solve that for you. As the first is proprietary code and the second obsolete you'd be well advised to stay with your supplied script.
No offence jboyfinn, but it's just not going to help to change the script at this time, unless fern2 is trying to attempt this on a browser that simply doesn't confirm with the current standards.
I would strongly advise you to try and keep your script W3C compliant and try the comment searlas supplied. Nothing is wrong with your script so it must be the environment of the element. Using the pixelLeft attribute or moveTo function will not solve that for you. As the first is proprietary code and the second obsolete you'd be well advised to stay with your supplied script.
No offence jboyfinn, but it's just not going to help to change the script at this time, unless fern2 is trying to attempt this on a browser that simply doesn't confirm with the current standards.
Hi,
yes he's right; there's little chance of you coming unstuck if you ignore older browsers. I just put all the code in to be thorough cos to make up ground for cocking-up my first post
PS the ' if (1==1)' should have been ' if (document.layers) ' in my last post just FYI.
OK here is the final code posting (again tested on Mozilla, IE 6 and Firefox)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test Layers</title>
<style type="text/css">
#advert {position:absolute; left:0px; top:0px width:300px; background-color:aqua; }
</style>
<script language="JavaScript1.2" type="text/javascript">
<!--
function posLayer(x,y) {
if (!isNaN(new Number(x)) && !isNaN(new Number(y))) {
document.getElementById('a
document.getElementById('a
} //End if check input params valid
} //end function
//-->
</script>
</head>
<body><div id="advert"><a
href="#" onclick="posLayer(20,40)">
</body>
</html>
Note, I have only added an aqua background colour to the div and a width to it for the purposes of making it stand out. Also how you fire the event to get the 'posLayer' fuinction running is up to you. It doesn't have to be an 'onclick'
--jf
yes he's right; there's little chance of you coming unstuck if you ignore older browsers. I just put all the code in to be thorough cos to make up ground for cocking-up my first post
PS the ' if (1==1)' should have been ' if (document.layers) ' in my last post just FYI.
OK here is the final code posting (again tested on Mozilla, IE 6 and Firefox)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test Layers</title>
<style type="text/css">
#advert {position:absolute; left:0px; top:0px width:300px; background-color:aqua; }
</style>
<script language="JavaScript1.2" type="text/javascript">
<!--
function posLayer(x,y) {
if (!isNaN(new Number(x)) && !isNaN(new Number(y))) {
document.getElementById('a
document.getElementById('a
} //End if check input params valid
} //end function
//-->
</script>
</head>
<body><div id="advert"><a
href="#" onclick="posLayer(20,40)">
</body>
</html>
Note, I have only added an aqua background colour to the div and a width to it for the purposes of making it stand out. Also how you fire the event to get the 'posLayer' fuinction running is up to you. It doesn't have to be an 'onclick'
--jf
All that does not sit well with me is your insistance on posting a quirks solution. It's a javascript habit from the time we had no rules to bind us and the browser would make up for our inconsequent use of the standards. Please use a compliant doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Someday you'll thank me for stressing this point, even though at first it'll only make your life seem that much harder.
If you choose to go standards, setting any style property without adding a unit will break, so in the above example, wether or not you're rendering in quirks or standards mode, you'd best get used to always add 'px' as this is no linger implied. So:
document.getElementById('a
document.getElementById('a
Now a last adition, I'm not in this for the points, just hoping to get more compliant code in this TA, for the original sugestion of altering the styles so that your element has a position see this comment: http:#13789436 As the rest of the comments are based around this idea, and most likely it's all you need to do to get your script working, that comment deserves at least a marginal amound of points.
Hope I got you around to the standards point of view :)
Martin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Someday you'll thank me for stressing this point, even though at first it'll only make your life seem that much harder.
If you choose to go standards, setting any style property without adding a unit will break, so in the above example, wether or not you're rendering in quirks or standards mode, you'd best get used to always add 'px' as this is no linger implied. So:
document.getElementById('a
document.getElementById('a
Now a last adition, I'm not in this for the points, just hoping to get more compliant code in this TA, for the original sugestion of altering the styles so that your element has a position see this comment: http:#13789436 As the rest of the comments are based around this idea, and most likely it's all you need to do to get your script working, that comment deserves at least a marginal amound of points.
Hope I got you around to the standards point of view :)
Martin
Hi mreuring
I've taken your points on board. Yeah, that Doctype thing was pretty inexcusable..I just went to Homsite to get me a HTML template up and running as quickly as possible. I've been dissatisifed with its standard template for a while...only yesterday I created loads of snippets for quick insertion of charset 'meta' tags as they don't come with the templates as a default (even the XHTML ones).. I've now bitten the bullet and updated Homesite's configuration.
To be fair to me with respect to the DHTML though I only guesswork to go on as to what browsers Fern2 wants the code to support.
--jf
I've taken your points on board. Yeah, that Doctype thing was pretty inexcusable..I just went to Homsite to get me a HTML template up and running as quickly as possible. I've been dissatisifed with its standard template for a while...only yesterday I created loads of snippets for quick insertion of charset 'meta' tags as they don't come with the templates as a default (even the XHTML ones).. I've now bitten the bullet and updated Homesite's configuration.
To be fair to me with respect to the DHTML though I only guesswork to go on as to what browsers Fern2 wants the code to support.
--jf
OBJ1=document.getElementBy
OBJ1.style.posLeft=100; //i.e. an integer
}