Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    backgroundPositionX Problems

    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?

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

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

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

  • #3
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    doh! I totally didn't expect this to be a JavaScript 101 issue! Thanks...
    ---------------
    Mike!

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <!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>
    ---------------
    Mike!

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try offsetWidth as opposed to width...

  • #7
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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):

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

  • #8
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nevermind... realized I had to remove the "()" from offsetLeft()
    ---------------
    Mike!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •