Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Color Dialog - небольшие проблемы со скрыванием дива... / 5 сообщений из 5, страница 1 из 1
11.04.2009, 14:26
    #35926268
Георгий Давидович
Георгий Давидович
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Color Dialog - небольшие проблемы со скрыванием дива...
Вообщем у меня кнопка, при клике на нее показывается див на котором лежит таблица. Если мышь медленно волочить за пределы дива то див скрывается, а вот если быстро то нет. Может кто увидит в чем проблема?

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


Код: 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, 23:59
    #35926629
vkle
vkle
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Color Dialog - небольшие проблемы со скрыванием дива...
ИМХО проще так:
Код: 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
| Ответить | Цитировать | Написать  
12.04.2009, 00:49
    #35926646
Георгий Давидович
Георгий Давидович
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Color Dialog - небольшие проблемы со скрыванием дива...
vkleИМХО проще так:
function hideColorDiv(e)
{
e.style.display = "none";
}

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

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


Код: 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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Color Dialog - небольшие проблемы со скрыванием дива... / 5 сообщений из 5, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 587ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1454966]:
 0ms
get settings:
 9ms
get forum list:
 29ms
check forum access:
 5ms
check topic access:
 5ms
track hit:
 213ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 57ms
get tp. blocked users:
 2ms
others: 251ms
total:  587ms
x
x
Закрыть


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