• Познакомьтесь с пентестом веб-приложений на практике в нашем новом бесплатном курсе

    «Анализ защищенности веб-приложений»

    🔥 Записаться бесплатно!

  • CTF с учебными материалами Codeby Games

    Обучение кибербезопасности в игровой форме. Более 200 заданий по Active Directory, OSINT, PWN, Веб, Стеганографии, Реверс-инжинирингу, Форензике и Криптографии. Школа CTF с бесплатными курсами по всем категориям.

Всплывающая Подсказка

  • Автор темы sasha465
  • Дата начала
S

sasha465

Здравствуйте! Вот решил сделать всплывающую подсказку. Собственно вот код:
Код:
$.fn.term=function(text){
return this.hover(function(event){
$('<div id="tip">'+text+'</div>').css({
position:'absolute',
background:'#999',
left:event.pageX+20,
top:event.pageY-20,
cursor:'pointer',
display:'none'}).appendTo('body').fadeIn();
},function(event){
$("#tip").fadeOut(1500,function(){ $(this).remove();
})
})
}
То есть при наведении мыши возникает div с заданными параметрами. Вот так подключаю затем:
$("#info_login").term("helo");
Так вот если начать быстро двигать мышкой около элемента то появится множество подсказок и исчезать явно будут не все. Отсюда вопрос как это исправить????
 
S

sasha465

Нашел решение. Всего лишь нужно было в первый параметр-функцию обработчика события hover поместить проверку на наличие элемента подсказки в DOM страницы и если нету то вывести подсказку:
Код:
$.fn.term=function(text){
return this.hover(function(event){
if(!($('*').is('div#tip'))){
$('<div id="tip">'+text+'</div>').css({
position:'absolute',
background:'#999',
left:event.pageX+20,
top:event.pageY-20,
cursor:'pointer',
display:'none'}).appendTo('body').fadeIn();
}
},function(event){
$("#tip").fadeOut(1500,function(){ $(this).remove();
})
})
}
 
S

sasha465

Теперь не могу сделать перемещение подсказки за курсором мыши. Странно, но при возникновении события mousemove вместе же с ним возникает и mouseout, хотя курсор за границу не вышел. Получается так, что подсказка при движении то появляется то исчезает. Причем если mousemove убрать, то проблема исчезает и подсказка висит в том месте где появилась пока не уберем курсор.
Код:
$.fn.term=function(text){
this.live("mouseover",function(event){
if(!($('*').is('div#tip'))){
$('<div id="tip">'+text+'</div>').css({
position:'absolute',
background:'#FC6',
//left:event.pageX+20,
//top:event.pageY-20,
cursor:'pointer',
display:'none'}).appendTo('body').fadeIn();
}

});
this.live("mousemove",function(event){
$("#tip").css({top:event.pageY+'px',left:event.pageX+'px'});
});
this.live("mouseout",function(event){
$("#tip").fadeOut(1000,function(){ $(this).remove();
})
});	 
}

Добавлено: Проблему решил))) Я тут как псих сам себе объясняю получается)))
Оказалось баг с css и вместо:
Код:
$("#tip").css({top:event.pageY+'px',left:event.pageX+'px'});
надо сделать так:
Код:
$("#tip").css({top:event.pageY-20,left:event.pageX+20});
 
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!