ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Color Dialog - небольшие проблемы со скрыванием дива...
5 сообщений из 5, страница 1 из 1
Color Dialog - небольшие проблемы со скрыванием дива...
    #35926268
Георгий Давидович
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Георгий Давидович
Гость
Вообщем у меня кнопка, при клике на нее показывается див на котором лежит таблица. Если мышь медленно волочить за пределы дива то див скрывается, а вот если быстро то нет. Может кто увидит в чем проблема?

Вот код странички:


Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
<!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><title>
	Untitled Page
</title></head>
<body>


<table style="width: 250px">
    <tr>
        <td style="width: 200px" valign="middle">
            <input name="ColorControl1$TBColor" type="text" id="ColorControl1_TBColor" style="width:200px;" /></td>
        <td valign="middle">
            <input type="image" name="ColorControl1$ImageButton1" id="ColorControl1_ImageButton1" src="icon-color.gif" onclick="toggleColorDiv(); return false;" style="border-width:0px;" /></td>
    </tr>
    <tr>
        <td style="width: 150px" valign="middle">
            <div id="ColorControl1_colorDiv" style="border-width:1px; border-style: solid; border-color: black; overflow: auto; overflow-x: hidden; width: 200px; height: 300px; display:none; position: absolute;" onmouseout="hideColorDiv(event);">

<table width='150px' style='background-color:white' onmouseover='showColorDiv(event);'>
<tr onmouseover='showColorDiv(event);' onclick="chooseColor('LightBlue')">
  <td id='LightBlue' width='200px' onmouseover="showColorDiv(event); markRow(this, 'LightBlue');" onmouseout='unmarkRow(this);'>LightBlue            </td>
  <td style='min-width:50px;' onmouseover='showColorDiv(event);' bgcolor='LightBlue'>              <td>
</tr>
<tr onmouseover='showColorDiv(event);' onclick="chooseColor('LightCoral')">
  <td id='LightCoral' width='200px' onmouseover="showColorDiv(event); markRow(this, 'LightCoral');" onmouseout='unmarkRow(this);'>LightCoral           </td>
  <td style='min-width:50px;' onmouseover='showColorDiv(event);' bgcolor='LightCoral'>              <td>
</tr>
<tr onmouseover='showColorDiv(event);' onclick="chooseColor('LightCyan')">
  <td id='LightCyan' width='200px' onmouseover="showColorDiv(event); markRow(this, 'LightCyan');" onmouseout='unmarkRow(this);'>LightCyan            </td>
  <td style='min-width:50px;' onmouseover='showColorDiv(event);' bgcolor='LightCyan'>              <td>
</tr>
<tr onmouseover='showColorDiv(event);' onclick="chooseColor('LightGoldenrodYellow')">
  <td id='LightGoldenrodYellow' width='200px' onmouseover="showColorDiv(event); markRow(this, 'LightGoldenrodYellow');" onmouseout='unmarkRow(this);'>LightGoldenrodYellow </td>
  <td style='min-width:50px;' onmouseover='showColorDiv(event);' bgcolor='LightGoldenrodYellow'>              <td>
</tr>
</table>
</div>
        </td>
        <td valign="middle">
        </td>
    </tr>
</table>

<script type="text/javascript">

    var colorDivID, tbColorID;
    
    function toggleColorDiv()
    {
          var obj = document.getElementById(colorDivID);
          
          if (obj.style.display == "none")
          {
            obj.style.display = "";
            
            var color = document.getElementById(tbColorID).value;
            if ((color)&&(document.getElementById(color)))
                document.getElementById(color).bgColor = "Orange";
          }
          else
          {
            obj.style.display = "none"
          }
    }
    
    function showColorDiv()
    {
          var obj = document.getElementById(colorDivID);
          obj.style.display = "";
    }    
    
    function hideColorDiv(e)
    {
          if(e.srcElement.tagName == "DIV") 
          {
              var obj = document.getElementById(colorDivID);
              obj.style.display = "none";
          }
    } 
    
    function markRow(td, selColor)
    {
        var color = document.getElementById(tbColorID).value;

        if ((color)&&(document.getElementById(color)))
        {
            document.getElementById(color).bgColor = "";
        }
        
        td.bgColor = "Orange";
    }
    
    function unmarkRow(td)
    {
        td.bgColor = "";
    }
    
    function chooseColor(color)
    {
        document.getElementById(tbColorID).value = color;
        
        var obj = document.getElementById(colorDivID);
        obj.style.display = "none";
    }
