Форум

morg4n · #1 (**permalink**) 05.08.2010, 17:01

<script>
function getBrowserWidth()
	{
	var x = 0;
	if (self.innerHeight)
		{
		x = self.innerWidth;
		}
	else if (document.documentElement && document.documentElement.clientHeight)
		{
		x = document.documentElement.clientWidth;
		}
	else if (document.body)
		{
		x = document.body.clientWidth;
		}
	return x;
	}
//Наведем на объект
function disShow(what)
	{
	//Позиция появляющегося элемента
	posX = $(what).offsetLeft;
	posY = $(what).offsetTop;
	bWidth = getBrowserWidth();
	//Если уходит за край экрана - уменьшаем
	if(posX + 200 >= bWidth + 20) 
		posX = $(what).offsetLeft-140;
	//Стилизуем всплывающий элемент
	$(help).style.left = posX + 20 + 'px';
	$(help).style.top = posY + 40 + 'px';
	$(help).style.display = 'block';
	//Наполняем содержанием подсказку
	$(help).innerHTML = $(what).getAttribute("dis");
	$(help).setAttribute("what",what.id);
	//Выделяем первоначальный объект на котором лежит подсказка
	$(what).innerHTML = $(what).getAttribute("dis");
	}
//потеря побъектом курсора
function disHide(what)
	{
	//Прячим подсказку
	$(help).style.display = 'none';
	//оставляем подсказке ид объекта на случай, если мы наведем мышкой на подсказу
	$(help).setAttribute('what',what.id);
	//Снимаем выделение первоначального объекта с подсказкой
	$(what).innerHTML = '';
	}
//Наведем на подсказку
function disOn()
	{
	//Получаем имя прежнего объекта
	what =  $(help).getAttribute("what");
	//Так как мы не убрали курсор с обекта, а перевели его на подсказку то возобновляем выделение объекта
	$(what).innerHTML = $(help).innerHTML;
	//Показываем подсказку
	$(help).style.display = 'block';
	}
//Потеря подсказкой курсора
function disOff()
	{
	//Получаем имя прежнего объекта
	what =  $(help).getAttribute("what");
	//Прячим подсказку
	$(help).style.display = 'none';
	//Снимаем выделение первоначального объекта с подсказкой
	$(what).innerHTML = '';
	}
function $( el )
	{
	return	typeof el == 'string' ? document.getElementById(el) : el;
	}

</script>
<style>
body {padding:0px;margin:0px;}
.item {width:100px;height:50px;background:green;border:2px solid black;}
#help {display:none;background:grey;border:2px solid black;width:200px;position:absolute;}
</style>
<body>
<div class="item" dis="body" id="div1" onMouseOver="disShow(this);" onMouseOut="disHide(this);"></div>

<div style="position:absolute;right:0px;" class="item" dis="skirt" id="div2" onMouseOver="disShow(this);" onMouseOut="disHide(this);"></div>

<div id="help" onMouseOver="disOn();" onMouseOut="disOff();"></div>
</body>

можно ли и нужно ли оптимизировать?
думаю, что нужно..
Спасибо за понимание.

пс. нет ли у кого нить рабочего example этого скрипта (http://www.noinimod.ru/52/)

exec · #2 (**permalink**) 05.08.2010, 18:57

Нужно сделать так, чтобы при перемещении мышки над объектом подсказка тоже двигалась за курсором.
+ я бы сделал сохранение текущего титла не в атрибут, а в переменную-буфер.

morg4n · #3 (**permalink**) 05.08.2010, 19:01

по поводу переменной буфер. это просто var прописать, тогда она будет и вне функции, как я понял.

а с перемещением я думаю будут траблы, тк она скакать будет когда на саму подсказку наводишь \ сводишь с нее мышку..

exec · #4 (**permalink**) 05.08.2010, 19:08

С перемещением никаких трабл не возникает, просто меняйте left/top у элемента при mousemove элемента, на которого наведена мышь. У меня например это реализовано так:

this.onmousemove = function (ev) {
	ev = ev || window.event;
	_hint = document.getElementById('hint');
	_hint.style.top = ev.pageY + 10;
	_hint.style.left = ev.pageX + 10;
}

morg4n · #5 (**permalink**) 05.08.2010, 20:02

<script>
var theWidth, theHeight;
// Window dimensions:
if (window.innerWidth) 
	{
	theWidth=window.innerWidth;
	}
else if (document.documentElement && document.documentElement.clientWidth) 
	{
	theWidth=document.documentElement.clientWidth;
	}
else if (document.body) 
	{
	theWidth=document.body.clientWidth;
	}
if (window.innerHeight) 
	{
	theHeight=window.innerHeight;
	}
else if (document.documentElement && document.documentElement.clientHeight) 
	{
	theHeight=document.documentElement.clientHeight;
	}
else if (document.body) 
	{
	theHeight=document.body.clientHeight;
	}
//Наведем на объект
function disShow(what,ev)
	{
	ev = ev || window.event;
	//Наполняем содержанием подсказку
	$(help).innerHTML = $(what).getAttribute("dis");
	//Позиция появляющегося элемента
	posX = ev.clientX;
	posY = ev.clientY;
	//украшаем размеры окна ШИРИНА
	if(posX + 200 > theWidth)
		$(help).style.right = 10  + 'px';
	else
		$(help).style.left = posX - 20  + 'px';
	if(posX - 20 < 10)
		$(help).style.left = 10  + 'px';
	//Стилизуем всплывающий элемент
	$(help).style.display = 'block';
	$(help).style.top = posY +20 + 'px';
	//Наполняем содержанием подсказку
	$(help).innerHTML = $(what).getAttribute("dis");
	//Выделяем первоначальный объект на котором лежит подсказка
	$(what).style.border = '2px solid red';
	}
//потеря побъектом курсора
function disHide(what)
	{
	//Прячим подсказку
	$(help).style.display = 'none';
	//Снимаем выделение первоначального объекта с подсказкой
	$(what).style.border = '2px solid black';
	$(help).style.removeProperty('left');
	$(help).style.removeProperty('right');
	$(help).style.removeProperty('top');
	$(help).style.removeProperty('bottom');
	}
function $( el )
	{
	return	typeof el == 'string' ? document.getElementById(el) : el;
	}

</script>
<style>
body {padding:0px;margin:0px;}
.item {width:100px;height:50px;background:green;border:2px solid black;padding:5px;}
#help {display:none;background:grey;border:2px solid black;width:200px;position:absolute;padding:2px;}
</style>
<body>
<div class="item" dis="FullPlate Armor" id="div1" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item1</div>

<div style="position:absolute;right:0px;" class="item" dis="Fallen Sword" id="div2" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item2</div>
<div class="item" dis="FullPlate Armor" id="div1" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item1</div>

<div style="position:absolute;right:0px;" class="item" dis="Fallen Sword" id="div2" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item2</div>
<div class="item" dis="FullPlate Armor" id="div1" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item1</div>

<div style="position:absolute;right:0px;" class="item" dis="Fallen Sword" id="div2" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item2</div>
<div id="help" ></div>
</body>

доработан. актуальный вопрос про исходники , образцы (http://www.noinimod.ru/52/) - я так и не смог заставить работать =\

morg4n · #6 (**permalink**) 05.08.2010, 20:12

чтото здесь туго с style.top если подсказка создает вертикальный скролл.
я убрал странный сложный if про высоту и все вроде как то заработало.
но меня смущает то, что после resize окна, у меня в скрипте переменные theWidth и theHeight не меняюцца.

morg4n · #7 (**permalink**) 06.08.2010, 01:53

Форум

Справочник

Discord чат

Курсы javascript