Форум

Poision · #1 (**permalink**) 26.01.2014, 06:11

Добрый день, прошу помощи. Написал очень простенькую функцию, на подобие подсказок на сайте.

function hint (mess) {

var div = document.getElementById('hint');
div.innerHTML = mess;

var top = parseFloat(document.body.scrollTop);
var x = event.clientX;
var y = event.clientY+top;

div.style.top = y + 10;
div.style.left = x + 10;

div.style.display = '';

}

function delhint () {
document.getElementById('hint').style.display = 'none';
}

При наведении на элемент с onmouseover="hint('Подсказка!');" рядом появляется окошко с подсказкой, ну я думаю вы поняли).
Хотелось бы чтобы пока указатель мыши находится на элементе, блок div постоянно менял свое положение, т.е. не однократно при наведении, а постоянно пока наведено.
Если подобная тема уже есть, тыкнете

Спасибо

ksa · #2 (**permalink**) 27.01.2014, 08:38

Сообщение от Poision

Хотелось бы чтобы пока указатель мыши находится на элементе, блок div постоянно менял свое положение

Добавь mousemove...
http://api.jquery.com/mousemove/#mousemove1

Poision · #3 (**permalink**) 27.01.2014, 10:51

То что нужно! Спасибо!

Cuntmann · #4 (**permalink**) 27.01.2014, 14:27

try, как говорится, this

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>12345</title>
<style>
body{color:#000;background-color:#fcfcfc;font-family:Georgia,'Bookman Old Style',Verdana;font-size:14px;text-align:center;}
p{text-align:left;text-indent:10px;}
#art_delete,#art_this{width:30%;border:1px dashed #ccc;padding:10px;}
#art_this{position:absolute;right:10px;}
#divhint{position:absolute;padding:20px;border:2px solid #abc;border-radius:5px;background-color:Lightsteelblue;color:#fff;font-size:16px;}
#art_comma{padding:200px 20px}
</style>
<script>
/*
часть кода заимствована отсюда:
http://javascript.ru/ui/draganddrop#koordinaty-i-knopka-myshi
*/
function $(id){return document.getElementById(id);}

function fixEvent(e) {
e=e || window.event;
if( e.pageX == null && e.clientX != null ){
var html=document.documentElement,
    body=document.body;
e.pageX=e.clientX+(html && html.scrollLeft || body && body.scrollLeft || 0)-(html.clientLeft || 0);
e.pageY=e.clientY+(html && html.scrollTop || body && body.scrollTop || 0)-(html.clientTop || 0);
}
return e;
}

function hint(obj,flag){
if(!$('divhint')){document.body.appendChild(document.createElement('div')).setAttribute('id','divhint');}
if(flag){
document.onmousemove=function(evt){ 
$('divhint').innerHTML=obj.getAttribute('data-hint');
var W=document.body.offsetWidth,
    w=$('divhint').offsetWidth,
	l=(W >= evt.pageX+10+w)?(evt.pageX+10):(evt.pageX-w-10),
	t=evt.pageY+10,
	evt=fixEvent(event);
$('divhint').style.left=l+'px';
$('divhint').style.top=t+'px';
}
}
else{
document.onmousemove=null;
document.body.removeChild($('divhint'));
}
}

function init(){
var pops=document.getElementsByClassName('pop_over');
for(var i=0;i < pops.length;i++){
pops[i].onmouseenter=function(){
hint(this,true);
}
pops[i].onmouseleave=function(){
hint(this,false);
}
}
}

window.onload=init;
</script>
</head>
<body>
<div class="pop_over" id="art_delete" data-hint="Эта часть статьи описывает оператор delete">
<p>При успешном выполнении оператор delete удаляет свойство из объекта.</p>
<p>При этом delete не меняет прототип объекта, даже если там есть свойство, совпадающее по названию с удаляемым.</p>
<p>Некоторые свойства объектов не могут быть удалены. В спецификации такие свойства обозначены флагом DontDelete.</p>
</div>
<div class="another" id="art_comma">
<p>Оператор "запятая" вычисляет оба операнда и возвращает значение второго</p>
<p>Как правило, он используется, когда хочется включить несколько выражений в то место, где должно быть одно. Например, указать несколько параметров для цикла for.</p>
<p>Допустим, в arr хранится двумерный массив (матрица) по 10 элементов с каждой стороны. Следующий код использует оператор запятая для того, чтобы увеличить две переменных сразу.</p>
</div>
<div class="pop_over" id="art_this" data-hint="Оператор this - всему голова">
<p>Оператор this возвращает ссылку на объект, являющийся текущим контекстом вызова. Это позволяет обращаться к свойствам "текущего" объекта: this.property.</p>
<p>Текущий объект не является жестко фиксированным и зависит от контекста вызова функции. Он является, своего рода, скрытым параметром.</p>
<p>Есть четыре различных варианта его передачи.</p>
</div>
</body>
</html>

рони · #5 (**permalink**) 27.01.2014, 14:33

Cuntmann,
есть параметр run для запуска кода тут

[HTML run][/HTML]

Cuntmann · #6 (**permalink**) 27.01.2014, 19:43

барство все это

Форум

Справочник

Discord чат

Курсы javascript