[javascript] 해상도에 따라 스크롤 메뉴에 문제가 발생합니다. 정보
그누보드 [javascript] 해상도에 따라 스크롤 메뉴에 문제가 발생합니다.본문
tail.php 에서 스크롤 메뉴를 include 시켰는데요
대부분의 스크롤 소스는 화면 해상도에 따라 문제가 발생한다고 하는군요
해상도에 따라 left, right 공백을 조절하여 출력하는 소스를 가지고 있으신분이나
해결할수 있는 방법을 알려주세요
아래는 소스는 제가 스크롤메뉴에 사용할 스크립트 소스입니다.
<script language="JavaScript">
var stmnGAP1 = 135; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;
while (i < cLen) {
var j = i + labelLen;
if (document.cookie.substring(i, j) == label) {
var cEnd = document.cookie.indexOf(";", j);
if (cEnd == -1) cEnd = document.cookie.length;
return unescape(document.cookie.substring(j, cEnd));
}
i++;
}
return "";
}
function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
stmnRefreshTimer = stmnActivateSpeed;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
function ToggleAnimate()
{
if (ANIMATE.checked) {
RefreshStaticMenu();
SaveCookie("ANIMATE", "true", 300);
}
else {
clearTimeout(stmnTimer);
STATICMENU.style.top = stmnGAP1;
SaveCookie("ANIMATE", "false", 300);
}
}
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") {
ANIMATE.checked = false;
STATICMENU.style.top = document.body.scrollTop + stmnGAP1;
}
else {
ANIMATE.checked = true;
STATICMENU.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
}
}
</script>
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v5.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p> </p>
<table border="1" width="817">
<tr>
<td width="807" height="716">
<p> </p>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><!-- 스크롤 메뉴 정의 시작 -->
<div id="STATICMENU" style="width:148px; height:200px; position:absolute; left:831px; top:62px; z-index:100;">
...이자리는 본인이 알아서 움직이게될 메뉴구성...
<!-- 애니메이션 유무를 체크하는 부분, 체그박스로 나타남 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> 메뉴이동하기<br>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
<!-- 스크롤메뉴를 가동하는 자바스크립트(수정금지) -->
<SCRIPT language="javascript">
InitializeStaticMenu();
</SCRIPT>
대부분의 스크롤 소스는 화면 해상도에 따라 문제가 발생한다고 하는군요
해상도에 따라 left, right 공백을 조절하여 출력하는 소스를 가지고 있으신분이나
해결할수 있는 방법을 알려주세요
아래는 소스는 제가 스크롤메뉴에 사용할 스크립트 소스입니다.
<script language="JavaScript">
var stmnGAP1 = 135; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;
while (i < cLen) {
var j = i + labelLen;
if (document.cookie.substring(i, j) == label) {
var cEnd = document.cookie.indexOf(";", j);
if (cEnd == -1) cEnd = document.cookie.length;
return unescape(document.cookie.substring(j, cEnd));
}
i++;
}
return "";
}
function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
stmnRefreshTimer = stmnActivateSpeed;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
function ToggleAnimate()
{
if (ANIMATE.checked) {
RefreshStaticMenu();
SaveCookie("ANIMATE", "true", 300);
}
else {
clearTimeout(stmnTimer);
STATICMENU.style.top = stmnGAP1;
SaveCookie("ANIMATE", "false", 300);
}
}
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") {
ANIMATE.checked = false;
STATICMENU.style.top = document.body.scrollTop + stmnGAP1;
}
else {
ANIMATE.checked = true;
STATICMENU.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
}
}
</script>
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v5.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p> </p>
<table border="1" width="817">
<tr>
<td width="807" height="716">
<p> </p>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><!-- 스크롤 메뉴 정의 시작 -->
<div id="STATICMENU" style="width:148px; height:200px; position:absolute; left:831px; top:62px; z-index:100;">
...이자리는 본인이 알아서 움직이게될 메뉴구성...
<!-- 애니메이션 유무를 체크하는 부분, 체그박스로 나타남 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> 메뉴이동하기<br>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
<!-- 스크롤메뉴를 가동하는 자바스크립트(수정금지) -->
<SCRIPT language="javascript">
InitializeStaticMenu();
</SCRIPT>
댓글 전체