Home/ Questions/Q 5999245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:31:31+00:00

I have some javascript to set the offsetLeft attribute of an img element. But

  • 0

I have some javascript to set the offsetLeft attribute of an img element. But my javascript doesn’t move the HTML element, what do you think I can do to make it move left? This is a scenario when it is easiest for me to position the element in javascript & not css.

The img that wont move left when it should(it displays centred) has the id “headerImg”:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Kamalei - Home Page</title>
    <style type="text/css">
    <!--
        body { text-align: center; min-width: 1200px; }

        #backgroundImg  { z-index: -1; position: absolute; left: 0px; top: 0px; }

        #heading        { height: 300px; }
        #main           { margin: 0 auto; }
        #navBar         { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; } 
        #content        { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; }

        #headingImg     { left: 0px; }
        #navBarImg      { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; }
    -->
    </style>

</head>

<body>

    <div id="heading"> 
        <!-- This image will not move to the left when I call the below javascript -->
        <img id="headingImg" src="images/logoWritting.png" alt="Kamalei Childrens Centre" width="600px" height="240px"/>
    </div>

    <div id="main">
        <div id="navBar">
            <img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/>
        </div>

        <div id="content">
        </div>
    </div>


    <img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>

    <script type="text/ajavscript">
    <!--
        var CONTENT_WIDTH = 1000;

        function getScreenSize()
        {
            var res = {"width": 630, "height": 460};

            if ( parseInt(navigator.appVersion)>3 ) 
            {
                res["width"]  = screen.width;
                res["height"] = screen.height;
            }
            else if ( navigator.appName == "Netscape" && parseInt(navigator.appVersion)==3 && navigator.javaEnabled() ) 
            {
                 var jToolkit    = java.awt.Toolkit.getDefaultToolkit();
                 var jScreenSize = jToolkit.getScreenSize();
                 res["width"]  = jScreenSize.width;
                 res["height"] = jScreenSize.height;
            }

            return res;
        }

        document.getElementById("headingImg").style.left     = ((getScreenSize()['width']/2)-(CONTENT_WIDTH/2))+"px";
    -->
    </script>
</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set the .style.left along with position:absolute, not the offsetLeft. Alternatively, change the .style.marginLeft. offsetLeft is a read-only property.

    • 0