html - Position elements on screen using Javascript - Stack Overflow

IT技术

更新时间：2025-04-241

admin管理员组
文章数量:1426799

I am attempting to use Javascript to position some of my elements on the screen/window. I am doing this to make sure that what ever the dimensions of the users screen, my elements will always be in the centre.

I know that padding & margin can also achieve this, but I am using a custom movement script called raphael.js, & in order to move my elements I need to set out my elements absolutely (its a custom home page, where you click blocks(that are links) & they fly off the screen).

My javascript function to move my elements fails to move my elements. Any suggestions on how to position my elements using javascript would be really helpful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="dropDownMenu.js"></script>

    <title></title>
    <script src="javascript/raphael.js"></script> <!-- I am using a custom drawing/moving script which is why I cant put the img(id=bkImg) inside the div element -->
    <script LANGUAGE="JavaScript" type = "text/javascript">
    <!--
        function getScreenSize()
        {
            var res = {"width": 630, "height": 460};

            if (document.body) 
            {
                 if (document.body.offsetWidth)  res["width"]  = document.body.offsetWidth;
                 if (document.body.offsetHeight) res["height"] = document.body.offsetHeight;
            }

            if (window.innerWidth)  res["width"]  = window.innerWidth;
            if (window.innerHeight) res["height"] = window.innerHeight;

            alert( res["width"] );
            alert( res["height"] );

            return res;
        }

        function positionBlocksAccordingToScreenSize()
        {
            // The problem is that the blocks position does not change but they should?

            var scrDim      = getScreenSize();
            var BK_WIDTH    = 800;
            var BK_HEIGHT   = 600;
            var X_OFFSET    = (scrDim["width"]-BK_WIDTH) / 2; // variable that changes according to the width of the screen
            var BLOCK_POS_X = [160, 80, 280, 20, 200, 400];
            var BLOCK_POS_Y = [26, 203, 203, 380, 380, 380];

            for ( var i=1; i<=5; i++ )
            {
                //document.getElementById("block"+i).setAttribute( "offsetLeft", X_OFFSET + BLOCK_POS_X[i] ); // doesn't work
                //document.getElementById("block"+i).setAttribute( "offsetTop", BLOCK_POS_Y[i] ); // doesn't work
                document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i]; // doesn't work
                document.getElementById("block"+i).style.top  = BLOCK_POS_Y[i]; // doesn't work
            }
        }

    -->
    </script>
    <style type="text/css" media="all">
        <!--
        @import url("styles.css");

        #blockMenu { z-index: -5; padding: 0; position: absolute; width: 800px;
                     height: 600px; /*background-image: url("images/menuBk.png");*/ }
        #bkImg     { z-index: -5; position: relative; }

        #block1 { z-index: 60; position: absolute; top: 26px; left: 160px; margin: 0; padding: 0; }
        #block2 { z-index: 50; position: absolute; top: 203px; left: 80px; margin: 0; padding: 0; }
        #block3 { z-index: 40; position: absolute; top: 203px; left: 280px; margin: 0; padding: 0; }
        #block4 { z-index: 30; position: absolute; top: 380px; left: 20px; margin: 0; padding: 0; }
        #block5 { z-index: 20; position: absolute; top: 380px; left: 200px; margin: 0; padding: 0; }
        #block6 { z-index: 10; position: absolute; top: 380px; left: 400px; margin: 0; padding: 0; }

        -->
    </style>
</head>

<body onload="positionBlocksAccordingToScreenSize()" style="margin-top: 10%; text-align: center; margin-bottom: 10%; position: relative;">

    <img id="bkImg" src="images/menuBk.png" width="800px;" height="600px" alt=""/>
    <!-- The above image should be displayed behind the below div. I am using the raphael.js movement script, so I cannot place 
         this image inside the div, because it will get erased when I call raphael.clear(); -->
    <div id="blockMenu">
        <div id="block1"><a href="javascript:onBlockClick('block1')"><img src="images/block1.png" width="200" height="200"/></a></div>
        <div id="block2"><a href="javascript:onBlockClick('block2')"><img src="images/block2.png" width="200" height="200"/></a></div>
        <div id="block3"><a href="javascript:onBlockClick('block3')"><img src="images/block3.png" width="200" height="200"/></a></div>
        <div id="block4"><a href="javascript:onBlockClick('block4')"><img src="images/block4.png" width="200" height="200"/></a></div>
        <div id="block5"><a href="javascript:onBlockClick('block5')"><img src="images/block5.png" width="200" height="200"/></a></div>
        <div id="block6"><a href="javascript:onBlockClick('block6')"><img src="images/block6.png" width="200" height="200"/></a></div>
    </div>

</body>
</html>

I am attempting to use Javascript to position some of my elements on the screen/window. I am doing this to make sure that what ever the dimensions of the users screen, my elements will always be in the centre.

I know that padding & margin can also achieve this, but I am using a custom movement script called raphael.js, & in order to move my elements I need to set out my elements absolutely (its a custom home page, where you click blocks(that are links) & they fly off the screen).

