글보기에서 움직이는 리모콘 레이어 달아주기 정보
글보기에서 움직이는 리모콘 레이어 달아주기
관련링크
본문
불여우에서 제대로 작동하지 않고 옵션이 없기에
불여우와 익스플로어 에서 돌아가도록 새로 만들었습니다.
다른 브라우져에서는 테스트 해보지 않았지만 아마 될것으로 보여집니다.
제가 올린 레이어모양은 그냥 텍스트지만 위의 디자인 부분을 수정하시면
이미지로 이쁘게 만드실수 있습니다.
관리자일 경우에는 모든 버튼 메뉴가 리모콘에 표시됩니다.
용도는 긴게시물을 수정하거나 답변, 여러가지 행위를 할때 일부러 하단으로 내려가서 할 필요가 없습니다.
레이어의 위치지정은 소스 하단부에 환경설정부분의 주석을 참고하시면 됩니다.
가운데 정렬일시와 왼쪽정렬일시 둘다 사용가능합니다.
[수정사항]
1. 아이젠님 의견을 반영하여 부드럽게 움직이도록 수정하였습니다.
2. 그누보드 4에서 기본으로 제공하는 함수 두개를 사용하여 (selectBoxHidden(레이어이름), selectBoxVisible())
셀렉트 박스와 레이어가 겹칠시 셀렉트박스를 숨겼다가 겹치는 것을 벗어나면 다시 셀렉트박스를 보여줍니다.
[부탁사항]
다른 브라우져 사용하시는 분들은 테스트 결과좀 부탁드립니다.
[사용방법]
아래부분을 복사하여 사용하는 스킨의 view.skin.php에 붙여넣습니다.
주의사항은
<?
$link_buttons = ob_get_contents();
ob_end_flush();
?>
요거 아래부분에 붙여 넣어야 합니다.
이하 소스입니다.
<script language='javascript'>
//리모콘 레이어
//사용함수
function ResetRemocon(){
var DivRemoconYFrom, DivRemoconYTo, OffsetY, ResetTime;
ResetTime = 100;
DivRemoconYFrom = parseInt (DivRemocon.style.top, 10);
DivRemoconYTo = DivRemoconY + document.body.scrollTop + 1;
if ( DivRemoconYFrom != DivRemoconYTo ) {
OffsetY = Math.ceil( Math.abs( DivRemoconYTo - DivRemoconYFrom ) / 20 );
if ( DivRemoconYTo < DivRemoconYFrom )
OffsetY = -OffsetY;
DivRemocon.style.top = (DivRemoconYFrom + OffsetY) + "px";
ResetTime = 10;
}
setTimeout ("ResetRemocon()", ResetTime);
}
function SetRemocon() {
DivRemocon.style.display = "block";
if (DivRemoconRule == 'center')//해상도 기준, 가운데 에서 x만큼 떨어진 곳에 위치
DivRemocon.style.left = (DivRemoconX + (document.body.clientWidth / 2)) + "px";
else if (DivRemoconRule == 'left')//해상도와 무관, 왼쪽 에서 x만큼 떨어진 곳에 위치
DivRemocon.style.left = (DivRemoconX) + "px";
DivRemocon.style.top = (DivRemoconY + document.body.scrollTop + 1) + "px";
ResetRemocon();
return true;
}
function NoneRemocon() {
DivRemocon.style.display = "none";
selectBoxVisible();
}
//레이어 디자인부분
document.write("<div id=DivRemocon style='position:absolute;left:0px;top:0px; z-index:8;display:none;' onpropertychange=\"selectBoxVisible(); selectBoxHidden('DivRemocon')\">");
//selectBoxVisible() --> 그누보드 자체 지원함수, 레이어와 셀렉트박스가 겹쳐서 숨겼던 셀렉트 박스를 다시보여줌
//selectBoxHidden(레이어이름) --> 그누보드 자체 지원함수, 레이어와 셀렉트박스가 겹치면 셀렉트 박스를 숨김
document.write("<table border=0 cellpadding=3 cellspacing=0 style='background-color:#F6FAFF; border: #9DADE5 solid; border-width: 1px 1px 1px 1px; width: 80px; padding: 3px;'>");
document.write("<tr><td align='center'><a href='javascript:NoneRemocon();' title='리모콘을 닫습니다.'>[닫 기]</a></td></tr>");
document.write("<tr><td align='center'><a href='javascript:history.go(-1);' title='뒤로가기'>[뒤로가기]</a></td></tr>");
<? if ($prev_href) { ?>
document.write("<tr><td align='center'><a href='<?=$prev_href?>' title='이전글 : <?=$prev_wr_subject?>'>[이 전 글]</a></td></tr>");
<? } ?>
<? if ($next_href) { ?>
document.write("<tr><td align='center'><a href='<?=$next_href?>' title='다음글 : <?=$next_wr_subject?>'>[다 음 글]</a></td></tr>");
<? } ?>
<? if ($search_href) { ?>
document.write("<tr><td align='center'><a href='<?=$search_href?>' title='검색목록으로 이동합니다.'>[검색목록]</a></td></tr>");
<? } ?>
document.write("<tr><td align='center'><a href='<?=$list_href?>' title='목록으로 이동합니다.'>[목 록]</a></td></tr>");
<? if ($write_href) { ?>
document.write("<tr><td align='center'><a href='<?=$write_href?>' title='새로운 글을 씁니다.'>[쓰 기]</a></td></tr>");
<? } ?>
<? if ($reply_href) { ?>
document.write("<tr><td align='center'><a href='<?=$reply_href?>' title='이글에 답변을 답니다.'>[답 변]</a></td></tr>");
<? } ?>
<? if ($update_href) { ?>
document.write("<tr><td align='center'><a href='<?=$update_href?>' title='이글을 수정합니다.'>[수 정]</a></td></tr>");
<? } ?>
<? if ($delete_href) { ?>
document.write("<tr><td align='center'><a href='<?=$delete_href?>' title='이글을 삭제합니다.'>[삭 제]</a></td></tr>");
<? } ?>
<? if ($copy_href) { ?>
document.write("<tr><td align='center'><a href='<?=$copy_href?>' title='이글을 복사합니다.'>[복 사]</a></td></tr>");
<? } ?>
<? if ($move_href) { ?>
document.write("<tr><td align='center'><a href='<?=$move_href?>' title='이글을 이동합니다.'>[이 동]</a></td></tr>");
<? } ?>
<? if ($good_href) { ?>
document.write("<tr><td align='center'><a href='<?=$good_href?>' target='hiddenframe' title='이 글을 추천합니다.'>[추 천]</a></td></tr>");
<? } ?>
<? if ($nogood_href) { ?>
document.write("<tr><td align='center'><a href='<?=$nogood_href?>' target='hiddenframe' title='이 글을 비추천합니다.'>[비 추 천]</a></td></tr>");
<? } ?>
<? if ($scrap_href) { ?>
document.write("<tr><td align='center'><a href='javascript:;' onclick=\"win_scrap('<?=$scrap_href?>');\" title='이 글을 스크랩합니다.'>[스 크 랩]</a></td></tr>");
<? } ?>
document.write("<tr><td align='center'><a href=\"javascript:window.external.AddFavorite('<?=$g4['url']?>/bbs/board.php?bo_table=<?=$bo_table?>&wr_id=<?=$wr_id?>','<?=str_replace(array("'", '"'), "", $g4['title'])?>')\" title='이 글을 즐겨찾기에 추가합니다.'>[즐겨찾기]</a></td></tr>");
document.write("</table>");
document.write("</div>");
if (typeof document.body == "undefined")
document.body = document.getElementsByTagName("BODY")[0];
var DivRemocon = document.getElementById("DivRemocon");
//환경설정
var DivRemoconX =920;//레이어가 위치할 레프트 값
var DivRemoconY = 150;//레어가 위치할 탑 값
var DivRemoconRule = 'left';//center -->가운데 정렬을 기준으로 x만큼, left --> 레프트 정렬을 기준으로 x만큼
//레이어 보이기
SetRemocon();
</script>
추천
1
1
댓글 6개
스크롤이 좀 뚝뚝 끊어지는 느낌입니다.
어떻게 수정이 안될까요?
^^
어떻게 수정이 안될까요?
^^
금방 뚝딱 수정하시는군요.
abc 지겹지 않으세요?
비도 오고 바람도 불고 ... 오늘은 편히 쉬시죠?
^^
abc 지겹지 않으세요?
비도 오고 바람도 불고 ... 오늘은 편히 쉬시죠?
^^
감사합니다.
맥 사파리, FF 그리고 피시 FF 모두 똑같이 위치 정확하고 동작 부드럽습니다.
msie에서만 기존 사용중인 다른 스크롤링 메뉴와 z-index가 뒤바뀌어 나옵니다.
기존 z-index 설정이 안되어 있는 스크립트에 대한 해석이 msie만 다른것같군요,
스크랩했다가 요긴하게 잘쓰겠습니다.
맥 사파리, FF 그리고 피시 FF 모두 똑같이 위치 정확하고 동작 부드럽습니다.
msie에서만 기존 사용중인 다른 스크롤링 메뉴와 z-index가 뒤바뀌어 나옵니다.
기존 z-index 설정이 안되어 있는 스크립트에 대한 해석이 msie만 다른것같군요,
스크랩했다가 요긴하게 잘쓰겠습니다.
가운데 정렬시 해상도나 창크기가 전체 보여질 내용보다 작을때
생기던 문제를 최종 수정하였습니다.
문제가 있다면 쪽지로 연락주세요
이하 소스입니다.
<script language='javascript'>
//리모콘 레이어
//사용함수
function ResetRemocon(){
var DivMovingLayerYFrom, DivMovingLayerYTo, OffsetY, ResetTime;
ResetTime = 100;
if (DivMovingLayerRule == 'center'){
//해상도 기준, 가운데 에서 x만큼 떨어진 곳에 위치
if (navigator.userAgent.toLowerCase().indexOf("gecko") > -1) {
if (document.body.clientWidth < ContentsWidth + 10) {
DivMovingLayer.style.left = parseInt (ContentsWidth / 2, 10) + DivMovingLayerX + 10 + "px";
}
else {
DivMovingLayer.style.left = (DivMovingLayerX + (document.body.clientWidth / 2)) + "px";
}
}
else{
if (document.body.clientWidth < ContentsWidth) {
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";
selectBoxVisible();
}
//레이어 디자인부분
document.write("<div id=DivMovingLayer style='position:absolute;left:0px;top:0px; z-index:8;display:none;' onpropertychange=\"selectBoxVisible(); selectBoxHidden('DivMovingLayer')\">");
//selectBoxVisible() --> 그누보드 자체 지원함수, 레이어와 셀렉트박스가 겹쳐서 숨겼던 셀렉트 박스를 다시보여줌
//selectBoxHidden(레이어이름) --> 그누보드 자체 지원함수, 레이어와 셀렉트박스가 겹치면 셀렉트 박스를 숨김
document.write("<table border=0 cellpadding=3 cellspacing=0 style='background-color:#F6FAFF; border: #9DADE5 solid; border-width: 1px 1px 1px 1px; width: 80px; padding: 3px;'>");
document.write("<tr><td align='center'><a href='javascript:NoneRemocon();' title='리모콘을 닫습니다.'>[닫 기]</a></td></tr>");
document.write("<tr><td align='center'><a href='javascript:history.go(-1);' title='뒤로가기'>[뒤로가기]</a></td></tr>");
<? if ($prev_href) { ?>
document.write("<tr><td align='center'><a href='<?=$prev_href?>' title='이전글 : <?=$prev_wr_subject?>'>[이 전 글]</a></td></tr>");
<? } ?>
<? if ($next_href) { ?>
document.write("<tr><td align='center'><a href='<?=$next_href?>' title='다음글 : <?=$next_wr_subject?>'>[다 음 글]</a></td></tr>");
<? } ?>
<? if ($search_href) { ?>
document.write("<tr><td align='center'><a href='<?=$search_href?>' title='검색목록으로 이동합니다.'>[검색목록]</a></td></tr>");
<? } ?>
document.write("<tr><td align='center'><a href='<?=$list_href?>' title='목록으로 이동합니다.'>[목 록]</a></td></tr>");
<? if ($write_href) { ?>
document.write("<tr><td align='center'><a href='<?=$write_href?>' title='새로운 글을 씁니다.'>[쓰 기]</a></td></tr>");
<? } ?>
<? if ($reply_href) { ?>
document.write("<tr><td align='center'><a href='<?=$reply_href?>' title='이글에 답변을 답니다.'>[답 변]</a></td></tr>");
<? } ?>
<? if ($update_href) { ?>
document.write("<tr><td align='center'><a href='<?=$update_href?>' title='이글을 수정합니다.'>[수 정]</a></td></tr>");
<? } ?>
<? if ($delete_href) { ?>
document.write("<tr><td align='center'><a href='<?=$delete_href?>' title='이글을 삭제합니다.'>[삭 제]</a></td></tr>");
<? } ?>
<? if ($copy_href) { ?>
document.write("<tr><td align='center'><a href='<?=$copy_href?>' title='이글을 복사합니다.'>[복 사]</a></td></tr>");
<? } ?>
<? if ($move_href) { ?>
document.write("<tr><td align='center'><a href='<?=$move_href?>' title='이글을 이동합니다.'>[이 동]</a></td></tr>");
<? } ?>
<? if ($good_href) { ?>
document.write("<tr><td align='center'><a href='<?=$good_href?>' target='hiddenframe' title='이 글을 추천합니다.'>[추 천]</a></td></tr>");
<? } ?>
<? if ($nogood_href) { ?>
document.write("<tr><td align='center'><a href='<?=$nogood_href?>' target='hiddenframe' title='이 글을 비추천합니다.'>[비 추 천]</a></td></tr>");
<? } ?>
<? if ($scrap_href) { ?>
document.write("<tr><td align='center'><a href='javascript:;' onclick=\"win_scrap('<?=$scrap_href?>');\" title='이 글을 스크랩합니다.'>[스 크 랩]</a></td></tr>");
<? } ?>
document.write("<tr><td align='center'><a href=\"javascript:window.external.AddFavorite('<?=$g4['url']?>/bbs/board.php?bo_table=<?=$bo_table?>&wr_id=<?=$wr_id?>','<?=str_replace(array("'", '"'), "", $g4['title'])?>')\" title='이 글을 즐겨찾기에 추가합니다.'>[즐겨찾기]</a></td></tr>");
document.write("</table>");
document.write("</div>");
if (typeof document.body == "undefined")
document.body = document.getElementsByTagName("BODY")[0];
var DivMovingLayer = document.getElementById("DivMovingLayer");
//환경설정
var ContentsWidth = 800;//움직이는 레이어를 제외한 콘텐츠 너비, 가운데 정렬에만 해당
var DivMovingLayerX = 480;//레이어가 위치할 레프트 값
var DivMovingLayerY = 50;//레어가 위치할 탑 값
var DivMovingLayerRule = 'center';//center -->가운데 정렬을 기준으로 x만큼, left --> 레프트 정렬을 기준으로 x만큼
//레이어 보이기
SetRemocon();
</script>
생기던 문제를 최종 수정하였습니다.
문제가 있다면 쪽지로 연락주세요
이하 소스입니다.
<script language='javascript'>
//리모콘 레이어
//사용함수
function ResetRemocon(){
var DivMovingLayerYFrom, DivMovingLayerYTo, OffsetY, ResetTime;
ResetTime = 100;
if (DivMovingLayerRule == 'center'){
//해상도 기준, 가운데 에서 x만큼 떨어진 곳에 위치
if (navigator.userAgent.toLowerCase().indexOf("gecko") > -1) {
if (document.body.clientWidth < ContentsWidth + 10) {
DivMovingLayer.style.left = parseInt (ContentsWidth / 2, 10) + DivMovingLayerX + 10 + "px";
}
else {
DivMovingLayer.style.left = (DivMovingLayerX + (document.body.clientWidth / 2)) + "px";
}
}
else{
if (document.body.clientWidth < ContentsWidth) {
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";
selectBoxVisible();
}
//레이어 디자인부분
document.write("<div id=DivMovingLayer style='position:absolute;left:0px;top:0px; z-index:8;display:none;' onpropertychange=\"selectBoxVisible(); selectBoxHidden('DivMovingLayer')\">");
//selectBoxVisible() --> 그누보드 자체 지원함수, 레이어와 셀렉트박스가 겹쳐서 숨겼던 셀렉트 박스를 다시보여줌
//selectBoxHidden(레이어이름) --> 그누보드 자체 지원함수, 레이어와 셀렉트박스가 겹치면 셀렉트 박스를 숨김
document.write("<table border=0 cellpadding=3 cellspacing=0 style='background-color:#F6FAFF; border: #9DADE5 solid; border-width: 1px 1px 1px 1px; width: 80px; padding: 3px;'>");
document.write("<tr><td align='center'><a href='javascript:NoneRemocon();' title='리모콘을 닫습니다.'>[닫 기]</a></td></tr>");
document.write("<tr><td align='center'><a href='javascript:history.go(-1);' title='뒤로가기'>[뒤로가기]</a></td></tr>");
<? if ($prev_href) { ?>
document.write("<tr><td align='center'><a href='<?=$prev_href?>' title='이전글 : <?=$prev_wr_subject?>'>[이 전 글]</a></td></tr>");
<? } ?>
<? if ($next_href) { ?>
document.write("<tr><td align='center'><a href='<?=$next_href?>' title='다음글 : <?=$next_wr_subject?>'>[다 음 글]</a></td></tr>");
<? } ?>
<? if ($search_href) { ?>
document.write("<tr><td align='center'><a href='<?=$search_href?>' title='검색목록으로 이동합니다.'>[검색목록]</a></td></tr>");
<? } ?>
document.write("<tr><td align='center'><a href='<?=$list_href?>' title='목록으로 이동합니다.'>[목 록]</a></td></tr>");
<? if ($write_href) { ?>
document.write("<tr><td align='center'><a href='<?=$write_href?>' title='새로운 글을 씁니다.'>[쓰 기]</a></td></tr>");
<? } ?>
<? if ($reply_href) { ?>
document.write("<tr><td align='center'><a href='<?=$reply_href?>' title='이글에 답변을 답니다.'>[답 변]</a></td></tr>");
<? } ?>
<? if ($update_href) { ?>
document.write("<tr><td align='center'><a href='<?=$update_href?>' title='이글을 수정합니다.'>[수 정]</a></td></tr>");
<? } ?>
<? if ($delete_href) { ?>
document.write("<tr><td align='center'><a href='<?=$delete_href?>' title='이글을 삭제합니다.'>[삭 제]</a></td></tr>");
<? } ?>
<? if ($copy_href) { ?>
document.write("<tr><td align='center'><a href='<?=$copy_href?>' title='이글을 복사합니다.'>[복 사]</a></td></tr>");
<? } ?>
<? if ($move_href) { ?>
document.write("<tr><td align='center'><a href='<?=$move_href?>' title='이글을 이동합니다.'>[이 동]</a></td></tr>");
<? } ?>
<? if ($good_href) { ?>
document.write("<tr><td align='center'><a href='<?=$good_href?>' target='hiddenframe' title='이 글을 추천합니다.'>[추 천]</a></td></tr>");
<? } ?>
<? if ($nogood_href) { ?>
document.write("<tr><td align='center'><a href='<?=$nogood_href?>' target='hiddenframe' title='이 글을 비추천합니다.'>[비 추 천]</a></td></tr>");
<? } ?>
<? if ($scrap_href) { ?>
document.write("<tr><td align='center'><a href='javascript:;' onclick=\"win_scrap('<?=$scrap_href?>');\" title='이 글을 스크랩합니다.'>[스 크 랩]</a></td></tr>");
<? } ?>
document.write("<tr><td align='center'><a href=\"javascript:window.external.AddFavorite('<?=$g4['url']?>/bbs/board.php?bo_table=<?=$bo_table?>&wr_id=<?=$wr_id?>','<?=str_replace(array("'", '"'), "", $g4['title'])?>')\" title='이 글을 즐겨찾기에 추가합니다.'>[즐겨찾기]</a></td></tr>");
document.write("</table>");
document.write("</div>");
if (typeof document.body == "undefined")
document.body = document.getElementsByTagName("BODY")[0];
var DivMovingLayer = document.getElementById("DivMovingLayer");
//환경설정
var ContentsWidth = 800;//움직이는 레이어를 제외한 콘텐츠 너비, 가운데 정렬에만 해당
var DivMovingLayerX = 480;//레이어가 위치할 레프트 값
var DivMovingLayerY = 50;//레어가 위치할 탑 값
var DivMovingLayerRule = 'center';//center -->가운데 정렬을 기준으로 x만큼, left --> 레프트 정렬을 기준으로 x만큼
//레이어 보이기
SetRemocon();
</script>
좋은팁 감사합니다
왜 이런 좋은팁에 추천하나 없나요?
ㅡㅡ;
ㅡㅡ;
