Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Простой скрипт выпадающего меню - помогите найти ошибку
 
 автор: irr   (07.12.2006 в 08:42)   письмо автору
 
 

Нашел простой скрипт выпадающего меню. Но он работает только в 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>&nbsp;|&nbsp;</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);
}

   
 
 автор: 12345   (07.12.2006 в 13:48)   письмо автору
 
   для: irr   (07.12.2006 в 08:42)
 

Смотрите любой пример кода, где кроссбраузерно работают с событиями. Увидите что-то типа function(e){e=e||event;....}. Подробнее на эту тему в справочниках. А по свойствам объектов чуть устаревше, но кратко - http://www.kruglov.ru/articles/crossbrowserdhtml/ .

   
 
 автор: irr   (08.12.2006 в 09:33)   письмо автору
 
   для: 12345   (07.12.2006 в 13:48)
 

12345, спасибо за статью!

Кое-что исправил, но вылезли новые проблемы. Похоже, posLeft и posTop Firefox тоже не как-то некорректно возвращает... Хех. А какой справочник Вы бы порекомендовали? Чтобы там все эти кроссбраузерные различия описывались более подробно.

   
 
 автор: servannin   (08.12.2006 в 12:38)   письмо автору
 
   для: irr   (08.12.2006 в 09:33)
 

Я бы порекомендовал забить на FF ;)

Если с инглишом всё гут - почитайте следующее -
http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/

   
 
 автор: irr   (08.12.2006 в 16:29)   письмо автору
 
   для: 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);

}

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования