Форум Сайтостроение Веб-строительство

Позиционирование div'ов при помощи JS

[Удален]
4528

Появилась необходимость "приклеить" некотрые дивы к курсору, причём только тогда, когда дивы display:none. Практически всё сделал, но не во всех браузерах работает и работает не совсем как надо. Камень преткновения - задание расположения диву по горизонтали (вертикаль не трогаю, хотя там по аналогии). делаю 

document.getElementById('div1').style.pixelLeft=x;//x - координата

Не везде работает... Как исправить?

Shtogrin
На сайте с 02.11.2006
Offline
95
Shtogrin
#1

Просто style.left и style.top

pixelLeft только в IE

www.shtogrin.com (http://www.shtogrin.com/). Канцтовары (http://www.invit.com.ua/). 1С Бухгалтерия (http://account.kiev.ua/).
[Удален]
#2
Shtogrin:
Просто style.left и style.top
pixelLeft только в IE

Оно вроде как в Ie как раз не работало, а ставить хаки на браузер не люблю...

Даже задам конкретнее вопрос: почему в FF не работает такое: 

<html>

<head>

<style type="text/css">

#menu{

display:block;

position:absolute;

}

</style>

</head>

<body onMouseMove="getMouseCoords();">

<div id="menu">fasfgsdgasgsd

</div>

<script>

function getMouseCoords(e)

{

document.getElementById('menu').style.left = window.event.x;

}

</script>

</body>

</html>
Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#3

nikitian, чем плохи хаки?

хаки исчезнут после того, как IE начнет правильно отображать

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
Shtogrin
На сайте с 02.11.2006
Offline
95
Shtogrin
#4 

<html>



<head>

<style type="text/css">

#menu{display:block;position:absolute;}

</style>

</head>



<script type="text/javascript">

function setEvent(element, eventName, handler)

{

	if(element.addEventListener)

		element.addEventListener(eventName, handler, false);

	else

		if(element.attachEvent)

			element.attachEvent('on' + eventName, handler);

}

function getMouseCoords(e)

{

	if(!e){e=window.event;}

	document.getElementById('menu').style.left = e.clientX+"px";

}

setEvent(document, 'mousemove', getMouseCoords);

</script>



<body>

<div id="menu" style="border:1px solid #ff0000;">fasfgsdgasgsd</div>

</body>



</html>

C обработчиком для body проблемы в Опере если body не заполняет все окно (в нашем случае), поэтому прицепил обработчик к документ. window.event нет в FF

dkameleon
На сайте с 09.12.2005
Offline
386
dkameleon
#5
nikitian:

Даже задам конкретнее вопрос: почему в FF не работает такое:

1. потому что не указана размерность:

document.getElementById('menu').style.left = window.event.x + "px";

про остальные возможные причины не скажу. да и проверять лень :)

Дизайн интерьера (http://balabukha.com/)
[Удален]
#6

Короче отгуглился и понял, что FF в принципе не хочет нормально(! - так-то работает на нехилых костылях, но консоль ошибками забивается) работать с event... Вот доработанный пример:


<html>

<head>

</head>

<body>

<div style="display:block;position: absolute;" id="menu">dsgasdgsgd</div>

<script language="JavaScript">

//определяем браузер

isOpera=isOpera5=window.opera&&isDOM; //Opera 5+

isMSIE=document.all&&document.all.item&&!isOpera; //MSIE 4+

isMozilla=navigator.appName=="Netscape"; //Mozilla



//объявляем глобальные переменные и обнуляем их

var mousex = 0;

var mousey = 0;



//находим координаты мышки в Эксплорере и иже с ним

if (isMSIE || isOpera){

document.onmousemove = function(){

mousex = event.clientX + document.body.scrollLeft;

mousey = event.clientY + document.body.scrollTop;



document.getElementById('menu').style.left = mousex;

return true;

}

}

//находим координаты мышки в Мозилле

else if (isMozilla){

document.onmousemove=function(e){

mousex = e.pageX;

mousey = e.pageY;



document.getElementById('menu').style.left = mousex;

return true;

}

}

</script>

</body>

</html>
Shtogrin
На сайте с 02.11.2006
Offline
95
Shtogrin
#7
nikitian:
Короче отгуглился и понял, что FF в принципе не хочет нормально(! - так-то работает на нехилых костылях, но консоль ошибками забивается) работать с event...

Потому что нет window.event ни в FF ни W3C. Попробуйте мой вариант.

P
На сайте с 08.03.2007
Offline
250
Pilat
#8

Для того, чтобы не было таких проблем, можно использовать библиотеки типа jQuery - там и хаков для браузером много, и поддерживают эти хаки для новых версий браузеров, и использовать проще.

Блог (http://www.pilat66.ru/)
[Удален]
#9

а не проще обрабатывать событие MouseOver ?

P
На сайте с 08.03.2007
Offline
250
Pilat
#10
burunduk:
а не проще обрабатывать событие MouseOver ?

Нет, не проще. В реальной задаче всегда появляются дополнительные условия, типа невыхода за границы какой-то области, или другие, а это дополнительные проблемы. Да и сами события в FF и IE не совсем одно и то же.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий