묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[자바스크립? #2] 움직이는 메뉴가 화면을 덥치네요 ㅠ ㅠ
2003.02.24 09:30
<html>
<head>
<title>I'll make you Real... </title>
<script language="JavaScript">
<!--
var stmnLEFT = 60; // 스크롤메뉴의 좌측 위치. 필요 없을 경우 삭제
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
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);
}
// 메뉴 ON/OFF 하기
function ToggleAnimate()
{
if (document.all.ANIMATE.checked) { // 이동하기 버튼이 체크되었다면
RefreshStaticMenu(); // 메뉴위치를 다시 조정
SaveCookie("ANIMATE", "true", 300); // 이동이 ON 상태라고 쿠키를 설정
}
else { // 아니라면... (이동하기 버튼이 체크되어 있지 않으면)
clearTimeout(stmnTimer); // 이동용 타이머 해제
STATICMENU.style.top = stmnGAP1; // 메뉴의 위치를 상단으로 옮긴다.
SaveCookie("ANIMATE", "false", 300); // 이동상태가 "OFF" 임
}
}
// 메뉴 초기화
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") { // 이동상태가 off 상태라면
document.all.ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
document.all.ANIMATE.checked = true; // 체크표시를 하고
STATICMENU.style.top = document.body.scrollTop + stmnBASE; // 기본위치로 이동한다.
RefreshStaticMenu(); // 스크립트 가동
}
STATICMENU.style.left = stmnLEFT; // 메뉴 왼쪽 위치 초기화. 필요없을 경우 삭제
}
//-->
</script>
</head>
<body>
<tr>
<td width="964">
<table align="center" cellpadding="0" cellspacing="0" width="817" bordercolordark="white" bordercolorlight="#C1C1C1">
<tr>
<td width="802" colspan="3" bgcolor="#DEDEDE" height="12">
<p></p>
</td>
<td height="12" width="15"></td>
</tr>
<tr>
<td width="125">
<p align="center"> </p>
</td>
<td width="7"> </td>
<td width="670">
<p align="left">
</p>
</td>
<td width="15" align="left" valign="center" ><a href="http://www.myreal.co.kr/zb/zboard.php?id=link_gallery"><img src="image/b_tag.jpg"
width="15" height="110" border="0"></a></td>
</tr>
<tr>
<td width="125" align="center" valign="top" rowspan="2">
<p> </p>
// 주석 입니다..^^;; 움직이는 메뉴 적용를 여기다가 적용했습니다.
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
<table cellpadding="0" cellspacing="0" border="1" style="background:#cccccc; width:200px;">
<tr>
<td width="118">
<p><? print_outlogin("아웃로그인 스킨", 1, 10) ?> </p>
</td>
</tr>
<tr>
<td width="118">
<p> </p>
</td>
</tr>
</table>
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
// 주석 : ^^;;; 움직이는 메뉴 끝... 근데 왜 화면을 덮치지.. ;;;
</td>
<td width="7" align="center" valign="middle" rowspan="2">
<p> </p>
</td>
<td width="670">
<p> </p>
</td>
<td width="15" rowspan="2"></td>
</tr>
<tr>
<td width="670">
<table cellpadding="0" cellspacing="0" width="649" align="center">
<tr>
<td width="649" colspan="3" align="left" valign="top">
'최근 게시판
</td>
</tr>
<tr>
<td width="802" colspan="3" bgcolor="#DEDEDE" height="15">
'하부 글쓰기
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
.... 이상이 개략적인 소스 인데요.
메인 테이블의 왼쪽 셀에 로그인 스킨과 하위 메뉴가 들어갈 테이블을 만들고
그 테이블 이 스크롤을 따라서 이동하게 하려는 모냥새로 꾸미려 합니다...
( 아.. 이거 제대로 설명 드린 건지.. ;;;; )
소스 중간에 보시면, 말도 안되는 주석을 달은 부분을 주목해 주세요.
그렇게 해 놓으니까, 익스플러로의 화면을 줄이니까,
로그인 스킨이 메인 화면을 덮치네요.
메인 테이블의 왼쪽 셀에 가만히 붙어 있질 않고.. 메인테이블의 가운데 셀을 침범해서 지금 곤란하답니다. ;;;;;
웅... 이거 고치고 개장하려고 하는데,
좀 ... 늦어지네여 ^^;;;;;
가르침을 주시면 감사하겠숩니다. (__)..
<head>
<title>I'll make you Real... </title>
<script language="JavaScript">
<!--
var stmnLEFT = 60; // 스크롤메뉴의 좌측 위치. 필요 없을 경우 삭제
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
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);
}
// 메뉴 ON/OFF 하기
function ToggleAnimate()
{
if (document.all.ANIMATE.checked) { // 이동하기 버튼이 체크되었다면
RefreshStaticMenu(); // 메뉴위치를 다시 조정
SaveCookie("ANIMATE", "true", 300); // 이동이 ON 상태라고 쿠키를 설정
}
else { // 아니라면... (이동하기 버튼이 체크되어 있지 않으면)
clearTimeout(stmnTimer); // 이동용 타이머 해제
STATICMENU.style.top = stmnGAP1; // 메뉴의 위치를 상단으로 옮긴다.
SaveCookie("ANIMATE", "false", 300); // 이동상태가 "OFF" 임
}
}
// 메뉴 초기화
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") { // 이동상태가 off 상태라면
document.all.ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
document.all.ANIMATE.checked = true; // 체크표시를 하고
STATICMENU.style.top = document.body.scrollTop + stmnBASE; // 기본위치로 이동한다.
RefreshStaticMenu(); // 스크립트 가동
}
STATICMENU.style.left = stmnLEFT; // 메뉴 왼쪽 위치 초기화. 필요없을 경우 삭제
}
//-->
</script>
</head>
<body>
<tr>
<td width="964">
<table align="center" cellpadding="0" cellspacing="0" width="817" bordercolordark="white" bordercolorlight="#C1C1C1">
<tr>
<td width="802" colspan="3" bgcolor="#DEDEDE" height="12">
<p></p>
</td>
<td height="12" width="15"></td>
</tr>
<tr>
<td width="125">
<p align="center"> </p>
</td>
<td width="7"> </td>
<td width="670">
<p align="left">
</p>
</td>
<td width="15" align="left" valign="center" ><a href="http://www.myreal.co.kr/zb/zboard.php?id=link_gallery"><img src="image/b_tag.jpg"
width="15" height="110" border="0"></a></td>
</tr>
<tr>
<td width="125" align="center" valign="top" rowspan="2">
<p> </p>
// 주석 입니다..^^;; 움직이는 메뉴 적용를 여기다가 적용했습니다.
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
<table cellpadding="0" cellspacing="0" border="1" style="background:#cccccc; width:200px;">
<tr>
<td width="118">
<p><? print_outlogin("아웃로그인 스킨", 1, 10) ?> </p>
</td>
</tr>
<tr>
<td width="118">
<p> </p>
</td>
</tr>
</table>
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
// 주석 : ^^;;; 움직이는 메뉴 끝... 근데 왜 화면을 덮치지.. ;;;
</td>
<td width="7" align="center" valign="middle" rowspan="2">
<p> </p>
</td>
<td width="670">
<p> </p>
</td>
<td width="15" rowspan="2"></td>
</tr>
<tr>
<td width="670">
<table cellpadding="0" cellspacing="0" width="649" align="center">
<tr>
<td width="649" colspan="3" align="left" valign="top">
'최근 게시판
</td>
</tr>
<tr>
<td width="802" colspan="3" bgcolor="#DEDEDE" height="15">
'하부 글쓰기
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
.... 이상이 개략적인 소스 인데요.
메인 테이블의 왼쪽 셀에 로그인 스킨과 하위 메뉴가 들어갈 테이블을 만들고
그 테이블 이 스크롤을 따라서 이동하게 하려는 모냥새로 꾸미려 합니다...
( 아.. 이거 제대로 설명 드린 건지.. ;;;; )
소스 중간에 보시면, 말도 안되는 주석을 달은 부분을 주목해 주세요.
그렇게 해 놓으니까, 익스플러로의 화면을 줄이니까,
로그인 스킨이 메인 화면을 덮치네요.
메인 테이블의 왼쪽 셀에 가만히 붙어 있질 않고.. 메인테이블의 가운데 셀을 침범해서 지금 곤란하답니다. ;;;;;
웅... 이거 고치고 개장하려고 하는데,
좀 ... 늦어지네여 ^^;;;;;
가르침을 주시면 감사하겠숩니다. (__)..
댓글 0
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
se루돌프 |
메뉴와 분류쪽 추가 및 수정이 안되는 문제
[4]
![]() | 2009.04.30 by se루돌프 |
Qwiff | 마이그레이션에서 포토게시판 전환작업을 할때 첨부파일이 | |
으아악. | 로그인 위젯을 다운 받았는데 어떻게 적용하는지 방법좀 알려주세요 [3] | 2009.04.30 by 캉호 |
구기지 |
진아아빠님 죄송하지만 질문 다시 한번 더 드릴게여
[2]
![]() | 2009.04.30 by 구기지 |
더글더글 | 닉네임이미지 설정 [2] | 2009.04.30 by 더글더글 |
bluesunwon | 회원연동 [2] | 2009.04.30 by bluesunwon |
고릴라2 | 뉴질랜드 에서..홈페이지 메인 초기화면 에 들어갈 코너 디자인 을 의뢰 하고 싶습니다 [1] | 2009.04.30 by 건즈 |
건즈 | 블로그 api/blog api에 접속하니 이런 페이지가 | |
구기지 |
꼭!!좀 답변 부탁드리겠습니다.
[6]
![]() | 2009.04.30 by 구기지 |
밀래 | 플래쉬로 XML데이타를 가지고 가려 하는데 1.2.0이후로 확장변수 테이블이 넣기.. | |
쿄우짱짱 | 언어변경 말입니다. [1] | 2009.04.30 by thejeon |
세르 | XE 기본 게시판 스킨에 레벨 아이콘을 달고 싶습니다! [1] | 2009.04.30 by 허당™ |
날다나무 | 홈페이지 로긴오류 | |
파란벌레 | 책갈피 기능 | |
켄트이즈 | 본문내용에 이미지 첨부시 | |
매실茶 |
IE8에서 이렇게 보이는 건 버그인가요?
[2]
![]() | 2009.04.30 by 매실茶 |
김재원687 | 1.0.4 에서 1.1.5로 업데이트하려고 하는데요. | |
flon | 상태표시줄에 스크립트를 넣었는데 실행하면 안보여요 | |
댓글이 | 댓글 정렬방식 [2] | 2009.04.30 by 댓글이 |
hakyuhakyu | 이미지 이름 기능이 안됩니다. [1] | 2009.04.30 by gold.geum |