</script>


         </div>
    
<script type="text/javascript"> colorDivID='ColorControl1_colorDiv'; tbColorID='ColorControl1_TBColor' </script></form>
</body>
</html>
...
Рейтинг: 0 / 0
11.04.2009, 14:26
| Ответить | Цитировать | Написать  
Color Dialog - небольшие проблемы со скрыванием дива...
    #35926629
vkle
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vkle
Участник
ИМХО проще так:
Код: plaintext
1.
2.
3.
    function hideColorDiv(e)
    {
              e.style.display = "none";
    }
Ну и вызов:
Код: plaintext
onmouseout="hideColorDiv(this);

PS: как бы ни тащил медленно мыша, всё ж список не скрылся (ФФ3).
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
11.04.2009, 23:59
| Ответить | Цитировать | Написать  
Color Dialog - небольшие проблемы со скрыванием дива...
    #35926646
Георгий Давидович
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Георгий Давидович
Гость
vkleИМХО проще так:
function hideColorDiv(e)
{
e.style.display = "none";
}

Да все дело в том, что onmouseout срабатывает при переходе с дива на таблицу в этом диве, а так же при пересекании границ ячеек!
Поэтому надо проверять какой элемент вызвал обработчик.
...
Рейтинг: 0 / 0
12.04.2009, 00:49
| Ответить | Цитировать | Написать  
Color Dialog - небольшие проблемы со скрыванием дива...
    #35926691
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
Файрбаг в ФФ3 мне вполне честно говорит, что
файрбагe.srcElement is undefined
hideColorDiv(mouseout clientX=136, clientY=103)
onmouseout()

if(e.srcElement.tagName == "DIV")
И я ему очень верю. Кто такой srcElement?
...
Рейтинг: 0 / 0
12.04.2009, 07:59
| Ответить | Цитировать | Написать  
Color Dialog - небольшие проблемы со скрыванием дива...
    #35927847
Георгий Давидович
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Георгий Давидович
Гость
Ладно, поставлю вопрос по иному.
Как вот тут по человечески скрыть див когда мыша отводим?


Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
<!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><title>
	Untitled Page
</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">


<div>

</div>
        <table style="width: 250px">
            <tr>
                <td style="width: 200px" valign="middle">
                    <input name="TBColor" type="text" id="TBColor" style="width:200px;" /></td>
                <td valign="middle">
                    <input id="Button1" type="button" value="button" onclick="toggleColorDiv(); return false;" /></td>
            </tr>
            <tr>
                <td style="width: 150px" valign="middle">
                    <div id="colorDiv" style="border-width:1px; border-style: solid; border-color: black; overflow: auto; overflow-x: hidden; width: 200px; height: 300px; display:none; position: absolute;
         " onmouseout="hideColorDiv(this);">
                        <table width="100%">
                            <tr>
                                <td>
                                    adas</td>
                                <td>
                                    asd</td>
                                <td>
                                    asd</td>
                            </tr>
                            <tr>
                                <td>
                                    asd</td>
                                <td>
                                    asd</td>
                                <td>
                                    asd</td>
                            </tr>
                            <tr>
                                <td>
                                    asd</td>
                                <td>
                                    asd</td>
                                <td>
                                    asd</td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td valign="middle">
                </td>
            </tr>
        </table>
    
<script type="text/javascript"> colorDivID='colorDiv';  </script></form>
    
<script type="text/javascript">

    var colorDivID
    
    function toggleColorDiv()
    {
          var obj = document.getElementById(colorDivID);
          
          if (obj.style.display == "none")
          {
            obj.style.display = "";
          }
          else
          {
            obj.style.display = "none"
          }
    }
    
    function showColorDiv()
    {
          var obj = document.getElementById(colorDivID);
          obj.style.display = "";
    }    
    
    function hideColorDiv(e)
    {
          e.style.display = "none";
    } 
    
</script>    
</body>
</html>
...
Рейтинг: 0 / 0
13.04.2009, 11:43
| Ответить | Цитировать | Написать  
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Color Dialog - небольшие проблемы со скрыванием дива...
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35927847&tid=1454966]:
 0ms
get settings:
 6ms
get forum list:
 15ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 157ms
get topic data:
 8ms
get forum data:
 3ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 220ms
total:  445ms
созд. / загр.: 445ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]