웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
특정위치에 떠있는 레이어 (슬라이딩 애드콘) - 노프레임홈에서의 문제해결
2004.05.03 05:12
특정위치에 떠있는 레이어 (슬라이딩 애드콘)
특정위치에 떠있는 메뉴나 아웃로그인 처럼 스크롤 하더라도 해당위치에 계속 떠있게 하는 소스입니다.
이 게시판에 이와 관련된 소스가 여럿 있었지만
제가 직면했던 두가지 문제를 해결하기 위해 이곳의 소스를 수정해 보았습니다.
1. 헤더와 풋터가 있는 제로보드 노프레임 홈페이지에서 스크립트 함수가 안먹던 문제...
2. 레이어가 절대적 위치(예를 들어 좌측상단, 우측상단 등)가 아닌 상대적 위치(예를 들어 우측하단)에 있을 경우
더욱 쉽게 구현하거나 하는 방법이 있을지도 모르지만..
어째든 저같은 초보들이 힘겨워하는 것을 돕고자 몇 자 적어봅니다.
------------------------------------------------------------
여기에서는 화면의 우측하단에 레이어가 위치하는 경우를 예로 들겠습니다. (20*20인 그림을 레이어위에 올립니다.)
홈페이지 폭이 800 정도 된다고 하고
레이어의 left는 802 로 하겠습니다.
레어어의 top은 익스플로러 높이에서 (레이어의 높이를 감안하여 )조금 뺀 값으로 하면 되겠죠...
여기서는 20*20인 그림이므로 익스플로러 높이 -25 하겠습니다.
1. 자바스크립트 소스
<script language="javascript">
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
action = window.setInterval("MoveAdcon()",1); //애드콘 무빙함수 실행
function MoveAdcon() {
//애드콘 무빙함수
diffY = document.body.scrollTop;
diffX = 0;
if (diffY != lastScrollY) {
percent = .2 * (diffY - lastScrollY);
if (percent > 0) {
percent = Math.ceil(percent);
} else {
percent = Math.floor(percent);
}
document.all.divMenu.style.pixelTop += percent;
lastScrollY = lastScrollY + percent;
}
if (diffX != lastScrollX) {
percent = .2 * (diffX - lastScrollX);
if (percent > 0) {
percent = Math.ceil(percent);
} else {
percent = Math.floor(percent);
}
document.all.divMenu.style.pixelLeft += percent;
lastScrollY = lastScrollY + percent;
}
}
document.onfocusin=PosAdcon; //애드콘 초기위치지정함수 실행
function PosAdcon() {
//애드콘 초기위치, 폼 리사이즈시 위치
divMenu.style.top = document.body.scrollTop + document.body.clientHeight - 25;
divMenu.style.display = '';
divMenu.style.visibility = "visible";
}
</script>
[설명]
function PosAdcon() 부분은 레이어가 상대적 위치에 존재해야 하므로 문서가 열릴때나 익스플로러를 리사이즈한 경우의 위치를 지정해주는 함수입니다.
document.onfocusin=PosAdcon; 요거는 문서가 열릴때 PosAdcon 함수가 실행되도록....
노프레임홈에서 방명록형식 게시판이나 글보기 화면에서 BODY의 ONLOAD 이벤트가 안먹히더군요....그래서 document.onfocusin=PosAdcon;로 처리..
function MoveAdcon() 부분은 스크롤시 레이어를 움직여주는 함수입니다.
action = window.setInterval("MoveAdcon()",1); 폼에서 위함수를 계속 실행해주도록 처리
(기타 다른방식의 처리들은 노프레임홈에서 안먹히더군요)
2. 실제 화면에 출력되는 레이어 (여기서는 20*20의 그림입니다.)
<DIV id=divMenu style="LEFT: 802px; VISIBILITY: hidden; WIDTH: 20px; height: 20px; POSITION: absolute">
<A href="#"><IMG src="../img/img_top.gif" height=20 width=20 border=0></A>
</DIV>
3. 리사이즈시 PosAdcon 함수의 실행에 대한 처리
화면 리사이즈시에 실행되야하므로 body 태그에 onresize이벤트 처리합니다. 즉,
<body onresize="PosAdcon();">
조그만 고치시면 자신의 홈에 잘 맞게 사용하실 수 있을겁니다.
다음 주소는 저의 홈페이지인데, 20*20의 이미지가 우측 하단에 위치하는 예입니다. (x,y 좌표 모두 상대적 위치입니다.)
http://tou.zetyx.net/
(극히 개인적인 홈이므로 그냥 곁모양만 보세요.)
특정위치에 떠있는 메뉴나 아웃로그인 처럼 스크롤 하더라도 해당위치에 계속 떠있게 하는 소스입니다.
이 게시판에 이와 관련된 소스가 여럿 있었지만
제가 직면했던 두가지 문제를 해결하기 위해 이곳의 소스를 수정해 보았습니다.
1. 헤더와 풋터가 있는 제로보드 노프레임 홈페이지에서 스크립트 함수가 안먹던 문제...
2. 레이어가 절대적 위치(예를 들어 좌측상단, 우측상단 등)가 아닌 상대적 위치(예를 들어 우측하단)에 있을 경우
더욱 쉽게 구현하거나 하는 방법이 있을지도 모르지만..
어째든 저같은 초보들이 힘겨워하는 것을 돕고자 몇 자 적어봅니다.
------------------------------------------------------------
여기에서는 화면의 우측하단에 레이어가 위치하는 경우를 예로 들겠습니다. (20*20인 그림을 레이어위에 올립니다.)
홈페이지 폭이 800 정도 된다고 하고
레이어의 left는 802 로 하겠습니다.
레어어의 top은 익스플로러 높이에서 (레이어의 높이를 감안하여 )조금 뺀 값으로 하면 되겠죠...
여기서는 20*20인 그림이므로 익스플로러 높이 -25 하겠습니다.
1. 자바스크립트 소스
<script language="javascript">
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
action = window.setInterval("MoveAdcon()",1); //애드콘 무빙함수 실행
function MoveAdcon() {
//애드콘 무빙함수
diffY = document.body.scrollTop;
diffX = 0;
if (diffY != lastScrollY) {
percent = .2 * (diffY - lastScrollY);
if (percent > 0) {
percent = Math.ceil(percent);
} else {
percent = Math.floor(percent);
}
document.all.divMenu.style.pixelTop += percent;
lastScrollY = lastScrollY + percent;
}
if (diffX != lastScrollX) {
percent = .2 * (diffX - lastScrollX);
if (percent > 0) {
percent = Math.ceil(percent);
} else {
percent = Math.floor(percent);
}
document.all.divMenu.style.pixelLeft += percent;
lastScrollY = lastScrollY + percent;
}
}
document.onfocusin=PosAdcon; //애드콘 초기위치지정함수 실행
function PosAdcon() {
//애드콘 초기위치, 폼 리사이즈시 위치
divMenu.style.top = document.body.scrollTop + document.body.clientHeight - 25;
divMenu.style.display = '';
divMenu.style.visibility = "visible";
}
</script>
[설명]
function PosAdcon() 부분은 레이어가 상대적 위치에 존재해야 하므로 문서가 열릴때나 익스플로러를 리사이즈한 경우의 위치를 지정해주는 함수입니다.
document.onfocusin=PosAdcon; 요거는 문서가 열릴때 PosAdcon 함수가 실행되도록....
노프레임홈에서 방명록형식 게시판이나 글보기 화면에서 BODY의 ONLOAD 이벤트가 안먹히더군요....그래서 document.onfocusin=PosAdcon;로 처리..
function MoveAdcon() 부분은 스크롤시 레이어를 움직여주는 함수입니다.
action = window.setInterval("MoveAdcon()",1); 폼에서 위함수를 계속 실행해주도록 처리
(기타 다른방식의 처리들은 노프레임홈에서 안먹히더군요)
2. 실제 화면에 출력되는 레이어 (여기서는 20*20의 그림입니다.)
<DIV id=divMenu style="LEFT: 802px; VISIBILITY: hidden; WIDTH: 20px; height: 20px; POSITION: absolute">
<A href="#"><IMG src="../img/img_top.gif" height=20 width=20 border=0></A>
</DIV>
3. 리사이즈시 PosAdcon 함수의 실행에 대한 처리
화면 리사이즈시에 실행되야하므로 body 태그에 onresize이벤트 처리합니다. 즉,
<body onresize="PosAdcon();">
조그만 고치시면 자신의 홈에 잘 맞게 사용하실 수 있을겁니다.
다음 주소는 저의 홈페이지인데, 20*20의 이미지가 우측 하단에 위치하는 예입니다. (x,y 좌표 모두 상대적 위치입니다.)
http://tou.zetyx.net/
(극히 개인적인 홈이므로 그냥 곁모양만 보세요.)
댓글 8
-
전영철
2004.05.04 16:44
찾던건데.. 잘 쓰겠습니다. ^^; -
검미르
2004.05.09 07:51
다음은 제홈 http://tou.zetyx.net/에서의 실제 소스입니다.
노프레임의 헤더파일에 코딩되어 있습니다.
제홈은 폭 800의 테이블을 가운데 정렬했습니다.
애드콘은 테이블의 우측 하단에 붙어있습니다.
따라서 상대위치는 대충
left : (문서의 폭 - 800) /2 + 800
top : 스크롤의 현재위치 + 문서의 높이
입니다.
아래에서 수치에 800이 아니고 802이거나 -20, -33등은 문서의 상황에 따라 값을 조금씩 달리한것입니다.
(문서의 폭이 테이블의 폭보다 작아지는 경우의 애드콘위치 감안 등등)
---------------------------------------------------
1) 스크립트 소스
<script language="javascript">
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
action = window.setInterval("MoveAdcon()",1);
function MoveAdcon() {
//애드콘 무빙
diffY = document.body.scrollTop;
diffX = 0;
if (diffY != lastScrollY) {
percent = .2 * (diffY - lastScrollY);
if (percent > 0) {
percent = Math.ceil(percent);
} else {
percent = Math.floor(percent);
}
document.all.divMenu.style.pixelTop += percent;
lastScrollY = lastScrollY + percent;
}
if (diffX != lastScrollX) {
percent = .2 * (diffX - lastScrollX);
if (percent > 0) {
percent = Math.ceil(percent);
} else {
percent = Math.floor(percent);
}
document.all.divMenu.style.pixelLeft += percent;
lastScrollY = lastScrollY + percent;
}
}
function PosAdcon() {
//애드콘 초기위치지정
if (document.body.clientWidth > 840) {
divMenu.style.left = (document.body.clientWidth - 800)/2 + 802;
} else {
divMenu.style.left = document.body.clientWidth - 20;
}
divMenu.style.top = document.body.scrollTop + document.body.clientHeight - 33;
divMenu.style.display = '';
divMenu.style.visibility = "visible";
}
//애드콘 초기위치지정함수 실행
document.onfocusin=PosAdcon;
</script>
2) 실제 출력되는 레이어
<!--애드콘 출력-->
<DIV id=divMenu style="VISIBILITY: hidden; WIDTH: 20px; height: 20px; POSITION: absolute">
<A href="#"><IMG src="../img/img_top.gif" height=28 width=20 border=0></A>
</DIV>
<!--끝-->
3) body태크
<body onresize="PosAdcon()" onload="PosAdcon();"> -
☺심심
2004.05.16 12:03
작은창에서 열었을 경우 레이어가 너무 앞쪽에 붙는데요. .ㅡ_ㅡ; 크게 늘려도 말이죠 -
leezche
2004.06.22 14:28
브라우저를.. 화면보다 작게 줄였을때.. 레이어가 실제 화면위로 올라가서 붙어버리네요...
이것만 수정되면... 더할나위 없는 소스같아요... ^^;;; -
dreamydream
2004.07.01 12:30
잘 쓰겠습니다 ^^ -
사나이
2005.09.08 16:59
먼저 감사드리고
홈페이지에 적용 설정 완성되면 또 글남길께요 -
바인
2006.07.24 12:37
감사합니다 ㅜ_ㅜ
방명록형태에서 떠있는레이어가 안되서 한참 헤매고 있었어요 ㅠㅠㅠ -
최윤영213
2007.09.09 21:18
굉장히 유용해요. 정말 좋네요~
세로위치 지정은
divMenu.style.top = document.body.scrollTop + document.body.clientHeight - 25;
여기서 25를 바꾸면 되고(25=창 맨아래부분부터 원하는 위치까지의 거리)
가로위치 지정은
<DIV id=divMenu style="LEFT: 802px; VISIBILITY: hidden; WIDTH: 20px; height: 20px; POSITION: absolute">
여기서 802를 바꾸면 되네요.(802=창의 왼쪽으로부터 원하는 위치까지의 거리)
제가 원래 쓰던 자바스크립트는 제로보드에선 먹질않아서 버렸어요. -_-ㅎㅎ
정말 큰 도움 됐습니다.
아, 한가지
제로보드에 넣을 땐, <div~부분을
헤더안에 다 넣어야 상태창에 오류메세지가 안생기고
보드 아닌 html 또는 php에선, <div~부분을
바디에 넣어야 제대로 실행되네요~
제목 | 글쓴이 | 날짜 |
---|---|---|
throttle-me를 이용한 계정 트래픽 나타내기 [39] | 旻天 | 2003.11.27 |
제로보드회원의 포인트 랭킹 체크하기 sql 정리 [4] | 한꼬마 | 2003.11.26 |
한꼬마의 제로보드 이용법 (sql로 테이블 호출) [2] | 한꼬마 | 2003.11.26 |
[Lotto 6/45] 로또 추첨 구현하기~ [5] | 전원주 | 2003.11.21 |
한꼬마의 제로보드 활용방법 (로그인 값 알아 보기) [3] | 한꼬마 | 2003.11.20 |
회원 포인트 랭킹(중복 -_-a) [4] | weky | 2003.11.15 |
제로보드회원의 포인트 랭킹 체크하기 [13] | 전원주 | 2003.11.15 |
지금은 시스템 점검중 만들기... [8] | zentoo.com | 2003.11.11 |
접속자의 IP를 화일로 저장(기능추가) [27] | 전원주 | 2003.11.06 |
호스팅업체에서 GD를 지원하는지 여부를 알 수 있게해주는 소스 [12] | Wizard | 2003.11.05 |
홈페이지 관리자 모드 구축하기 (HTTP 인증, 중복 맞음) [10] | 9000㎒ | 2003.11.01 |
include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] | 김병희 | 2003.10.25 |
신문기사 긁어오기 [28] | horizon | 2003.10.20 |
공지사항|일기장 4강 - notice.php 간단한 글보이기 | 시루바 | 2003.10.16 |
최신인기가요 순위 한방에 뽑아오기 [10] | 제누스 | 2003.10.16 |
알기쉬운 웹용 MySQL 관리도구, phpMyAdmin 설치하기 [10] | 허창원 | 2003.10.11 |
MSN Messenger Class - | HungryMania | 2003.10.10 |
공지사항|일기장 3장 write_ok.php //간단한 입력쿼리문//수정 [5] | 시루바 | 2003.10.08 |
내 홈페이지의 방문자 어디서 접속했을까 알아봅시다 [21] | 버찌소년 | 2003.10.08 |
공지사항|일기장 프로그램 2장:코딩구조와write.php [2] | 시루바 | 2003.10.02 |