Javascript.RU

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

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

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 постоянно менял свое положение, т.е. не однократно при наведении, а постоянно пока наведено.
Если подобная тема уже есть, тыкнете
Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 27.01.2014, 08:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,157

Сообщение от Poision
Хотелось бы чтобы пока указатель мыши находится на элементе, блок div постоянно менял свое положение
Добавь mousemove...
http://api.jquery.com/mousemove/#mousemove1
Ответить с цитированием
  #3 (permalink)  
Старый 27.01.2014, 10:51
Новичок на форуме
Отправить личное сообщение для Poision Посмотреть профиль Найти все сообщения от Poision
 
Регистрация: 26.01.2014
Сообщений: 2

То что нужно! Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 27.01.2014, 14:27
Аватар для Cuntmann
Аспирант
Отправить личное сообщение для Cuntmann Посмотреть профиль Найти все сообщения от Cuntmann
 
Регистрация: 26.01.2014
Сообщений: 78

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Cuntmann,
есть параметр run для запуска кода тут
[HTML run][/HTML]
Ответить с цитированием
  #6 (permalink)  
Старый 27.01.2014, 19:43
Аватар для Cuntmann
Аспирант
Отправить личное сообщение для Cuntmann Посмотреть профиль Найти все сообщения от Cuntmann
 
Регистрация: 26.01.2014
Сообщений: 78

барство все это
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
автоматическое появление текста, а мне надо чтоб при наведении Александр х@к Элементы интерфейса 3 08.09.2011 20:53
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Действия при наведении на элемент Garik Элементы интерфейса 6 24.08.2010 20:11
Появление текста при наведении курсора на ссылку Александра Элементы интерфейса 1 11.05.2009 00:22