La Position des éléments à l'écran à l'aide de Javascript

Je suis d'essayer d'utiliser le Javascript pour la position de certains de mes éléments sur l'écran de la fenêtre. Je suis en train de faire ce pour s'assurer que ce que jamais les dimensions de l'écran utilisateurs, mes éléments seront toujours dans le centre.

Je sais que rembourrage & margin peut également atteindre cet objectif, mais je suis en utilisant une mesure du mouvement script appelé raphael.js, & dans le but de faire avancer mes éléments que j'ai besoin de mes éléments absolument (c'est un accueil personnalisé de la page, où vous cliquez sur les blocs(qui sont des liens) & ils volent hors de l'écran).

Ma fonction javascript pour déplacer mes éléments ne parvient pas à déplacer mes éléments. Toutes les suggestions sur la manière de positionner mes éléments à l'aide de javascript serait vraiment utile.

<!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">
<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>
  • Si vous utilisez déjà quelque chose d'aussi aventureuse que Raphaël, vous devriez envisager également à l'aide de son ami: jQuery. Il gère l'ensemble de la vilaine les pièces comme les document.body.offsetWidth vs window.innerWidth automatiquement.
  • merci pour votre réponse. Seriez-vous en mesure de proposer une ligne de code jQuery qui pourrait placer mes éléments correctement?
InformationsquelleAutor Mack | 2011-04-11