Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Перманентное пропадание блока при наведении. (https://javascript.ru/forum/dom-window/44271-permanentnoe-propadanie-bloka-pri-navedenii.html)

Threaded_Inquisitor 13.01.2014 16:16

Перманентное пропадание блока при наведении.
 
Здравствуйте. Я этот форум расцениваю как крайнюю меру... в общем пришлось написать.

Захотел сделать плашку для сайта, да не простую, а чтобы она была с "position: fixed" и была на некоторых страницах, чтобы постоянно напоминала пользователю. В общем плашка-напоминалка :D

Плашку сделать получилось и даже получилось найти и подкорректировать код js. Зачем тут js? Дело в том, что эта вещица закрывает некоторую часть рабочего пространства (там тупо кнопки и текст) и пользователю нужно нажать, либо прочитать закрытую информацию. Решено было сделать её исчезающей. Так и было сделано! О боже, всё было идеально, но кнопка на страничке перестала нажиматься, ибо конструкция лишь меняла прозрачность.

Волей судьбы код был ещё более извращён до состояния, которое я могу продемонстрировать.
//Плашка-предупреждалка
$("#omfg_outer_Oo").live("mouseover", function() {
$('#omfg_outer_Oo').fadeToggle();
}) 

$("#omfg_outer_Oo").live("mouseleave", function() {
$('#omfg_outer_Oo').delay(3500).fadeToggle();
})


В принципе тут всё хорошо. Нажать можно и плашка появляется, но она назойливо появляется через 3 секунды... А хотелось бы , чтобы во время позиционирования курсора на блоке, плашка даже подумать не могла бы о появлении!

Пробовал химичить со stop() и toggle(). Ничего не помогает. Это - лучшее, что получилось. Помогите, пожалуйста :)

рони 13.01.2014 16:44

Threaded_Inquisitor,
о html самим догадаться?

Threaded_Inquisitor 13.01.2014 16:48

Ну там обычный див вот с этим...

#omfg_outer_Oo{background: none repeat scroll 0 0 #FFFFFF;height:135px;position: fixed;right:0;top:205px;width:445px;z-index:9999;padding:10px;}

BETEPAH 13.01.2014 17:34

Цитата:

Сообщение от Threaded_Inquisitor
Нажать можно и плашка появляется, но она назойливо появляется через 3 секунды... А хотелось бы , чтобы во время позиционирования курсора на блоке, плашка даже подумать не могла бы о появлении!

ничего не понял. По какому событию она должна появляться? Вы указали "mouseover", вот и появляется при позиционировании курсора.

Threaded_Inquisitor 13.01.2014 17:52

Когда я ничего не делаю, то плашка висит. Когда навожу мышку, то на некоторое время она пропадает, а потом снова появляется. Хочется чтобы она вовсе не появлялась, когда мы навели на место плашки мышку. А тогда, когда мы снова убираем мышку, нужно чтобы плашка появлялась (для этого я и экспериментировал с toggle()).

BETEPAH 13.01.2014 18:25

Странное издевательство надо пользователями - прятать плашку, когда они наводят мышь.
Уберите .fadeToggle() и поставьте .fadeIn() и .fadeOut()
Замените .live на .bind или .on, или сразу mouseover, mouseout, mouseenter, mouseleave, с которыми хорошо бы тоже разобраться :)

kostyanet 14.01.2014 03:46

Цитата:

Сообщение от Threaded_Inquisitor
Хочется чтобы она вовсе не появлялась, когда мы навели на место плашки мышку.

Это значит место должно остаться зарезервированным за вашей этой плашкой. Следовательно visibility и возможно потребуется задействовать какого-нибудь родителя с которым установить связь в css.

Ну да, по идее все это реализуется стилями.

Threaded_Inquisitor 14.01.2014 08:14

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

1) Попробовал поменять на ".bind" или ".on" и заменил ".fadeToggle()" на ".fadeIn()" и ".fadeOut()". Я так уже делал - она просто мигает. Не вариант... или нужно какую-то задержку поставить или ".stop()"... Если я ставлю ".stop()", то всё перестаёт работать, а это меня немного не устраивает))

2) Со стилями тоже не получится. Да, когда я делаю "hover" в css с "display: none" она исчезает, но постоянно мигает из за перемещения курсора по диву, что выглядит зверски))

Для наглядности кину то, что получилось с учётом новой информации:
//Плашка-предупреждалка
$("#omfg_outer_Oo").on("mouseover", function() {
$('#omfg_outer_Oo').fadeOut();
}) 

$("#omfg_outer_Oo").on("mouseleave", function() {
$('#omfg_outer_Oo').fadeIn();
})

Threaded_Inquisitor 14.01.2014 11:09

Вот это работает, но как-то криво. Чувствуется, что что-то не то происходит. А что - понять не могу. Вернее как... курсор дрыгается, но блока нет, но посмотреть текст и нажать кнопочку за блоком можно и это главное.

$("#omfg_outer_Oo").on("mouseenter", function() {
$('#omfg_outer_Oo').hide();
}) 

$("#omfg_outer_Oo").on("mouseleave", function() {
$('#omfg_outer_Oo').fadeIn();
})


Аналогично работает конструкция:

$("#omfg_outer_Oo").on("mouseenter", function() {
$('#omfg_outer_Oo').fadeOut().toggle();
}) 

$("#omfg_outer_Oo").on("mouseleave", function() {
$('#omfg_outer_Oo').fadeIn();
})


В любом случае, всем спасибо. Особенно "BETEPAH" за наводку :)


Часовой пояс GMT +3, время: 08:40.