VPF::скрытие и показ дива - Форум программистов

feosr

Дата 14.6.2008, 21:20 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 174
Регистрация: 20.1.2007
Где: Минск

Репутация: 1
Всего: 2

Здраствуйте. Возникла проблема при создании менюшки для страницы:
Потребовалось сделать так, чтобы при наведении мыши на ссылку, 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 неселен, но срочно надо. Если подскажете хотябы в каком направлении идти, буду рад.

Это сообщение отредактировал(а) feosr - 15.6.2008, 09:25

krundetz

Дата 15.6.2008, 09:45 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

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

Это сообщение отредактировал(а) krundetz - 15.6.2008, 09:50

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

feosr

Дата 16.6.2008, 09:12 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 174
Регистрация: 20.1.2007
Где: Минск

Репутация: 1
Всего: 2

что-то неполучается.....может есть пример где прирывается событие? ибо у меня получилось толко его добавить. И уж никак не отменить таймаут.

krundetz

Дата 16.6.2008, 09:30 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

Ну если будет время вечером навояю пример

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

feosr

Дата 16.6.2008, 11:22 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 174
Регистрация: 20.1.2007
Где: Минск

Репутация: 1
Всего: 2

Премного благодарен)

krundetz

Дата 17.6.2008, 01:41 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

Вот вам обещаный пример

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 174
Регистрация: 20.1.2007
Где: Минск

Репутация: 1
Всего: 2

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

Код


<!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>

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »