Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрытый слой появляется на клик (https://javascript.ru/forum/dom-window/1719-skrytyjj-slojj-poyavlyaetsya-na-klik.html)

comcam 07.09.2008 04:31

Скрытый слой появляется на клик
 
Давно ищу и не могу найти скрипт. На клик левой кнопкой в любом месте окна появляется в определённом месте скрытый слой. При повторном клике он изчезает. Раньше я встречал такие скипты, а сейчас нет. Может кто поможет?

itmgk 07.09.2008 09:24

1) делаешь скрытый слой. обязательно присваеваешь слою id (к примеру, is="test")
2) добавляешь событие в код
Код:

onclick="document.getElementById('test').style.display='block'"
убирать
Код:

document.getElementById('test').style.display='none'
ну, и, соответственно надо сделать проверку в данное время видимый слой или скрытый...

вроде не соврал :)

comcam 07.09.2008 14:27

Спасибо за помощь. Я написал такой код:
<html>
<head>
<title>Скрытый  блок</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function ablok() {
document.getElementById('test').style.display='block';
document.getElementById('test').style.display='none'
}
//-->
</script> 
</head>
<body onclick="ablok()">
<div align=center id="test" style="position:absolute; top:20; left:345; width:120; height:230">Скрытый блок</div>
</body></html>

Блок на клик изчезает, но больше не появляется. А хочется, чтобы пропадал-появлялся, пропадал появлялся... Как можно поправить?

itmgk 07.09.2008 15:05

а все потому, что в коде указано, что он появляется, и тут же исчезает
Код:

document.getElementById('test').style.display='block';
document.getElementById('test').style.display='none'


itmgk 07.09.2008 15:06

то есть, необходимо добавить проверку на то, видимый сейчас блок или нет...

itmgk 07.09.2008 15:10

что-то вроде того:
Код:

if (document.getElementById('test').style.display='block')
{document.getElementById('test').style.display='none'}
else
{document.getElementById('test').style.display='block'}

вроде так :)

comcam 07.09.2008 16:54

Не появляется. Может задать переменную?

comcam 07.09.2008 17:27

<html>
<head>
<title>Скрытый  блок</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function ablok() {
if (document.getElementById('test').style.display='block')
{document.getElementById('test').style.display='none'}
else
{document.getElementById('test').style.display='block'}
}
//-->
</script> 
</head>
<body onclick="ablok()">
<div align=center id="test" style="position:absolute; top:20; left:345; width:120; height:230">Скрытый блок</div>
</body></html>

Андрей Параничев 07.09.2008 17:49

Для сравнения используйте "==", а не "=" (присваивание).

comcam 07.09.2008 18:23

И так не работает.
<html>
<head>
<title>Скрытый  блок</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--

function ablok() {
var a=document.getElementById('test').style.display='block'
var b=document.getElementById('test').style.display='none'
var c=b
if (c==a)
{c=b}
else
{c=a}
}
//-->
</script> 
</head>
<body onclick="ablok()">
<div align=center id="test" style="position:absolute; top:20; left:345; width:120; height:230">Скрытый блок</div>
</body></html>

Андрей Параничев 07.09.2008 18:43

comcam,
<html>
<head>
<title>Скрытый  блок</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
 
function ablok() {
    with (document.getElementById('test').style)
    {
       if (display == "none")
           display = "block";
       else
           display = "none";
    }
}
//-->
</script> 
</head>
<body onclick="ablok()">
<div align=center id="test" style="position:absolute; top:20; left:345; width:120; height:230">Скрытый блок</div>
</body></html>


Это не обязательно делать через with, просто так удобнее. Никаких дополнительных переменных заводить не обязательно - сравнивать и изменять можно прямо данные элемента.

Обрамляйте листинги кода в специальные bb-теги, пожалуйста.

Phoenix 07.09.2008 18:52

вот рабочий код
<html>
<head>
<title>Скрытый  блок</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
 
function ablok() {
var c=document.getElementById('test');
if (c.style.display=='block')
{c.style.display='none';}
else
{c.style.display='block';}
}
//-->
</script> 
</head>
<body onclick="ablok()">
<div align=center id="test" style="position:absolute; top:20; left:345; width:120; height:230">Скрытый блок</div>
</body></html>

Phoenix 07.09.2008 18:53

уже написали работающий код)

comcam 07.09.2008 19:06

Оба скрипта работают. Большое спа-а-сибо!!!

Kolyaj 07.09.2008 20:07

Фигасе обсуждение :)

itmgk 08.09.2008 11:01

Цитата:

Сообщение от Kolyaj (Сообщение 5481)
Фигасе обсуждение :)

:D


Часовой пояс GMT +3, время: 08:35.