Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.01.2014, 16:16
Интересующийся
Отправить личное сообщение для Threaded_Inquisitor Посмотреть профиль Найти все сообщения от Threaded_Inquisitor
 
Регистрация: 15.10.2013
Сообщений: 10

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

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

Плашку сделать получилось и даже получилось найти и подкорректировать код 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(). Ничего не помогает. Это - лучшее, что получилось. Помогите, пожалуйста

Последний раз редактировалось Threaded_Inquisitor, 13.01.2014 в 16:20.
Ответить с цитированием
  #2 (permalink)  
Старый 13.01.2014, 16:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Threaded_Inquisitor,
о html самим догадаться?
Ответить с цитированием
  #3 (permalink)  
Старый 13.01.2014, 16:48
Интересующийся
Отправить личное сообщение для Threaded_Inquisitor Посмотреть профиль Найти все сообщения от Threaded_Inquisitor
 
Регистрация: 15.10.2013
Сообщений: 10

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

#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;}
Ответить с цитированием
  #4 (permalink)  
Старый 13.01.2014, 17:34
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от Threaded_Inquisitor
Нажать можно и плашка появляется, но она назойливо появляется через 3 секунды... А хотелось бы , чтобы во время позиционирования курсора на блоке, плашка даже подумать не могла бы о появлении!
ничего не понял. По какому событию она должна появляться? Вы указали "mouseover", вот и появляется при позиционировании курсора.
Ответить с цитированием
  #5 (permalink)  
Старый 13.01.2014, 17:52
Интересующийся
Отправить личное сообщение для Threaded_Inquisitor Посмотреть профиль Найти все сообщения от Threaded_Inquisitor
 
Регистрация: 15.10.2013
Сообщений: 10

Когда я ничего не делаю, то плашка висит. Когда навожу мышку, то на некоторое время она пропадает, а потом снова появляется. Хочется чтобы она вовсе не появлялась, когда мы навели на место плашки мышку. А тогда, когда мы снова убираем мышку, нужно чтобы плашка появлялась (для этого я и экспериментировал с toggle()).
Ответить с цитированием
  #6 (permalink)  
Старый 13.01.2014, 18:25
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Странное издевательство надо пользователями - прятать плашку, когда они наводят мышь.
Уберите .fadeToggle() и поставьте .fadeIn() и .fadeOut()
Замените .live на .bind или .on, или сразу mouseover, mouseout, mouseenter, mouseleave, с которыми хорошо бы тоже разобраться
Ответить с цитированием
  #7 (permalink)  
Старый 14.01.2014, 03:46
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

Ну да, по идее все это реализуется стилями.
Ответить с цитированием
  #8 (permalink)  
Старый 14.01.2014, 08:14
Интересующийся
Отправить личное сообщение для Threaded_Inquisitor Посмотреть профиль Найти все сообщения от Threaded_Inquisitor
 
Регистрация: 15.10.2013
Сообщений: 10

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

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();
})
Ответить с цитированием
  #9 (permalink)  
Старый 14.01.2014, 11:09
Интересующийся
Отправить личное сообщение для Threaded_Inquisitor Посмотреть профиль Найти все сообщения от Threaded_Inquisitor
 
Регистрация: 15.10.2013
Сообщений: 10

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

$("#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" за наводку
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция при наведении на Canvas объект max0n Общие вопросы Javascript 0 07.05.2013 17:56
Изменение свойств одного блока при наведении курсора на другой latter-day Events/DOM/Window 4 01.04.2013 18:35
Как узнать содержимое ссылки при наведении? if this.href.match()? Kanzaki Events/DOM/Window 10 02.09.2011 23:46
Картинка не изменяется при наведении. astashovaj Общие вопросы Javascript 11 12.01.2011 10:44
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48