|
|
|
| Нашел простой скрипт выпадающего меню. Но он работает только в IE и Opera, а в Firefox (1.5) не хочет. Посмотрел консоль JavaScript, там куча сообщений "Ошибка: строка 35: window.event has no properties".
Пробовал закомментировать, далее она ругается на строки 35, 36, 11 и 12, т.е. все в которых содержится слово event. Т.е. я так понимаю, FireFox не поняла на какой именно event нужно реагировать, или что-то типа того. Или она не знает слова clientX и clientY.
Как это можно исправить?
Код html-страницы:
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<script language=JavaScript src="dropmenu.js"></script>
<!-- список подпунктов -->
<div id=dropmenu2
style="BORDER-RIGHT: 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: 1px solid; PADDING-LEFT: 3px;
LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 3px; BORDER-LEFT: 1px solid; WIDTH: 90px;
PADDING-TOP: 3px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ffffff">
<a class=menusmall href="read.php">Читать</A><BR>
<a class=menusmall href="write.php">Новая тема</A><BR>
<a class=menusmall href="delete.php">Удалить</A><BR>
</div>
<table cellSpacing=0 cellPadding=0 border=0><tr align="center">
<!-- меню без подпунктов -->
<td><a href="index.php">Главная</a></td>
<td> | </td>
<!-- меню с подпунктами -->
<td>
<liayer><layer visibility="show">
<a class=menu onmouseover="dropit(event,dropmenu2);"
title="" href="forum.php">Форум</A>
</layer></liayer>
</td>
</tr></table>
</tr></td></table>
|
Код java-скрипта:
var rX, lX, tY, bY;
var zi=100;
document.body.onmousemove=updateIt;
function dropit(e,mnu){
if (window.themenu&&themenu.id!=mnu.id)
themenu.style.visibility="hidden";
themenu=mnu;
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX; // строка 11!
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+15; // строка 12!
lX=themenu.style.posLeft-document.body.scrollLeft;
rX=lX+themenu.offsetWidth;
tY=themenu.style.posTop-document.body.scrollTop-25;
bY=themenu.offsetHeight+tY+25;
updateIt(mnu);
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible";
themenu.style.zIndex=zi++;
}
}
function hidemenu(whichone){
if(window.themenu)
themenu.style.visibility="hidden";
if(typeof(themenu)!="undefined")
themenu.visibility="hide";
}
function updateIt(mnu){
var x,y
x=window.event.clientX; // строка 35!
y=window.event.clientY; // строка 36!
if(x>rX || x<lX) hidemenu(mnu);
else if(y>bY+1 || y<tY) hidemenu(mnu);
}
|
| |
|
|
|
|
|
|
|
для: irr
(07.12.2006 в 08:42)
| | Смотрите любой пример кода, где кроссбраузерно работают с событиями. Увидите что-то типа function(e){e=e||event;....}. Подробнее на эту тему в справочниках. А по свойствам объектов чуть устаревше, но кратко - http://www.kruglov.ru/articles/crossbrowserdhtml/ . | |
|
|
|
|
|
|
|
для: 12345
(07.12.2006 в 13:48)
| | 12345, спасибо за статью!
Кое-что исправил, но вылезли новые проблемы. Похоже, posLeft и posTop Firefox тоже не как-то некорректно возвращает... Хех. А какой справочник Вы бы порекомендовали? Чтобы там все эти кроссбраузерные различия описывались более подробно. | |
|
|
|
|
|
|
|
для: irr
(08.12.2006 в 09:33)
| | Я бы порекомендовал забить на FF ;)
Если с инглишом всё гут - почитайте следующее -
http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/ | |
|
|
|
|
|
|
|
для: servannin
(08.12.2006 в 12:38)
| | в общем, я сделал вот как: ввел переменную k - это расстояние от левой границы окна до пункта меню. в html указал k отдельно для каждого пункта. а в скрипте постарался убрать все свойства объектов, которые отличаются в IE и FF. правда, для clientXY и pageXY все-таки пришлось сделать выбор в зависимости от браузера.
теперь все работает и в IE, и в опере, и в Firefox.
var rX, lX, tY, bY;
var zi=100;
document.body.onmousemove=updateIt;
function dropit(mnu,k){
if (window.themenu&&themenu.id!=mnu.id)
themenu.style.visibility="hidden";
themenu=mnu;
themenu.style.left=k;
themenu.style.top=60;
lX=k;
rX=k+90;
tY=35;
bY=125;
updateIt(mnu);
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible";
themenu.style.zIndex=zi++;
}
}
function hidemenu(whichone){
if(window.themenu)
themenu.style.visibility="hidden";
if(typeof(themenu)!="undefined")
themenu.visibility="hide";
}
function updateIt(mnu){
var x,y
<?php
$findme = 'gecko';
$mystring = strtolower($_SERVER["HTTP_USER_AGENT"]);
$pos = strpos($mystring, $findme);
if ($pos === false)
{ echo "
x=window.event.clientX;
y=window.event.clientY;
"; }
else
{ echo "
x=mnu.pageX;
y=mnu.pageY;
"; }
?>
if(x>rX || x<lX || y>bY || y<tY) hidemenu(mnu);
}
|
| |
|
|
|