해상도와 상관는 스크롤메뉴 소스 있으신 분...
현재 쓰고 있는 스크롤메뉴 소스가
해상도를 크게 하면 위치가 변경 되어 버립니다.
1024*768일 때는 보기 좋게 위치하던게
그 이상의 해상도에서는 왼쪽으로 밀립니다.
홈페이지의 테이블이 왼쪽 정렬로 되어 있다면 문제가 안생길텐데
구상 단계에서 부터 가운데 정렬 기준으로 되어 있어서
해상도가 높으면 위치가 흉해지는군요..
해상도에 상관없이 가운데서 부터 위치 조절할 수 있는 스크로메뉴 소스 있으신분
부탁드립니다...
거의 하루종일 그 소스 찾아 다녔는데 구할수가 없군요.
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 17개
아마 국내에 몇개 없는 소스가 될듯 합니다..^^
우측정렬로 우측 사이드로 붙이면 따로놀게 되겠죠?
<?
$scroll_div[top] = 200;
?>
<div id='divMenu' style="position:relative; top:0;">
<table cellpadding=0 cellspacing=0 border="0" bgcolor="#FFFFFF">
<tr>
<td valign=top>
<!-- 삽입-->
<a href='#g4_head'>Top</a>
<!-- 삽입 -->
</td>
</tr>
</table>
</div>
<script language=javascript>
function CheckUIElements()
{
var yMenuFrom, yMenuTo, yButtonFrom, yButtonTo, yOffset, timeoutNextCheck;
yMenuFrom = parseInt (document.getElementById('divMenu').style.top, 10);
if ( g4_is_gecko )
yMenuTo = top.pageYOffset + <?=$scroll_div[top]?>;
else if ( g4_is_ie )
yMenuTo = document.body.scrollTop + parseInt('<?=$scroll_div[top]?>');
timeoutNextCheck = 500;
if ( Math.abs (yButtonFrom - (yMenuTo + 152)) < 6 && yButtonTo < yButtonFrom )
{
setTimeout ("CheckUIElements()", timeoutNextCheck);
return;
}
if ( yMenuFrom != yMenuTo )
{
yOffset = Math.ceil( Math.abs( yMenuTo - yMenuFrom ) / 10 );
if ( yMenuTo < yMenuFrom )
yOffset = -yOffset;
document.getElementById('divMenu').style.top = parseInt(document.getElementById('divMenu').style.top) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
function OnLoad() {
var y;
if ( top.frames.length )
document.getElementById('divMenu').style.display = '';
CheckUIElements();
return true;
}
OnLoad();
//-->
</script>
// 적용
tail.php
테이블 닫은 부분 다음에.
<td valign=top><?include("어디잇니 A.php");?></td>
영카트 3에 있던 소스로 기억합니다.
만들고 계시던데. 다른분들도 보시면 참조 하시라고..^^
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=4646&sca=&sfl=wr_name%2C1&stx=%C0%AF%C3%A2%C8%AD&sop=and
//환경설정
var DivRemoconX =920;//레이어가 위치할 레프트 값
var DivRemoconY = 150;//레어가 위치할 탑 값
var DivRemoconRule = 'left';//center -->가운데 정렬을 기준으로 x만큼, left --> 레프트 정렬을 기준으로 x만큼
만약 그누보드가 아니라면
http://82da.com/Ybbs/sample/movinglayer.htm
이것을 사용하시면 됩니다.
그러나 팁란의 자료나 링크의 자료나 홈페이지를 가운데 정렬해서 제작했을경우 임의로 창크기를 줄이면
가로 스크롤바가 생기고 스크롤바를 이동하면 본문과 스크롤메뉴간에 간격이 넓어 집니다.....ㅠ.ㅠ
var DivRemoconRule = 'left'
이것을
var DivRemoconRule = 'center'
로 주고
가운데에서 오른쪽으로 얼마큼 이동한 위치에 줄것인지
var DivRemoconX =300;//
이런식으로 해주면
문제가 없을 땐데요?
가운데에서 왼쪽으로 가고 싶으면
- 를 주면 됩니다.
제가 잘 못 이해 한 부분일수도 있으므로
해당 주소를 보여주시기 바랍니다
왼쪽정렬로 레이아웃을 변경하실 의사는 없으신지요?^^&
안되면 될때까징 입니다.....ㅠ.ㅠ
왼쪽으로 밀면 모양새가 안나옵니다..^^
적용해보고 문제가 있으시면 알려주십시오
<div id=DivMovingLayer style='position:absolute;left:0px;top:0px; z-index:8;display:none;'>
<table border=0 cellpadding=3 cellspacing=0 style='background-color:#F6FAFF; border: #9DADE5 solid; border-width: 1px 1px 1px 1px; width: 100px; padding: 3px;'>
<tr><td align='center'><a href='javascript:NoneRemocon();' title='움직이는 레이어를 닫습니다.'>[닫 기]</a></td></tr>
<tr><td align='center'><a href='javascript:history.go(-1);' title='뒤로가기'>[뒤로가기]</a></td></tr>
<tr><td align='center' height=50>여기에<br>배너</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 = 800;//움직이는 레이어를 제외한 콘텐츠 너비, 가운데 정렬에만 해당
var LayerWidth = 100;//움직이는 레이어의 너비, 가운데 정렬에만 해당
var DivMovingLayerX = 480;//레이어가 위치할 레프트 값
var DivMovingLayerY = 50;//레어가 위치할 탑 값
var DivMovingLayerRule = 'center';//center -->가운데 정렬을 기준으로 x만큼, left --> 레프트 정렬을 기준으로 x만큼
//레이어 보이기
SetRemocon();
</script>
<body leftmargin=0>
<table border=1 width=800 height=500 align=center><tr><td>너비 800 * 높이 600</td></tr></table>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
참고 url http://82da.com/Ybbs/sample/movinglayer.htm
편안한 저녁시간 되십시오........
편안한 밤이 될런지는 태극전사들이 결정할 것 같습니다만....^^
<div id=DivMovingLayer style='position:absolute;left:0px;top:0px; z-index:8;display:none;'>
<table border=0 cellpadding=3 cellspacing=0 style='background-color:#F6FAFF; border: #9DADE5 solid; border-width: 1px 1px 1px 1px; width: 100px; padding: 3px;'>
<tr><td align='center'><a href='javascript:NoneRemocon();' title='움직이는 레이어를 닫습니다.'>[닫 기]</a></td></tr>
<tr><td align='center'><a href='javascript:history.go(-1);' title='뒤로가기'>[뒤로가기]</a></td></tr>
<tr><td align='center' height=50>여기에<br>배너</td></tr>
</table>
</div>
<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";
}
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>
<body leftmargin=0>
<table border=1 width=800 height=500 align=center><tr><td>너비 800 * 높이 600</td></tr></table>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
아침에 달아서 확인하고 보고 드리겠습니다.
감사합니다.^^
http://eantent.com
에러없이 멋지게 잘 작동합니다.
애 많이 쓰셨구요...
정말 감사합니다.