자바 스크립트를 사용하여 화면에 요소 배치

Javascript를 사용하여 일부 요소를 화면/창에 배치하려고합니다. 나는 항상 사용자 화면의 크기가 무엇인지, 내 요소가 항상 가운데에 있는지 확인하기 위해이 작업을 수행하고 있습니다.자바 스크립트를 사용하여 화면에 요소 배치

나는 패딩 & 이익률도 있지만, 순서대로 내가 절대적으로 내 요소를 설정해야 내 요소를 이동 raphael.js라는 사용자 지정 운동 스크립트, &를 사용하고 (그 사용자 정의 홈 페이지이, 을 달성 할 수 있다는 것을 알고 , 블록 (링크) &을 클릭하면 화면에서 벗어납니다.

내 요소를 이동시키는 자바 스크립트 기능이 내 요소를 이동하지 못합니다. 자바 스크립트를 사용하여 내 요소를 배치하는 방법에 대한 제안은 정말 도움이 될 것입니다. 당신은 제대로 left 및 top 속성을 설정하지 않을

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

출처

2011-04-11 Mack

것은 이미 같은 모험 뭔가를 사용하는 경우 Raphaël로서, 당신은 또한 미국을 고려해야합니다. 그 친구 : [jQuery] (http://jquery.com/). 'document.body.offsetWidth'와'window.innerWidth'와 같은 추악한 부분을 자동으로 처리합니다. – thirtydot

답장을 보내 주셔서 감사합니다. 내 요소를 올바르게 배치 할 수있는 jQuery 코드 줄을 제안 할 수 있습니까? – Mack

, 당신은 픽셀 단위 예컨대 '픽셀'을 추가해야합니다.

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

출처

2011-04-11 05:54:21 Jonathan

"제대로 내 요소를 배치 할 수 있습니다 jQuery 코드의 라인을 제시 할 수 있을까?"

다음 코드는 jQuery를 사용하고로드시 및 윈도우 크기 조정시 절대 위치 요소를 가운데에 배치합니다.

http://jsfiddle.net/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"); 
}

출처

2011-04-12 08:18:00 wdm

이게 굉장합니다. 그래프로 만든 요소와 작동하지 않는다는 것만 제외하면 – Jason

var를 사용하여 변수를 초기화하지 않으므로 전역 변수가됩니다. –

자바 스크립트를 사용하여 화면에 요소 배치

답변

관련 문제