토글 질문 하나 올립니다. 정보
그누보드 토글 질문 하나 올립니다.
첨부파일
본문
제 홈에서 토글을 이용하려고 하는데 한가지 문제가 있어 이렇게 올립니다.
익스플로러에서는 잘 되는데 모질라에서는 안되는군요.
익스하고 모질라(넷스케이프)에서도 될 수 있도록 방법 좀 가르쳐 주세요.
아래 소스에서 자바스크립트를 수정해야 할것 같은데 제가 자바스크립트를 전혀 몰라 어찌할 바를 모르겠습니다.
링크를 걸어 둡니다.
결과는 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>
댓글 전체
root님! 고맙습니다.
아직 테이블을 밀어 내는건 문제가 있지만 이 정도만으로도 만족합니다.
언젠가 저도 다른분들에게 이렇게 도움을 줄 수 있는 사람이 될 그날을 꿈꿔 봅니다.
아~~!
기분이 좋군요.
아직 테이블을 밀어 내는건 문제가 있지만 이 정도만으로도 만족합니다.
언젠가 저도 다른분들에게 이렇게 도움을 줄 수 있는 사람이 될 그날을 꿈꿔 봅니다.
아~~!
기분이 좋군요.
다시 올렸습니다.
align 설정은 제가 일부러 그렇게 한겁니다.
menu하고 login하고 테이블 위치가 틀리게 나오네요.
menu를 클릭했을때 보다 login을 클릭 했을때가 한칸 아래 나옵니다.
신경써 주셔서 감사합니다.
음료수라도 하나 사 드리고 싶네....
align 설정은 제가 일부러 그렇게 한겁니다.
menu하고 login하고 테이블 위치가 틀리게 나오네요.
menu를 클릭했을때 보다 login을 클릭 했을때가 한칸 아래 나옵니다.
신경써 주셔서 감사합니다.
음료수라도 하나 사 드리고 싶네....
혹시 위의 99_1.htm 처럼 위치가 오른쪽과 왼쪽으로 다르게 나오는것이라면...
tabld td의 align 설정을 둘다 align=right로 하시던지 아님 둘다 제거 하십시오(제거하면 디폴드 왼쪽정렬)
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>
<!--토글-->
해결되었습니다. 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>
<!--토글-->
LoginForm.id.focus()는 의미 없습니다.
단지 해당부분을 눌렀을때 새로운 테이블이 나오며, 기존 테이블이 아래로 밀리게만 하면 됩니다.
음~~~!
제가 간과한게 있군요.
root님께서 가르쳐 주신 소스로 하면 아래로 밀리는게 아니고 테이블 위에 겹치는군요.
모질라에서도 되길래 잠시 흥분을 했습니다.
단지 해당부분을 눌렀을때 새로운 테이블이 나오며, 기존 테이블이 아래로 밀리게만 하면 됩니다.
음~~~!
제가 간과한게 있군요.
root님께서 가르쳐 주신 소스로 하면 아래로 밀리는게 아니고 테이블 위에 겹치는군요.
모질라에서도 되길래 잠시 흥분을 했습니다.
table에서 div 위치가 같은곳에 있어서 이상없을것 같은데요..
처음에 올리신것처럼 지금 처름 파일을 올리지 말고 현재 작업중인 파일의 링크를 좀 걸어주세요.
파일도 다시 올려주시면 좋구요.
한번 봐드리겠습니다.
처음에 올리신것처럼 지금 처름 파일을 올리지 말고 현재 작업중인 파일의 링크를 좀 걸어주세요.
파일도 다시 올려주시면 좋구요.
한번 봐드리겠습니다.
허걱!
아까는 안됐는데 다시하니 되는군요.
똑같이 했었는데...
아~~
근데 login을 눌렀을때 하고 menu를 눌렀을때 하고 나오는 내용 위치가 틀립니다.
아까는 안됐는데 다시하니 되는군요.
똑같이 했었는데...
아~~
근데 login을 눌렀을때 하고 menu를 눌렀을때 하고 나오는 내용 위치가 틀립니다.
혹시 LoginForm.id.focus(); 를 사용하기를 원하신다면
원본 html 소스에 <form> 태그를 아래와 같이 넣어셔야 합니다.
<form name=LoginForm> ..........<input type=text name=id>...............</form>
그래서 LoginForm에 있는 id 라는 곳에 포커스를 설정할수있습니다.
없으면 script 에러가 발생합니다.
원본 html 소스에 <form> 태그를 아래와 같이 넣어셔야 합니다.
<form name=LoginForm> ..........<input type=text name=id>...............</form>
그래서 LoginForm에 있는 id 라는 곳에 포커스를 설정할수있습니다.
없으면 script 에러가 발생합니다.
## Login을 선택했을때 menu1이 나오도록 처리한 다음 내용처럼
<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>
<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>
root님 답변 너무 감사합니다.
잘 되네요. ㅎ ㅎ
염치없지만 하나 더 여쭤봐도 되겠어요?
위의 경우 login을 누르면 id="menu1" 부분이 나오는 토글이 하나만 적용된거 잖아요.
만약 토글을 하나 더 사용 하려면 어떻게 해야하죠?
위 링크를 예로 들자면...
login 옆에 menu라는 토글을 사용해서(물론 나오는 내용은 다르구요) 소스에 있는 id="menu2"를 나오게 하고 싶거든요.
그 결과는 다운로드2 입니다.
가르쳐 주신 스크립트에서는 토글이 하나만 되는거 같아서요.
응용을 하려고 하는데 시간이 많이 걸리네요. 아는것도 없구 T.T
잘 되네요. ㅎ ㅎ
염치없지만 하나 더 여쭤봐도 되겠어요?
위의 경우 login을 누르면 id="menu1" 부분이 나오는 토글이 하나만 적용된거 잖아요.
만약 토글을 하나 더 사용 하려면 어떻게 해야하죠?
위 링크를 예로 들자면...
login 옆에 menu라는 토글을 사용해서(물론 나오는 내용은 다르구요) 소스에 있는 id="menu2"를 나오게 하고 싶거든요.
그 결과는 다운로드2 입니다.
가르쳐 주신 스크립트에서는 토글이 하나만 되는거 같아서요.
응용을 하려고 하는데 시간이 많이 걸리네요. 아는것도 없구 T.T
테스트 브라우저 : mozilla 1.4, explore 6.0
<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>
<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>
