토글 질문 하나 올립니다.
제 홈에서 토글을 이용하려고 하는데 한가지 문제가 있어 이렇게 올립니다.
익스플로러에서는 잘 되는데 모질라에서는 안되는군요.
익스하고 모질라(넷스케이프)에서도 될 수 있도록 방법 좀 가르쳐 주세요.
아래 소스에서 자바스크립트를 수정해야 할것 같은데 제가 자바스크립트를 전혀 몰라 어찌할 바를 모르겠습니다.
링크를 걸어 둡니다.
결과는 login을 클릭해 보시면 됩니다.
아래는 소스입니다.
<html>
<head>
<SCRIPT LANGUAGE='JavaScript'>
function Eztoggle(e) {
if (e.style.display == "none")
{
if ( e == menu1 ){
if( menu2.style.display != "none" ){ menu2.style.display = "none"; }
}
else{
if( menu1.style.display != "none" ){ menu1.style.display = "none"; }
}
e.style.display = "";
if ( e == menu1 ){
LoginForm.id.focus();}
}
else { e.style.display = "none"; }
}
</script>
</head>
<body bgcolor="#ffffff" text="#CCCCCC" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<br>
<table align="center" bgcolor="#444444" border="0" cellpadding="0" cellspacing="0" width="700">
<tr>
<td height=30>
<a href="javascript:Eztoggle(menu1)" target="_self" title="" onfocus=blur() style=cursor:help; ONFOCUS="this.blur();"><font color="#ffffff">Login</font></A>
</td>
</tr>
</table>
<table align="center" bgcolor="#000000" class=box_all border="0" cellpadding="0" cellspacing="0" width="700" bordercolordark="white" bordercolorlight="#DDDDDD">
<tr>
<td height="40">
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="700" height="10">
<tr>
<td> </td>
</tr>
</table>
<table align="center" bgcolor="#000000" cellpadding="0" cellspacing="0" width="700">
<tr>
<td valign="top" width="100%">
<!--토글 -->
<table width=700 align=center cellpadding=0 cellspacing=0 border=0>
<tr>
<td style='padding:0 0 0 0' align=center>
<div id="menu1" style="width:10px; z-index:1; border:0px solid #000000; background-color:; layer-background-color:; margin:0px; display: none;">
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=20 bgcolor=aabbcc>
<td align=right>
login을 클릭하면 여기가 나와요!!!!
</td>
</TR>
</TABLE>
</div>
<div id="menu2" style="width:10px; z-index:1; border:0px solid #000000; background-color:; layer-background-color:; margin:0px; display: none;">
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=20 bgcolor=aabbcc>
<td></td>
</TR>
</TABLE>
</div>
</td>
</tr>
</table>
<!--토글 끝-->
<table width=700 border="0" bordercolor="silver" bordercolordark="white" cellspacing="0">
<tr>
<td height=50> </td>
</tr>
</table>
</body>
</html>
익스플로러에서는 잘 되는데 모질라에서는 안되는군요.
익스하고 모질라(넷스케이프)에서도 될 수 있도록 방법 좀 가르쳐 주세요.
아래 소스에서 자바스크립트를 수정해야 할것 같은데 제가 자바스크립트를 전혀 몰라 어찌할 바를 모르겠습니다.
링크를 걸어 둡니다.
결과는 login을 클릭해 보시면 됩니다.
아래는 소스입니다.
<html>
<head>
<SCRIPT LANGUAGE='JavaScript'>
function Eztoggle(e) {
if (e.style.display == "none")
{
if ( e == menu1 ){
if( menu2.style.display != "none" ){ menu2.style.display = "none"; }
}
else{
if( menu1.style.display != "none" ){ menu1.style.display = "none"; }
}
e.style.display = "";
if ( e == menu1 ){
LoginForm.id.focus();}
}
else { e.style.display = "none"; }
}
</script>
</head>
<body bgcolor="#ffffff" text="#CCCCCC" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<br>
<table align="center" bgcolor="#444444" border="0" cellpadding="0" cellspacing="0" width="700">
<tr>
<td height=30>
<a href="javascript:Eztoggle(menu1)" target="_self" title="" onfocus=blur() style=cursor:help; ONFOCUS="this.blur();"><font color="#ffffff">Login</font></A>
</td>
</tr>
</table>
<table align="center" bgcolor="#000000" class=box_all border="0" cellpadding="0" cellspacing="0" width="700" bordercolordark="white" bordercolorlight="#DDDDDD">
<tr>
<td height="40">
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="700" height="10">
<tr>
<td> </td>
</tr>
</table>
<table align="center" bgcolor="#000000" cellpadding="0" cellspacing="0" width="700">
<tr>
<td valign="top" width="100%">
<!--토글 -->
<table width=700 align=center cellpadding=0 cellspacing=0 border=0>
<tr>
<td style='padding:0 0 0 0' align=center>
<div id="menu1" style="width:10px; z-index:1; border:0px solid #000000; background-color:; layer-background-color:; margin:0px; display: none;">
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=20 bgcolor=aabbcc>
<td align=right>
login을 클릭하면 여기가 나와요!!!!
</td>
</TR>
</TABLE>
</div>
<div id="menu2" style="width:10px; z-index:1; border:0px solid #000000; background-color:; layer-background-color:; margin:0px; display: none;">
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=20 bgcolor=aabbcc>
<td></td>
</TR>
</TABLE>
</div>
</td>
</tr>
</table>
<!--토글 끝-->
<table width=700 border="0" bordercolor="silver" bordercolordark="white" cellspacing="0">
<tr>
<td height=50> </td>
</tr>
</table>
</body>
</html>
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 11개
아직 테이블을 밀어 내는건 문제가 있지만 이 정도만으로도 만족합니다.
언젠가 저도 다른분들에게 이렇게 도움을 줄 수 있는 사람이 될 그날을 꿈꿔 봅니다.
아~~!
기분이 좋군요.
align 설정은 제가 일부러 그렇게 한겁니다.
menu하고 login하고 테이블 위치가 틀리게 나오네요.
menu를 클릭했을때 보다 login을 클릭 했을때가 한칸 아래 나옵니다.
신경써 주셔서 감사합니다.
음료수라도 하나 사 드리고 싶네....
tabld td의 align 설정을 둘다 align=right로 하시던지 아님 둘다 제거 하십시오(제거하면 디폴드 왼쪽정렬)
해결되었습니다. position:absolute;추가 해야 합니다.
그리고 div1 위의 td에 있는 style도 삭제해야 합니다.
<!--토글 -->
<table width=700 align=center cellpadding=0 cellspacing=0 border=0>
<tr>
<td>
<div id="menu1" style="position:absolute;width:100%; z-index:1; border:0px solid #000000; margin:0
px; visibility:hidden; overflow: hidden">
<table WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr HEIGHT=20 bgcolor=aabbcc>
<td>메뉴를 선택하셨군요.</td>
</tr>
</table>
</div>
<div id="menu2" style="position:absolute;width:100%; z-index:1; border:0px solid #000000; margin:0
px; visibility:hidden; overflow: hidden">
<table WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr HEIGHT=20 bgcolor=aabbcc>
<td align=right>
login을 클릭하면 여기가 나와요!!!!
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!--토글-->
단지 해당부분을 눌렀을때 새로운 테이블이 나오며, 기존 테이블이 아래로 밀리게만 하면 됩니다.
음~~~!
제가 간과한게 있군요.
root님께서 가르쳐 주신 소스로 하면 아래로 밀리는게 아니고 테이블 위에 겹치는군요.
모질라에서도 되길래 잠시 흥분을 했습니다.
처음에 올리신것처럼 지금 처름 파일을 올리지 말고 현재 작업중인 파일의 링크를 좀 걸어주세요.
파일도 다시 올려주시면 좋구요.
한번 봐드리겠습니다.
아까는 안됐는데 다시하니 되는군요.
똑같이 했었는데...
아~~
근데 login을 눌렀을때 하고 menu를 눌렀을때 하고 나오는 내용 위치가 틀립니다.
원본 html 소스에 <form> 태그를 아래와 같이 넣어셔야 합니다.
<form name=LoginForm> ..........<input type=text name=id>...............</form>
그래서 LoginForm에 있는 id 라는 곳에 포커스를 설정할수있습니다.
없으면 script 에러가 발생합니다.
<a href="javascript:Eztoggle('menu1')" target="_self" title="" onfocus=blur() style=cursor:help; ONFOCUS="this.blur();"><font color="#ffffff">Login</font></a>
## Menu를 선택하면 menu2가 나오도록 다음내용을 추가 하시면 될것 같군요.
<a href="javascript:Eztoggle('menu2')" target="_self" title="" onfocus=blur() style=cursor:help; ONFOCUS="this.blur();"><font color="#ffffff">Menu</font></a>
## 그리고 menu2가 선택되었을때 나올내용도 div id=menu2에 설정을 해야 되구요.
<div id="menu2" style="width:100%; z-index:1; border:0px solid #000000; margin:0px; visibility:hidden; overflow: hidden">
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=20 bgcolor=aabbcc>
<td>메뉴를 선택하셨군요.</td>
</TR>
</TABLE>
</div>
잘 되네요. ㅎ ㅎ
염치없지만 하나 더 여쭤봐도 되겠어요?
위의 경우 login을 누르면 id="menu1" 부분이 나오는 토글이 하나만 적용된거 잖아요.
만약 토글을 하나 더 사용 하려면 어떻게 해야하죠?
위 링크를 예로 들자면...
login 옆에 menu라는 토글을 사용해서(물론 나오는 내용은 다르구요) 소스에 있는 id="menu2"를 나오게 하고 싶거든요.
그 결과는 다운로드2 입니다.
가르쳐 주신 스크립트에서는 토글이 하나만 되는거 같아서요.
응용을 하려고 하는데 시간이 많이 걸리네요. 아는것도 없구 T.T
<html>
<head>
<SCRIPT LANGUAGE='JavaScript'>
function Eztoggle(Layer_id) {
if(document.getElementById && document.getElementById(Layer_id)) {
// W3C Netscape 6일경우
var layer = document.getElementById(Layer_id).style;
} else if (document.all && document.all(Layer_id)) {
// MSIE 4 일경우
var layer = document.all(Layer_id).style;
} else if (document.layers && document.layers[Layer_id]) {
// NN 4 일경우
var layer = document.layers[Layer_id];
} else {
return false;
}
if(layer.visibility == 'hidden') {
layer.visibility = 'visible';
} else {
layer.visibility = 'hidden';
}
}
</script>
</head>
<body bgcolor="#ffffff" text="#CCCCCC" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<form name=LoginForm>
<br>
<table align="center" bgcolor="#444444" border="0" cellpadding="0" cellspacing="0" width="700">
<tr>
<td height=30>
<a href="javascript:Eztoggle('menu1')" target="_self" title="" onfocus=blur() style=cursor:help; ONFOCUS="this.blur();"><font color="#ffffff">Login</font></A>
</td>
</tr>
</table>
<table align="center" bgcolor="#000000" class=box_all border="0" cellpadding="0" cellspacing="0" width="700" bordercolordark="white" bordercolorlight="#DDDDDD">
<tr>
<td height="40">
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="700" height="10">
<tr>
<td> </td>
</tr>
</table>
<table align="center" bgcolor="#000000" cellpadding="0" cellspacing="0" width="700">
<tr>
<td valign="top" width="100%">
<!--토글 -->
<table width=700 align=center cellpadding=0 cellspacing=0 border=0>
<tr>
<td style='padding:0 0 0 0' align=center>
<div id="menu1" style="width:100%; z-index:1; border:0px solid #000000; margin:0px; visibility:hidden; overflow: hidden">
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=20 bgcolor=aabbcc>
<td align=right>
login을 클릭하면 여기가 나와요!!!!
</td>
</TR>
</TABLE>
</div>
<div id="menu2" style="width:100%; z-index:1; border:0px solid #000000; margin:0px; visibility:hidden; overflow: hidden">
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=20 bgcolor=aabbcc>
<td></td>
</TR>
</TABLE>
</div>
</td>
</tr>
</table>
<!--토글 끝-->
<table width=700 border="0" bordercolor="silver" bordercolordark="white" cellspacing="0">
<tr>
<td height=50> </td>
</tr>
</table>
</form>
</body>
</html>