중앙정렬시 스크롤메뉴의 상대적위치 정보
중앙정렬시 스크롤메뉴의 상대적위치본문
중앙정렬로된 홈피에 스크롤메뉴를 우측에 붙일려고합니다. 절대적위치(아래1075px)로하니 해상도가 변경되면 붙었던것이 떨어집니다. 해상도와 상관없이 홈페이지의 메인테이블과 딱붙게끔하고 싶습니다. 검색해서 올려주신소스로도 해봤는데 실력이 딸려서리 잘안되네요. 제생각엔 절대위치가 아닌 상대위치로 해줘야될것 같은데 가령 홈피의 메인테이블이 900이면 중앙에서 오른쪽으로 450위치에 오면 해상도와 상관없이 딱붙지 않을까요? 고수님들의 해박한 지식 부탁드립니다.
아래는 제가쓰고있는 소스이구요
<!-- 따라다니는 메뉴 -->
<td align="top">
<div style="width:50px; height:57px; position:absolute; left:1075px; top:350px; z-index:2;">
<div id="divMenu" style="position:absolute;">
<td align="top">
<div style="width:50px; height:57px; position:absolute; left:1075px; top:350px; z-index:2;">
<div id="divMenu" style="position:absolute;">
<table width="50" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="57">
<div align="center"><a href="#top"><IMG SRC="../img/narrow.gif" name="Image60" BORDER=0 width="50" height="57"></a></div></td>
</tr>
</table>
<tr>
<td height="57">
<div align="center"><a href="#top"><IMG SRC="../img/narrow.gif" name="Image60" BORDER=0 width="50" height="57"></a></div></td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script language="JavaScript" type="text/JavaScript">
<!--
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";
var maxX, bodywidth;
var div_left,div_top;
var xMargin,yMargin;
var yBottom=50000;//위로부터의 높이
bodywidth = 0; //Main Table의 넓이
maxX = screen.width;
<!--
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";
var maxX, bodywidth;
var div_left,div_top;
var xMargin,yMargin;
var yBottom=50000;//위로부터의 높이
bodywidth = 0; //Main Table의 넓이
maxX = screen.width;
xMargin = 0; //테이블에서부터의 우측여백
yMargin = 0; //상단여백
yMargin = 0; //상단여백
div_left = bodywidth + ((maxX-bodywidth) /2)+xMargin;
div_top = (isNS ? window.pageYOffset : document.body.scrollTop) + 96;
div_top = (isNS ? window.pageYOffset : document.body.scrollTop) + 96;
if (isNS4)
{
var divMenu = document["divMenu"];
divMenu.top = top.pageYOffset + 0;
divMenu.visibility = "visible";
moveRightEdge();
}
else if (isDOM)
{
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 3;
divMenu.style.visibility = "visible";
moveRightEdge();
}
function getRef(id)
{
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
x = getRef(id);
return (isNS4 ? getRef(id) : getRef(id).style);
}
x = getRef(id);
return (isNS4 ? getRef(id) : getRef(id).style);
}
function moveRightEdge()
{
{
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
var maxX ;
var xMenuFrom, xMenuTo, xOffset;
if (isNS4)
{
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset + yMargin; // 위쪽위치
}
else if (isDOM)
{
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) + yMargin; // 위쪽위치
}
timeoutNextCheck = 500;
if( yMenuFrom <yBottom || yMenuTo <yBottom ) {
if (yMenuFrom != yMenuTo)
{
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
if (yMenuTo < yMenuFrom)
{ yOffset = -yOffset; }
if (isNS4)
{ divMenu.top += yOffset; }
else if (isDOM)
{
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
}
}
{ yOffset = -yOffset; }
if (isNS4)
{ divMenu.top += yOffset; }
else if (isDOM)
{
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
}
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
-->
</script>
<!-- 따라다니는 메뉴 끝 -->
-->
</script>
<!-- 따라다니는 메뉴 끝 -->
댓글 전체
var mainWidth = 900; // 메인너비
var x = (document.body.clientWidth / 2) + (mainWidth / 2);
var x = (document.body.clientWidth / 2) + (mainWidth / 2);
어디에 넣으라는 말씀이신지 아래처럼 해봤는데 해상도를 낮추니 떨어지네요
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";
var mainWidth = 900; // 메인너비
var x = (document.body.clientWidth / 2) + (mainWidth / 2);
var maxX, bodywidth;
var div_left,div_top;
var xMargin,yMargin;
var yBottom=50000;//위로부터의 높이
bodywidth = 0; //Main Table의 넓이
maxX = screen.width;
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";
var mainWidth = 900; // 메인너비
var x = (document.body.clientWidth / 2) + (mainWidth / 2);
var maxX, bodywidth;
var div_left,div_top;
var xMargin,yMargin;
var yBottom=50000;//위로부터의 높이
bodywidth = 0; //Main Table의 넓이
maxX = screen.width;
이렇게 함 해보세요..
div_left = (document.body.clientWidth / 2) + (900 / 2);
div_left = (document.body.clientWidth / 2) + (900 / 2);
마찬가지네요^^
암튼 답변 감사드립니다.
암튼 답변 감사드립니다.
아래의 소스를 메인테이블의 안에 집어 넣으세요..
그리고 위치값을 조정하시면 될것입니다.
실제로 사용한 싸이트는 http://www.gogong.net입니다.
성공하시길~~~
<!-- 오른쪽 레이어 부분 START -->
<DIV id=event_left_01 style="position:relative; left: 0px; top: -350px;" >
<DIV id=divMenu style="Z-INDEX: 1; LEFT: 685px; VISIBILITY: visible; WIDTH: 56px; POSITION: absolute; TOP: 0px; HEIGHT: 364px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div></div>
<SCRIPT language=JavaScript >
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
//var scrollerHeight = 88;
//var puaseBetweenImages = 3000;
//var imageIdx = 0;
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) + 0; // 위쪽 위치
//jjj 높이보정
if (yMenuTo<256) yMenuTo = 256;
}
timeoutNextCheck = 100;
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
divMenu.top += yOffset;
else if (isDOM)
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ('moveRightEdge()', timeoutNextCheck);
}
if (isDOM) {
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 0;
divMenu.style.visibility = "visible";
moveRightEdge();
}
</SCRIPT>
<!-- 오른쪽 레이어 부분 여기까지 -->
그리고 위치값을 조정하시면 될것입니다.
실제로 사용한 싸이트는 http://www.gogong.net입니다.
성공하시길~~~
<!-- 오른쪽 레이어 부분 START -->
<DIV id=event_left_01 style="position:relative; left: 0px; top: -350px;" >
<DIV id=divMenu style="Z-INDEX: 1; LEFT: 685px; VISIBILITY: visible; WIDTH: 56px; POSITION: absolute; TOP: 0px; HEIGHT: 364px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div></div>
<SCRIPT language=JavaScript >
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
//var scrollerHeight = 88;
//var puaseBetweenImages = 3000;
//var imageIdx = 0;
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) + 0; // 위쪽 위치
//jjj 높이보정
if (yMenuTo<256) yMenuTo = 256;
}
timeoutNextCheck = 100;
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
divMenu.top += yOffset;
else if (isDOM)
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ('moveRightEdge()', timeoutNextCheck);
}
if (isDOM) {
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 0;
divMenu.style.visibility = "visible";
moveRightEdge();
}
</SCRIPT>
<!-- 오른쪽 레이어 부분 여기까지 -->
드디어 해결했습니다.
유창화님 뜨락의이름님 감사드립니다.
http://www.sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=25171&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%BD%BA%C5%A9%B7%D1&sop=and&page=5
<!-- 따라다니는 메뉴 -->
<div id=DivMovingLayer style='position:absolute;left:0px;top:0px; z-index:8;display:none;'>
<table width="50" border="0" cellspacing="0" cellpadding="0"> ---->메뉴부분/저는 탑버튼
<tr>
<td height="57">
<div align="center"><a href="#top"><IMG SRC="../img/narrow.gif" name="Image60" BORDER=0 width="50" height="57"></a></div></td>
</tr>
</table>
</div>
<script language='javascript'>
//움직이는 레이어
//사용함수
function ResetRemocon(){
var DivMovingLayerYFrom, DivMovingLayerYTo, OffsetY, ResetTime;
ResetTime = 100;
if (DivMovingLayerRule == 'center'){
//해상도 기준, 가운데 에서 x만큼 떨어진 곳에 위치
if (document.body.clientWidth < parseInt ((ContentsWidth + 2 * DivMovingLayerX + 2 * LayerWidth) / 2, 10) - DivMovingLayerX - LayerWidth) {
DivMovingLayer.style.left = parseInt (ContentsWidth / 2, 10) + DivMovingLayerX + "px";
}
else {
DivMovingLayer.style.left = (DivMovingLayerX + (document.body.clientWidth / 2)) + "px";
}
}
else if (DivMovingLayerRule == 'left'){
//해상도와 무관, 왼쪽 에서 x만큼 떨어진 곳에 위치
DivMovingLayer.style.left = (DivMovingLayerX) + "px";
}
DivMovingLayerYFrom = parseInt (DivMovingLayer.style.top, 10);
DivMovingLayerYTo = DivMovingLayerY + document.body.scrollTop + 1;
if ( DivMovingLayerYFrom != DivMovingLayerYTo ) {
OffsetY = Math.ceil( Math.abs( DivMovingLayerYTo - DivMovingLayerYFrom ) / 20 );
if ( DivMovingLayerYTo < DivMovingLayerYFrom )
OffsetY = -OffsetY;
DivMovingLayer.style.top = (DivMovingLayerYFrom + OffsetY) + "px";
ResetTime = 10;
}
setTimeout ("ResetRemocon()", ResetTime);
}
function SetRemocon() {
DivMovingLayer.style.display = "block";
DivMovingLayer.style.top = (DivMovingLayerY + document.body.scrollTop + 1) + "px";
ResetRemocon();
return true;
}
function NoneRemocon() {
DivMovingLayer.style.display = "none";
}
if (typeof document.body == "undefined")
document.body = document.getElementsByTagName("BODY")[0];
var DivMovingLayer = document.getElementById("DivMovingLayer");
//환경설정
var ContentsWidth = 900;//움직이는 레이어를 제외한 콘텐츠 너비, 가운데 정렬에만 해당
var LayerWidth = 50;//움직이는 메뉴의 너비, 가운데 정렬에만 해당
var DivMovingLayerX = 450;//메뉴가 위치할 레프트 값(위에 900의 반값)
var DivMovingLayerY = 500;//메뉴가 위치할 탑 값
var DivMovingLayerRule = 'center';//center -->가운데 정렬을 기준으로 x만큼, left --> 레프트 정렬을 기준으로 x만큼
//레이어 보이기
SetRemocon();
</script>
<!-- 따라다니는 메뉴 끝 -->
유창화님 뜨락의이름님 감사드립니다.
http://www.sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=25171&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%BD%BA%C5%A9%B7%D1&sop=and&page=5
<!-- 따라다니는 메뉴 -->
<div id=DivMovingLayer style='position:absolute;left:0px;top:0px; z-index:8;display:none;'>
<table width="50" border="0" cellspacing="0" cellpadding="0"> ---->메뉴부분/저는 탑버튼
<tr>
<td height="57">
<div align="center"><a href="#top"><IMG SRC="../img/narrow.gif" name="Image60" BORDER=0 width="50" height="57"></a></div></td>
</tr>
</table>
</div>
<script language='javascript'>
//움직이는 레이어
//사용함수
function ResetRemocon(){
var DivMovingLayerYFrom, DivMovingLayerYTo, OffsetY, ResetTime;
ResetTime = 100;
if (DivMovingLayerRule == 'center'){
//해상도 기준, 가운데 에서 x만큼 떨어진 곳에 위치
if (document.body.clientWidth < parseInt ((ContentsWidth + 2 * DivMovingLayerX + 2 * LayerWidth) / 2, 10) - DivMovingLayerX - LayerWidth) {
DivMovingLayer.style.left = parseInt (ContentsWidth / 2, 10) + DivMovingLayerX + "px";
}
else {
DivMovingLayer.style.left = (DivMovingLayerX + (document.body.clientWidth / 2)) + "px";
}
}
else if (DivMovingLayerRule == 'left'){
//해상도와 무관, 왼쪽 에서 x만큼 떨어진 곳에 위치
DivMovingLayer.style.left = (DivMovingLayerX) + "px";
}
DivMovingLayerYFrom = parseInt (DivMovingLayer.style.top, 10);
DivMovingLayerYTo = DivMovingLayerY + document.body.scrollTop + 1;
if ( DivMovingLayerYFrom != DivMovingLayerYTo ) {
OffsetY = Math.ceil( Math.abs( DivMovingLayerYTo - DivMovingLayerYFrom ) / 20 );
if ( DivMovingLayerYTo < DivMovingLayerYFrom )
OffsetY = -OffsetY;
DivMovingLayer.style.top = (DivMovingLayerYFrom + OffsetY) + "px";
ResetTime = 10;
}
setTimeout ("ResetRemocon()", ResetTime);
}
function SetRemocon() {
DivMovingLayer.style.display = "block";
DivMovingLayer.style.top = (DivMovingLayerY + document.body.scrollTop + 1) + "px";
ResetRemocon();
return true;
}
function NoneRemocon() {
DivMovingLayer.style.display = "none";
}
if (typeof document.body == "undefined")
document.body = document.getElementsByTagName("BODY")[0];
var DivMovingLayer = document.getElementById("DivMovingLayer");
//환경설정
var ContentsWidth = 900;//움직이는 레이어를 제외한 콘텐츠 너비, 가운데 정렬에만 해당
var LayerWidth = 50;//움직이는 메뉴의 너비, 가운데 정렬에만 해당
var DivMovingLayerX = 450;//메뉴가 위치할 레프트 값(위에 900의 반값)
var DivMovingLayerY = 500;//메뉴가 위치할 탑 값
var DivMovingLayerRule = 'center';//center -->가운데 정렬을 기준으로 x만큼, left --> 레프트 정렬을 기준으로 x만큼
//레이어 보이기
SetRemocon();
</script>
<!-- 따라다니는 메뉴 끝 -->