My javascript function to move my elements fails to move my elements. Any suggestions on how to position my elements using javascript would be really helpful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="dropDownMenu.js"></script>

    <title></title>
    <script src="javascript/raphael.js"></script> <!-- I am using a custom drawing/moving script which is why I cant put the img(id=bkImg) inside the div element -->
    <script LANGUAGE="JavaScript" type = "text/javascript">
    <!--
        function getScreenSize()
        {
            var res = {"width": 630, "height": 460};

            if (document.body) 
            {
                 if (document.body.offsetWidth)  res["width"]  = document.body.offsetWidth;
                 if (document.body.offsetHeight) res["height"] = document.body.offsetHeight;
            }

            if (window.innerWidth)  res["width"]  = window.innerWidth;
            if (window.innerHeight) res["height"] = window.innerHeight;

            alert( res["width"] );
            alert( res["height"] );

            return res;
        }

        function positionBlocksAccordingToScreenSize()
        {
            // The problem is that the blocks position does not change but they should?

            var scrDim      = getScreenSize();
            var BK_WIDTH    = 800;
            var BK_HEIGHT   = 600;
            var X_OFFSET    = (scrDim["width"]-BK_WIDTH) / 2; // variable that changes according to the width of the screen
            var BLOCK_POS_X = [160, 80, 280, 20, 200, 400];
            var BLOCK_POS_Y = [26, 203, 203, 380, 380, 380];

            for ( var i=1; i<=5; i++ )
            {
                //document.getElementById("block"+i).setAttribute( "offsetLeft", X_OFFSET + BLOCK_POS_X[i] ); // doesn't work
                //document.getElementById("block"+i).setAttribute( "offsetTop", BLOCK_POS_Y[i] ); // doesn't work
                document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i]; // doesn't work
                document.getElementById("block"+i).style.top  = BLOCK_POS_Y[i]; // doesn't work
            }
        }

    -->
    </script>
    <style type="text/css" media="all">
        <!--
        @import url("styles.css");

        #blockMenu { z-index: -5; padding: 0; position: absolute; width: 800px;
                     height: 600px; /*background-image: url("images/menuBk.png");*/ }
        #bkImg     { z-index: -5; position: relative; }

        #block1 { z-index: 60; position: absolute; top: 26px; left: 160px; margin: 0; padding: 0; }
        #block2 { z-index: 50; position: absolute; top: 203px; left: 80px; margin: 0; padding: 0; }
        #block3 { z-index: 40; position: absolute; top: 203px; left: 280px; margin: 0; padding: 0; }
        #block4 { z-index: 30; position: absolute; top: 380px; left: 20px; margin: 0; padding: 0; }
        #block5 { z-index: 20; position: absolute; top: 380px; left: 200px; margin: 0; padding: 0; }
        #block6 { z-index: 10; position: absolute; top: 380px; left: 400px; margin: 0; padding: 0; }

        -->
    </style>
</head>

<body onload="positionBlocksAccordingToScreenSize()" style="margin-top: 10%; text-align: center; margin-bottom: 10%; position: relative;">

    <img id="bkImg" src="images/menuBk.png" width="800px;" height="600px" alt=""/>
    <!-- The above image should be displayed behind the below div. I am using the raphael.js movement script, so I cannot place 
         this image inside the div, because it will get erased when I call raphael.clear(); -->
    <div id="blockMenu">
        <div id="block1"><a href="javascript:onBlockClick('block1')"><img src="images/block1.png" width="200" height="200"/></a></div>
        <div id="block2"><a href="javascript:onBlockClick('block2')"><img src="images/block2.png" width="200" height="200"/></a></div>
        <div id="block3"><a href="javascript:onBlockClick('block3')"><img src="images/block3.png" width="200" height="200"/></a></div>
        <div id="block4"><a href="javascript:onBlockClick('block4')"><img src="images/block4.png" width="200" height="200"/></a></div>
        <div id="block5"><a href="javascript:onBlockClick('block5')"><img src="images/block5.png" width="200" height="200"/></a></div>
        <div id="block6"><a href="javascript:onBlockClick('block6')"><img src="images/block6.png" width="200" height="200"/></a></div>
    </div>

</body>
</html>

Share Improve this question asked Apr 11, 2011 at 4:36 Mack 3352 gold badges4 silver badges15 bronze badges

6 If you're already using something as adventurous as Raphaël, you should consider also using its friend: jQuery. It handles all the ugly parts like document.body.offsetWidth vs window.innerWidth automatically. – thirtydot Commented Apr 11, 2011 at 4:41
@thirtydot thanks for your reply. Would you be able to suggest a line of jQuery code that could place my elements correctly? – Mack Commented Apr 11, 2011 at 5:29

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

You're not setting the left and top properties correctly, you need to add the unit e.g 'px' for pixels.

document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i] + 'px';
document.getElementById("block"+i).style.top  = BLOCK_POS_Y[i] + 'px';

"Would you be able to suggest a line of jQuery code that could place my elements correctly?"

The following code uses jQuery and will center an absolutely positioned element on load and on window resize.

http://jsfiddle/Fu3L6/

HTML...

<div id="element">Test</div>

CSS...

#element {
  position: absolute;
  background-color: red;
  width: 200px;
}

jQuery...


$(document).ready(function () {

    centerInViewport('#element');

    $(window).resize(function () {
        centerInViewport('#element');
    });

});

function centerInViewport(e) {
    $docWidth = $(document).width();
    $elWidth = $(e).width();
    $offset = ($docWidth - $elWidth) / 2;
    $(e).css("marginLeft", $offset + "px");
}

本文标签： htmlPosition elements on screen using JavascriptStack Overflow

版权声明：本文标题：html - Position elements on screen using Javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745458958a2659234.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

html - Position elements on screen using Javascript - Stack Overflow

2 Answers 2

更多相关文章