퀵메뉴 사이드뷰 질문입니다..다시올림

퀵메뉴 사이드뷰 질문입니다..다시올림 정보

퀵메뉴 사이드뷰 질문입니다..다시올림

본문

소스는 밑에있구요..스크린샷도 첨부했습니다...접속자현황을 퀵메뉴로 띄웠는데 아이디 눌렀을때 나오는 사이드메뉴가 퀵메뉴 밑으로 뜹니다....첨부한 이미지보면 어떤건지 확인가능할겁니다...이거 퀵메뉴위로 나오게 하는방법 없을까요?
<?
include_once("$g4[path]/lib/connect.lib.php");
include_once("$g4[path]/adm/current_connect.php");
?>
<SCRIPT LANGUAGE="JavaScript">
function CheckUIElements() {
var yMenu1From, yMenu1To, yOffset, timeoutNextCheck;
var wndWidth = parseInt(document.body.clientWidth);
yMenu1From = parseInt (qLayer.style.top, 10);
yMenu1To = document.body.scrollTop + 200; // 위쪽 위치
timeoutNextCheck = 500;

if ( yMenu1From != yMenu1To ) {
yOffset = Math.ceil( Math.abs( yMenu1To - yMenu1From ) / 20 );
if ( yMenu1To < yMenu1From )
yOffset = -yOffset;

qLayer.style.top = parseInt (qLayer.style.top, 10) + yOffset;

timeoutNextCheck = 10;
}
qLayer.style.left = (document.body.clientWidth/2)+392; //중심으로 부터의 수평거리

setTimeout ("CheckUIElements()", timeoutNextCheck);
}

function MovePosition() {
var wndWidth = parseInt(document.body.clientWidth);

// 페에지 로딩시 포지션
qLayer.style.top = 350;
qLayer.style.left = (document.body.clientWidth/2)+392; //중심으로 부터의 수평거리
qLayer.style.visibility = "visible";

// initializing UI update timer
CheckUIElements();
return true;
}
</SCRIPT>


<div style="position:absolute;top:200px;left:expression( (document.body.clientWidth/2)+392);z-index:1;" id="qLayer" name="qLayer">
<table width="100%"><tr><td align='center'><a href=# onfocus='this.blur()'><img src='<?=$g4[path]?>/img/up.gif' align='absmiddle'><font color=blue><span class=small> </span></font></a></td></tr></table>
<style>
.scroll {
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#d5d5d5;
scrollbar-base-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ededed;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#d5d5d5;
scrollbar-track-color:#ffffff;
}
#ud_on_box{width:100%; height:100; overflow: auto; padding:5px; border:1; border-style:solid; border-color:#CCCCCC; background-color:#FFFFFF;}
</style>

<table width="220" border="0" cellspacing="0" cellpadding="0" bgcolor="#F7F7F7" style="border-color:#CCCCCC; border-width:1px; border-style:solid">
<tr>
<td style="padding:5;"><a href='<?=$g4['g4_path']?>/adm/current_connect.php'><b>접속자</b></td>
</tr>
<tr><td colspan="2" align="center" style="padding:5;">
<div id=ud_on_box class=scroll>
<?
for ($i=0; $i<count($list); $i++)
{
echo <<<HEREDOC
<div align=left style="padding-bottom:5; padding-left:5;">{$list[$i][name]}</div>
HEREDOC;
$location = conv_content($list[$i][lo_location], 0);

}

if ($i == 0)
echo "<div align=center height=100%>현재 접속자가 없습니다.</div>";
?>

</div>
</td></tr>

</table>

</div>
<script language='JavaScript'>MovePosition();</script>

복사
공유하기

댓글 전체

DreamT 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

10.10.26 11:04:25

흠.... 소스가 좀 복잡하네요... a 테그가 닫히지도않았고ㅎㅎ
스크롤바 css 쓰신거랑 스크립트내용을 보아하니.. 크로스브라우징은 별로 염두에 두지 않으신가보군요. 근데 저 소스만으로 어떻게 스샷에서처럼 검은 테두리가 나왓는지; 의문이네요.
무튼,, 원하시는대로 나오도록 div코드로 바꿔드렸습니다. 익스플로러에만 맞게 했어요. (크롬도 잘나오긴하네요)
님께서 쓰신 소스 중  부터 아래 소스로 교체해주세요
아래 소스에서 width 값을 조정해서 가로길이 조정하세요. (꼭 10px 씩 차이가 나야합니다)


<style>
.scroll {
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#d5d5d5;
scrollbar-base-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ededed;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#d5d5d5;
scrollbar-track-color:#ffffff;
}
#ud_on_box{width:80px; height:100px; overflow:auto; margin:5px; border:1px solid #CCCCCC; background-color:#FFFFFF;}
</style>

<div style="width:100px; border:1px solid #000; padding:0px; margin:0px; position:absolute; top:200px; left:expression( (document.body.clientWidth/2)+392); z-index:1;" id="qLayer" name="qLayer">
<div style="width:90px; margin:5px; padding:0px; text-align:center;">
<a href=# onfocus='this.blur()'><img src='<?=$g4[path]?>/img/up.gif' align='absmiddle'></a>
</div>
<div style="width:90px; padding:0px; margin:0px 5px 5px 5px; background:#F7F7F7; border:1px solid #ccc;">
<a href='<?=$g4['g4_path']?>/adm/current_connect.php'><b>접속자</b></a>
<div id="ud_on_box" class="scroll">

<?
for ($i=0; $i<count($list); $i++)
{
echo <<<HEREDOC
<div align=left style="padding-bottom:5; padding-left:5;">{$list[$i][name]}</div>
HEREDOC;
$location = conv_content($list[$i][lo_location], 0);
}
if ($i == 0)
echo "<div align=center height=100%>현재 접속자가 없습니다.</div>";
?>

</div>
</div>
</div>

<script language='JavaScript'>MovePosition();</script>

<div style="width:100px; border:1px solid #000; padding:0px; margin:0px; position:absolute; top:200px; left:expression( (document.body.clientWidth/2)+392); z-index:1;" id="qLayer" name="qLayer">  
	<div style="width:90px; margin:5px; padding:0px; text-align:center;">
		<a href=# onfocus='this.blur()'><img src='<?=$g4[path]?>/img/up.gif' align='absmiddle'></a>
	</div>
	<div style="width:90px; padding:0px; margin:0px 5px 5px 5px; background:#F7F7F7; border:1px solid #ccc;">
		<a href='<?=$g4['g4_path']?>/adm/current_connect.php'><b>접속자</b></a>
		<div id="ud_on_box" class="scroll">

<? 
for ($i=0; $i<count($list); $i++) 
{ 
    echo <<<HEREDOC 
        <div align=left style="padding-bottom:5; padding-left:5;">{$list[$i][name]}</div> 
HEREDOC; 
    $location = conv_content($list[$i][lo_location], 0); 
} 
if ($i == 0) 
    echo "<div align=center height=100%>현재 접속자가 없습니다.</div>"; 
?>

</div>
	</div>
</div>