...

View Full Version : backgroundPositionX Problems



mwmistak
08-16-2004, 03:50 PM
I am attempting to manipulate the backgroundPositionX of LIs that I am formatting as tabs. Whenever I attempt to assign a new value to this attribute through javascript I get an Object required error. (please see code below)

Can anyone spot the error in my ways?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles_boc.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.3">
for(i=1;i<=5;i++) {
var tabname = document.getElementById('tabli' + i);
tabname.style.backgroundPositionX = "500px";
}

</script>
</head>

<body>
<div id="tabnavigation">
<ul>
<li id="tabli1"><a href="#">Home</a></li>
<li id="tabli2"><a href="#">Link 1</a></li>
<li id="tabli3"><a href="#">Link 2</a></li>
<li id="tabli4"><a href="#">Link 3</a></li>
<li id="tabli5"><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>

Willy Duitt
08-16-2004, 04:21 PM
You are getting an object expected error because you are calling getElementById before the element has been written to the document....

You can move your script below the division....
You can place your script within a function and call the function body.onload....
Or, if you use the DOM and go in thru getElementsByTagName you could leave the script in the HEAD without a function wrapper or onload event...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles_boc.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var menu = document.getElementsByTagName('div');
for(var m=0; m<menu.length; m++){
if(menu[m].id.match(/tabnavigation/gi)){
for(var i=1; i<=5; i++) {
var tabname = document.getElementById('tabli' + i);
tabname.style.backgroundPositionX = '500px';
}
}
}
</script>
</head>

<body>
<div id="tabnavigation">
<ul>
<li id="tabli1"><a href="#">Home</a></li>
<li id="tabli2"><a href="#">Link 1</a></li>
<li id="tabli3"><a href="#">Link 2</a></li>
<li id="tabli4"><a href="#">Link 3</a></li>
<li id="tabli5"><a href="#">Link 4</a></li>
</ul>
</div>


</body>
</html>


.....Willy

mwmistak
08-16-2004, 04:27 PM
doh! I totally didn't expect this to be a JavaScript 101 issue! Thanks...

Willy Duitt
08-16-2004, 04:37 PM
Cheers;

But, no not Javascript 101...

I merely pointed out several alternatives but I did assume you were looking for a DOM solution since you posted in the DOM forum. You could also cut that code a wee bit by using the list tagName('li') but I wasn't sure if that was the entire menu or nearly a small example so it was safer to target the division wrapper....

Anyways....
Glad I could help;
.....Willy

mwmistak
08-16-2004, 04:42 PM
I am actually trying to alter the background image alignment based on the LI's position on the page. Unfortunately trying to detect the "left" attribute of the LIs does not return a value.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles_boc.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.3">
function formattabs() {
for(i=1;i<=5;i++) {
var tabname = document.getElementById('tabli' + i);
var tableft = tabname.style.width;
tabname.style.backgroundPositionX = -(tableft);
}
}
</script>
</head>

<body onload="formattabs();">
<div id="tabnavigation">
<ul>
<li id="tabli1"><a href="#">Home</a></li>
<li id="tabli2"><a href="#">Link 1</a></li>
<li id="tabli3"><a href="#">Link 2</a></li>
<li id="tabli4"><a href="#">Link 3</a></li>
<li id="tabli5"><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>

Willy Duitt
08-16-2004, 04:53 PM
Try offsetWidth as opposed to width...

mwmistak
08-16-2004, 06:26 PM
I meant to originally use left, so I guess I would use offsetLeft instead. Trying this (I get an 'Object doesn't support this action' error):


function formattabs() {
for(i=1;i<=5;i++) {
var tabname = document.getElementById('tabli' + i);
var tableft = tabname.offsetLeft();
tabname.style.backgroundPositionX = tableft;
}
}

mwmistak
08-16-2004, 06:33 PM
Nevermind... realized I had to remove the "()" from offsetLeft()



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum