| |
|
|
| | Вот написал небольшой скрипт сабжа летающего за курсором пока наведена мышь.
Но трабл, в ие и опере если аккуратно навести мышь и не двигать ею, див остаётся на предыдущем месте, тоесть логически событие onmouseover срабатывает позже после наведения.
Собсно как решить?
И какие ещё неполадки может вызвать скрипт?
<script language="javascript" type="text/javascript">
var hint = {
hint: null,
setPos: function(e) {
e = e || window.event;
var bW = document.documentElement.offsetWidth || document.body.offsetWidth;
var bH = document.documentElement.offsetHeight || document.body.offsetHeight;
var el = hint.hint;
var w = el.clientWidth;
var h = el.clientHeight;
var x, y;
if(e.pageX && e.pageY) {
x = e.pageX;
y = e.pageY;
}
else {
var dE = document.documentElement;
var b = document.body;
x = e.clientX + (dE.scrollLeft || b.scrollLeft) - (dE.clientLeft || 0);
y = e.clientY + (dE.scrollTop || b.scrollTop) - (dE.clientTop || 0);
}
if(x + w + 15 >= bW) x = x - w - 15;
if(y + h + 15 >= bH) y = y - h - 15;
with(el.style) {
left = (x + 10) + "px";
top = (y + 10) + "px";
}
},
show: function(id) {
var el = this.hint = document.getElementById(id);
document.onmousemove = this.setPos;
el.style.display = "block";
return false;
},
hide: function() {
this.hint.style.display = "none";
document.onmousemove = null;
return false;
}
}
</script>
|
<a onmouseover="hint.show('hint')"
onmouseout="hint.hide()"
href="#">
[---------------------_mouseover me:)_---------------------]
</a>
<div id="hint"
style="display:none;
position:absolute;
border:1px solid black;
background-color: silver;
padding: 5px; color: black;">
blablabla
</div>
|
| |
| |
|
|
| |
|
|
| |
для: sl1p
(14.02.2009 в 00:42)
| | | Решение типовое - убрать из HTML-кода <div id="hint"> и динамически создавать его при всяком onmouseover и уничтожать при всяком onmouseout
Насчёт "ещё неполадок" - парочку заметил:
1. при малом по ширине окне горизонтальный скролл при движении по ссылке слева направо всё же появляется. Лечится просто - при расчёте переменных bW и bH пользуйте client вместо offset.
2. если у <body> установить маргины-паддинги нулевые, и ссылку поместить сразу за тегом <body>, то подсказка "лезет" под верхний бордер браузера. Лечится простой логикой - if и прочее. | |
| |
|
|
| |
|
|
| |
для: PAT
(14.02.2009 в 01:54)
| | | Решение типовое - убрать из HTML-кода <div id="hint"> и динамически создавать его при всяком onmouseover и уничтожать при всяком onmouseout
Я думал об этом когда просматривал чужой, похожий скрипт пытаясь найти ответ:) Но проблема в том что подсказок будет много, генерироваться они будут с помощью пхп и изменяться в дальнейшем на странице. Имхо тут не подходит такое решение..
До этого решал просто отдельной функцией которая постоянно при перемещении мышкой сохраняла её координаты, но вдруг подсказка никому ненужна и будет просто бесполезно кушать проц :)
Насчёт "ещё неполадок" - парочку заметил:
Спасибо, буду думать :) | |
| |
|
|
| |
|
|
| |
для: sl1p
(14.02.2009 в 03:56)
| | | >проблема в том что подсказок будет много, генерироваться они будут с помощью пхп и изменяться в дальнейшем на странице. Имхо тут не подходит такое решение..
На мой взгляд, когда подсказок много, создать один глобальный
var DV = document.createElement ('div');
with (DV.style) {color = ...; position = ...; border = ...; ...}
|
а потом при onmouseover его клонировать из функции, лишь изменяя left, top, да innerHTML - как раз таки много удобнее, чем наполнять HTML-код десятками <div id=... style=...>разные блабла</div>.
Но... хозяин - барин! :-)
Наше дело - предложить, ваше дело - отказаться! :-) | |
| |
|
|
| |
|
|
| |
для: PAT
(14.02.2009 в 04:42)
| | | Хм:)
Ну, тогда придётся создавать и глобальный массив из наполнения дива генерируемого пхп?:)
А насчёт клонирования style, можно вить использовать класс просто :)
В общем тут надо хорошо подумать :)
Спасибо за советы) | |
| |
|
|
