Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > скрытие и показ дива


Автор: feosr 14.6.2008, 21:20
Здраствуйте. Возникла проблема при создании менюшки для страницы:
Потребовалось сделать так, чтобы при наведении мыши на ссылку, div с определенным ID отображался. Причем если мышь небудет находиться над ссылкой или над этим дивом то через 5 минут оно должно исчезать. Проблема решаема но если нам понадобился другой пункт меню оно должно было исчезать сразу же и появляться другой див.

Собственно у меня неполучилось сделать так чтобы соблюдались все условия. А именно проблемы с задержками получаються.
Код

<script type="text/javascript">
sid = 'portfolio';

function show(id){
if(sid != '' && sid != id){
    hide(sid)
}
    document.getElementById(id).style.display="block"
    
    sid = id
    
}
function hide(id){
    document.getElementById(id).style.display='none';
}
</script>


А вот задержки добавить как хачу неполучается. Тобиш оно то получается. Допустим если мыш вышла из показанного DIVa или от нашего пункта меню через онмаусаут можно это сделать но если снова навести мышку на это дело оно проигнорируется же и тупо исчезнет... вобщем... у меня уже голова болит.

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

p.s. Я в JS неселен, но срочно надо. Если подскажете хотябы в каком направлении идти, буду рад.

Автор: krundetz 15.6.2008, 09:45
Вам нужно сделать вызов метода hide() в нутри show() с задержкой в 5 секунд. Метод show() повесить на onmauseover а метод hide() на onmauseout. В метод hide() включить удаление события onmauseover в случае если мыш находится на элементе и добавление события onmauseover в случае если мыщ вышла из элемента.

Автор: feosr 16.6.2008, 09:12
что-то неполучается.....может есть пример где прирывается событие? ибо у меня получилось толко его добавить. И уж никак не отменить таймаут.

Автор: krundetz 16.6.2008, 09:30
Ну если будет время вечером навояю пример

Автор: feosr 16.6.2008, 11:22
Премного благодарен)

Автор: krundetz 17.6.2008, 01:41
Вот вам обещаный пример
Код

<script>
lastId = '';
flagId = '';
tId = '';
function setFlag(id)
{
    flagId = id;
    //alert(id);
}
function show(id)
{
    if(document.getElementById(lastId))
    {
        if(document.getElementById(lastId).style.display == "block")
        {
            tId = lastId;
            hide();
        }
    }
    lastId = id;
    document.getElementById(id).style.display = "block";
    tId = id;
    setTimeout("hide()", 5000);
}
function hide()
{
    if(flagId != tId)
    {
        document.getElementById(tId).style.display = "none";
    }
    setTimeout("hide()", 5000);
}
</script>
<div onmouseover="setFlag('hd1');show('hd1')" onmouseout="setFlag('')" style='float:left;padding:10px;border:1px solid black;width:40%;'> Ссылка на первый div </div>
<div onmouseover="setFlag('hd2');show('hd2')" onmouseout="setFlag('')" style='float:left;padding:10px;border:1px solid black;width:40%;'> Ссылка на второй div </div>
<div id='hd1' style='clear:both;display:none;'>Скрытый первый div</div>
<div id='hd2' style='clear:both;display:none;'>Скрытый второй div</div>

делал наскорую руку и зевая поэтому не супер но работает

Автор: feosr 2.7.2008, 15:07
Вобщем, сення чет вспомнил про это меню и сразу придумал как сделать)) я сразу ступил очень сильно)))

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu v1.2 - by Fesor</title>
<style type="text/css">
body{
    background-color:#000000;
    color:#CCCCCC;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
}
a{
    color:#CCCCCC;
    text-decoration:none;
}
a:hover{
    color:#CCFF33;
    text-decoration:underline;
}
</style>
<script type="text/javascript">
    sid = '';
    function show(id){
        if(sid != ''){
            document.getElementById(sid).style.display = "none";
        }
        document.getElementById(id).style.display = "block";
        sid = id;
        t = setTimeout("hideall()", 5000);
    }
    
    function smarthider(){
        t = setTimeout("hideall()", 5000);
    }
    
    function hideall(){
        if(sid != ''){
            document.getElementById(sid).style.display = "none";
            sid = '';
        }
    }
</script>
</head>

<body>
<div id="topmenu">
  <div id="parent" align="center"><a href="#" onmouseover="hideall();">Главная</a> | <a href="#"  onmouseover="show('slave-1');">Портфолио</a> | <a href="#" onmouseover="show('slave-1');">Форум</a> | <a href="#" onmouseover="hideall();">О сайте</a></div>
  <div id="slave-1" align="center" style="display:none;" onmouseover="clearTimeout(t)" onmouseout="smarthider()"><a href="#">Верстка</a> | <a href="#">Програмирование</a> | <a href="#">Визуализация</a></div>
  <div id="slave-2" align="center" style="display:none;" onmouseover="clearTimeout(t)" onmouseout="smarthider()"><a href="#">Регистрация</a> | <a href="#">Вход</a></div>
</div>
</body>
</html>


Работает вроде как))) достаточно просто... вобщем если каму надо.... делюсь)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)