Пропадает меню при переводе курсора на всплывающее окно
Добрый день, есть выпадающее меню, реализовано с помощью JS просто наводим мышью в указанное место и display:none; меняеться на блок, и мне этого было вполне достаточно, я использовал это как вход на сайт для модерирования. Вот только одна беда, всплывающее окно, браузерное которое позволяет выбрать пользователя, авто заполнение, мышь туда переводишь и она получается не на элементе и окно схлопывается.:-/ Вот стало интересно как этого избежать.:) Кто в курсе буду признателен.
|
Это в каком браузере так работает автозаполнение? Если появлению этого браузерного окна не избежать, то можно открывать и закрывать меню не по нахождению мыши, а по клику, то есть меню по клику поочерёдно то открывается, то закрывается.
|
Не, не подойдет, я бы до клика и сам догадался, мне нужно чтоб наводилось и открывалось. Кстати да, забыл сказать это проявляется только в firefox
|
Можете, пожалуста, поподробнее объяснить, какое браузерное окно появляется или кинуть скриншот, а то я сам постоянно работаю в Firefox, но не представляю, какое это окно.
|
Adept_90,
Ссылку на действующую страницу с траблом дайте (Или создайте такую страницу чисто с указанным контентом |
Ну логин что бы вставить. Это когда букву пишешь одну например a и сразу же список ранее заполненных вариантов - admin например, клик на это и если пароль был сохранен то заполниться с паролем. Если стрелками клавиатуры выбрать то все ок, только когда мышь туда переходит FF считает, что мышь ушла с элемента)) GooglChrom - адекватен в этом случаи.
|
Adept_90,
Ну Вот у мну ускоритель - всё элементарно - инжектор пучка - три направляющих = Вы вникаете - или жарко ? Тогда я продолжу - объяснять как нужно лечить зубы по описанию зубов |
Да, я уже понял, это выпадает обычный список для выбора значения для автозаполнения, но его нельзя назвать окном, лучше элементом окна. Тут я, к сожалению, не вижу никакого решения проблемы.
|
oneguy,
Мон сделать автоскрытие - с задержкой - достаточное для заполнения формы, либо на время - запретить автофокус Но лучше глядеть - а не догадывацо, (а то так экстрасенсом заделаться недолго |
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function getWidthElement(display){
try{
var width = display.firstChild.children[0].offsetWidth;
display.firstChild.style.width = width + "px";
if(width < 137){
display.firstChild.style.width = 100 + "px";
}
if(width > 137){
display.firstChild.style.width = 165 + "px";
}
if(width < 100){
display.firstChild.style.width = width + "px";
}
if(width > 250){
display.firstChild.style.width = width + "px";
}
}
catch(e){
var width = display.children[0].children[0].offsetWidth;
if(width < 137){
display.children[0].style.width = 103 + "px";
display.children[0].children[1].style.width = 103 + "px";
}
if(width > 137){
display.children[0].style.width = 150 + "px";
display.children[0].children[1].style.width = 150 + "px";
}
if(width < 100){
display.children[0].style.width = width + "px";
display.children[0].children[1].style.width = width + "px";
}
if(width > 250){
display.children[0].style.width = width + "px";
display.children[0].children[1].style.width = width + "px";
}
}
}
function getHeightElement(display){
try{
var height = display.firstChild.children[0].offsetHeight;
display.firstChild.style.height = height + "px";
}
catch(e){
var height = display.children[0].children[0].offsetHeight;
display.children[0].style.height = height + "px";
display.children[0].children[1].style.height = height + "px";
}
}
function overPunkt(display){
var dis = display;
try{
display.firstChild.style.display = 'block';
var width = display.firstChild.children[0].offsetWidth;
var height = display.firstChild.children[0].offsetHeight;
}
catch(e){
display.firstChild.nextSibling.style.display = 'block'
var width = display.children[0].children[0].offsetWidth;
var height = display.children[0].children[0].offsetHeight;
}
getWidthElement(dis);
getHeightElement(dis);
}
function outPunkt(display){
try{
display.firstChild.style.display = 'none'
}
catch(e){
display.firstChild.nextSibling.style.display = 'none'
}
}
</script>
<style type="text/css">
#button_6k{
background:#456;
width:90px;
height:68px;
position:relative;
margin-left:10px;
}
#button_6k:hover{
background:#654 ;
}
.all{
background:#178fa8;
width:100px;
min-height:100px;
position:absolute;
padding-left:34px;
padding-right:34px;
padding-top:13px;
top:80px;
left:10px;
z-index:50;
}
.display_none{
display:none;
}
.text{
position:absolute;
margin-left:-15px;
z-index:2;
padding-right:20px
}
.restriction{
position:relative;
min-height:100%;
}
.absolute{
position:absolute;
}
.lt{
background:url(../img/div_menu.png);
width:70px;
height:60px;
margin-top:-29px;
margin-left:-34px;
}
.rt{
background:url(../img/div_menu.png) -79px 0px;
width:70px;
height:60px;
margin-top:-29px;
right:0;
margin-right:-34px;
}
.top{
background:url(../img/div_top_bottom.png) 0px 0px;
width:100%;
height:60px;
margin-top:-29px;
}
.lt{
background:url(../img/div_menu.png);
width:70px;
height:60px;
margin-top:-29px;
margin-left:-34px;
z-index:1;
}
.lb{
background:url(../img/div_menu.png) 0px -61px;
width:70px;
height:60px;
bottom:0;
margin-bottom:-24px;
margin-left:-34px;
}
.rb{
background:url(../img/div_menu.png) -79px -61px;
width:70px;
height:60px;
bottom:0;
right:0;
margin-bottom:-24px;
margin-right:-34px;
}
.bottom{
background:url(../img/div_top_bottom.png) 0px -61px;
width:100%;
height:60px;
bottom:0;
margin-bottom:-24px;
}
.left{
background:url(../img/div_left_right.png) 0px 0px;
width:70px;
height:100%;
margin-left:-34px;
}
.right{
background:url(../img/div_left_right.png) -79px 0px;
width:70px;
height:100%;
right:0;
margin-right:-34px;
}
</style>
</head>
<body id="home_page">
<div onmouseout="outPunkt(this);" onmouseover="overPunkt(this);" class="float" id="button_6k">
<div class="all display_none">
<div class="text">
<form id="login-form" method="post" action="/n-menu-sale-puppies">
<fieldset class="userdata">
<p id="form-login-username">
<label for="modlgn-username">Логин</label>
<input type="text" size="18" class="inputbox" name="username" id="modlgn-username">
</p>
<p id="form-login-password">
<label for="modlgn-passwd">Пароль</label>
<input type="password" size="18" class="inputbox" name="password" id="modlgn-passwd">
</p>
<p id="form-login-remember">
<label for="modlgn-remember">Запомнить меня</label>
<input type="checkbox" value="yes" class="inputbox" name="remember" id="modlgn-remember">
</p>
<input type="submit" value="Войти" class="button" name="Submit">
<input type="hidden" value="com_users" name="option">
<input type="hidden" value="user.login" name="task">
<input type="hidden" value="aW5kZXgucGhwP0l0ZW1pZD0xMDU=" name="return">
<input type="hidden" value="1" name="name"> </fieldset>
</form>
</div>
<div class="restriction" style="width: 150px; height: 214px;">
<b class="absolute top"></b>
<b class="absolute bottom"></b>
<b class="absolute lt"></b>
<b class="absolute left"></b>
<b class="absolute right"></b>
<b class="absolute rt"></b>
<b class="absolute lb"></b>
<b class="absolute rb"></b>
</div>
</div>
</div>
</body>
</html>
Написал для вас такую форму, проверил, баг в FF есть в этой форме, смотрите)) |
| Часовой пояс GMT +3, время: 07:23. |