Страницы: 1
Подскажите!
Наваял код.
В IE работает прекрасно, меню выпадают, ячейки меняют цвет, ссылки работают.
В FF меню выпадает, а все остальное не работает.
<SCRIPT language=Javascript> <!-- function showSubMenu(subMenuId) { document.all[subMenuId].style.visibility = 'visible'; return true; } function hideSubMenu(subMenuId) { document.all[subMenuId].style.visibility = 'hidden'; return true; } //--> </SCRIPT> <STYLE type="text/css"> .subMenuStyle { POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 20; MARGIN-TOP: -1px; MARGIN-LEFT: -1px; CURSOR: auto; } .subMenuStyle2 { POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 20; MARGIN-TOP: -9px; MARGIN-LEFT: -1px; CURSOR: auto; } .subMenuItemStyle_1 { COLOR: #ffffff; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 20px; PADDING-TOP: 3px; TEXT-DECORATION: none; FONT-SIZE: 11px; FONT-FAMILY: Tahoma; FONT-WEIGHT: bold; BACKGROUND-COLOR: #51A4D8; } .subMenuItemStyle_2 { COLOR: #ffffff; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 20px; PADDING-TOP: 3px; TEXT-DECORATION: none; FONT-SIZE: 11px; FONT-FAMILY: Tahoma; FONT-WEIGHT: bold; BACKGROUND-COLOR: #A1C448; } .menu_1 { COLOR: #ffffff; FONT-SIZE: 12px; FONT-FAMILY: Arial; TEXT-ALIGN: center; FONT-WEIGHT: bold; PADDING-TOP: 35px; CURSOR: default; BACKGROUND-COLOR: #51A4D8; } .menu_2 { COLOR: #ffffff; FONT-SIZE: 12px; FONT-FAMILY: Arial; TEXT-ALIGN: center; FONT-WEIGHT: bold; PADDING-TOP: 35px; CURSOR: default; BACKGROUND-COLOR: #A1C448; } </STYLE> <table cellspacing="1" cellpadding="0" border="0"> <tr align="center"> <a Href="#" onmouseover="main_menu_1.className='menu_2'" onmouseout="main_menu_1.className='menu_1'"> <td class=menu_1 onmouseout="hideSubMenu('subMenu1'); "onmouseover="showSubMenu('subMenu1');" width="57" height="64" name="main_menu_1" id="main_menu_1" bgColor=#51A4D8> About</td></a> </tr> <TR> <TD> <TABLE bgColor=#ffffff border=0 cellPadding=0 cellSpacing=1 class=subMenuStyle id=subMenu1 onmouseout="hideSubMenu('subMenu1');" onmouseover="showSubMenu('subMenu1');"> <TBODY> <TR> <A href="#" onmouseover="menu1_1.className='subMenuItemStyle_2'" onmouseout="menu1_1.className='subMenuItemStyle_1'"> <TD bgColor=#51A4D8 class="subMenuItemStyle_1" name="menu1_1" id="menu1_1" noWrap>News</TD> </A></TR> <TR> <A href="arhiv.html" onmouseover="menu1_2.className='subMenuItemStyle_2'" onmouseout="menu1_2.className='subMenuItemStyle_1'"> <TD bgColor=#51A4D8 class="subMenuItemStyle_1" name="menu1_2" id="menu1_2" noWrap>Personal</TD> </A></TR> <TR> <A href="press/" onmouseover="menu1_3.className='subMenuItemStyle_2'" onmouseout="menu1_3.className='subMenuItemStyle_1'"> <TD bgColor=#51A4D8 class="subMenuItemStyle_1" name="menu1_3" id="menu1_3" noWrap>History</TD> </A></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
Отредактировано Vega (08-11-2006 03:44:06)
Отсутствует
Почитал на сайте, оказывается document.all не канает.
Поменял.
function showSubMenu() { document.getElementById('subMenu1').style.visibility = "visible"; return true; } function hideSubMenu() { document.getElementById('subMenu1').style.visibility = "hidden"; return true; }
Работает также.
Правда FF больше не ругается.
Господа подскажите!
У меня мысль такая, что обработчики событий в FF должны быть другие.
onmouseover="main_menu_1.className='menu_2'" onmouseout="main_menu_1.className='menu_1'"
Данное событие в IE меняет цвет ячейки.
В FF ноль эмоций.
Ссылки также не работают.
Добавлено Срд 08 Ноя 2006 06:53:34 :
Да и еще вопрос.
Как пральна сделать.
У меня 5 менюшек
Каждая под своим номером.
Так не работает
Отредактировано Vega (08-11-2006 07:01:55)
Отсутствует
Нашел на каком-то сайте.
Верно ли это?
Первый раз такое вижу
Категорически не рекомендуется пользоваться скриптами типа
<td onMouseOver="...">В CSS2 псевдокласс :hover может быть применен не только к ссылке, но и
к любому другому элементу. о, к сожалению, IE не поддерживает эту
возможность. Поэтому поступаем так - пишем в стилях:td{...styles...;behavior:url('td.htc');} /* работает в IE4+ */
td:hover{background-color:#RRGGBB;} /* стандарт CSS2, работает в NN6/Mozilla */И создаем файл td.htc, в котором пишем:
<public:attach event="onmouseover" onevent="color()"/>
<public:attach event="onmouseout" onevent="restore()"/>
<script language="JavaScript" type="text/javascript"><!--
function color() {runtimeStyle.backgroundColor='#RRGGBB';}
function restore() {runtimeStyle.backgroundColor='';}Теперь все ячейки таблиц при наведении мышки будут подсвечиваться.
Разумеется, можно использовать td.className:hover и td#idName:hover
для подсветки ячеек определенного стиля или конкретной ячейки.
Попробуем.
Ну хоть кто нибудь подскажет.
Все просматривают, но никто не поможет
Отсутствует
Ну хоть кто нибудь подскажет.
Все просматривают, но никто не поможет
Честно говоря, просто надоедает объяснять одно и тоже. По этому поводу в инете есть уйма текста.
http://www.google.com/search?q=css+drop+down+menu
http://pepelsbey.net/webdev/2006/04/26/inogda-oni-vyipadayut-snova/
Добавлено Срд 08 Ноя 2006 16:06:28 :
А ваш код надо просто выкинуть. Весь.
Isn't it ironic... don't you think? — Alanis Morissette
Отсутствует
Честно говоря, просто надоедает объяснять одно и тоже
Уважаемый Lynn c таким раскладом нада всех преподавателей уволить,
ведь они каждый год объясняют одно и то же.
Наличие уймы текста в интернете не значит что все становится понятно.
А ваш код надо просто выкинуть. Весь.
Чем код Вам не угодил.
За ссылки спасибо.
Отсутствует
У меня мысль такая, что обработчики событий в FF должны быть другие.
Выделить кодКод:
onmouseover="main_menu_1.className='menu_2'" onmouseout="main_menu_1.className='menu_1'"Данное событие в IE меняет цвет ячейки.
В FF ноль эмоций.
Все оказалось намного проще.
onmouseout="this.style.backgroundColor = '#51A4D8';" onmouseover="this.style.backgroundColor = '#a1c448';"
Данное действо меняет цвет ячейки во всех броузерах.
Добавлено Чтв 09 Ноя 2006 05:53:06 :
Господа!
Как сделать, чтобы ячейка работала как ссылка.
В смысле так
В IE работает.
FF и Opera отдыхают.
Отсутствует
Vega
c таким раскладом нада всех преподавателей уволить, ведь они каждый год объясняют одно и то же.
Правильно. Именно так и надо поступить. Они изначально вводят студентов в заблуждение потому что сами неквалифицированы. И это касается не только JavaScript & DOM Model.
Этот код
просто не правильный. А IE не правильно его понимает. Точнее допускает его использование.
Достаточно посмотреть DTD HTML/XHTML чтобы понять почему он не верный.
Как сделать, чтобы ячейка работала как ссылка.
<td onclick="document.location='http://где-то/там/лежала/страничка'">
Мне на самом деле по рукам надо настучать что потакаю Вам в неправильном коде.
На самом деле даже таблицы я не советовал бы использовать. Не говоря уже об document.location.
Потом Вам захочется изменять курсор над ячейкой таблицы, чтобы был "ручкой", Вы используете стиль cursor для разных браузеров и полезут ошибки в консоли JavaScript Это я так, предвосхищаю дальнейшие вопросы
Самый лучший способ сделать ссылку, это написать:
<a href="где-то там">что-то там</a>
Лучше еще никто не придумал
Отредактировано Azathoth (09-11-2006 06:28:41)
...она старалась, чтобы я больше времени проводил в разных пионерлагерях и группах продлённого дня - кстати сказать, удивительную красоту последнего словосочетания я вижу только сейчас. (c) Виктор Пелевин
Отсутствует
Azathoth спасибо +1
Добавлено Чтв 09 Ноя 2006 07:08:40 :
Да и еще вопрос.
Как пральна сделать.
У меня 5 менюшек
Каждая под своим номером.
Так не работает
Отсутствует
('subMenu' + num)
Круто! Строковое значение прибавить число!! Это прямо из серии: «Что получится если к двум метрам прибавить два литра?».
Благодарю алфавит за любезно предоставленные буквы.
Отсутствует
Vega
Так не работает
А что конкретно не работает? Если они должны пропадать, то вместо visibility следует использовать display. visibility просто скрывает элемент, но он остается в потоке и занимает место.
Infant
Круто! Строковое значение прибавить число!! Это прямо из серии: «Что получится если к двум метрам прибавить два литра?».
На самом деле тут работает автоматическое приведение типов. Перед сложением num приводится к строке и сложение происходит верно.
var a = "" + 234;
Будет считаться строкой "234". Это можно найти в разделе 11.6.1 ECMAScript-262. Полагаю в иных спецификациях (например JavaScriprt) будет то же самое.
...она старалась, чтобы я больше времени проводил в разных пионерлагерях и группах продлённого дня - кстати сказать, удивительную красоту последнего словосочетания я вижу только сейчас. (c) Виктор Пелевин
Отсутствует
Azathoth вопрос в том, что у меня 5 менюшек, которые имеют подменю (которые появляются при наведении мыши).
Эти пять меню пронумерованы:
subMenu1
subMenu2
subMenu3
subMenu4
subMenu5
Как пральна записать.
document.getElementById('subMenu').style.visibility = "visible";
Отсутствует
document.getElementById('subMenu' + num).style.display = "block";
...она старалась, чтобы я больше времени проводил в разных пионерлагерях и группах продлённого дня - кстати сказать, удивительную красоту последнего словосочетания я вижу только сейчас. (c) Виктор Пелевин
Отсутствует
Vega
document.getElementById('subMenu' + num).style.visibility = "visible";
А это откуда в таком случае?
...она старалась, чтобы я больше времени проводил в разных пионерлагерях и группах продлённого дня - кстати сказать, удивительную красоту последнего словосочетания я вижу только сейчас. (c) Виктор Пелевин
Отсутствует
Я в это деле чайник!!!
Этот вариант нашел на каком-то сайте.
Обсуждался вопрос выпадающих менюшек.
Кстати данная композиция 100% работает
Правда FF ругается
Отредактировано Vega (09-11-2006 09:51:07)
Отсутствует
Vega, а откуда берется subMenuId?
...она старалась, чтобы я больше времени проводил в разных пионерлагерях и группах продлённого дня - кстати сказать, удивительную красоту последнего словосочетания я вижу только сейчас. (c) Виктор Пелевин
Отсутствует
onmouseover="main_menu_1.className='menu_2'"
Это некорректная конструкция, потому что Вы обращаетесь по Id, не указывая ссылку на объект. Корректно - через document.getElementById('main_menu_1').className='menu_2'
Через this работает, потому что правильная конструкция.
<A href="arhiv.html"> <TD>Архив</TD> </A>
Это абсолютно некорректный код, и не только с точки зрения стандартов. Внутри таблицы вообще могут находиться только строки (ну и tbody, col, colgroup и другие табличные элементы), в строках - только ячейки, и уже в ячейках - другие элементы.
Отсутствует
Azathoth
а откуда берется subMenuId?
Не понял вопроса.
document.all[subMenuId]
функция проверяет наличие в документе значения id="submenu"
Я каждому меню присвоил Id
id="subMenu1"
id="subMenu2"
id="subMenu3"
Al_H Спасибо за комментарий.
Я уже все исправил. Остался вопрос
Данная конструкция работает во всех броузерах.
Но она не корректна, так как document.all уже не применяется.
Отсутствует
Vega
Не понял вопроса.
Это все потому что вопрос был наводящим, а ответ предназначался не мне, а Вам. Просто нужно было чуток подумать.
Вы сказали что:
Да и еще вопрос.
Как пральна сделать.
У меня 5 менюшек
Каждая под своим номером.
Код:
document.getElementById('subMenu' + num).style.visibility = "visible";
И я предполагал что Вы передаете функции showSubMenu номер элемента подменю. Иными словами функция должна была принимать вид:
showSubMenu(num) {
...
document.getElementById('subMenu' + num).style.visibility = "visible";
...
}
(IMHO лучше конечно использовать display вместо visibility)
Вот тогда num была бы определена. И вызов функции бы поменялся на onmouseout="hideSubMenu(1)".
Но раз num оказалась неопределена, я понял что Вы вернулись к изначальному определению функции:
showSubMenu(subMenuId) {
...
}
Тогда про num забываем и используем такую форму записи:
showSubMenu(subMenuId) {
...
document.getElementById(subMenuId).style.visibility = "visible";
...
}
И вызов функии становится: onmouseout="hideSubMenu('subMenu1')", т.е. возвращается к исходному состоянию.
Ответ на вопрос:
а откуда берется subMenuId?
очевиден. Эта переменная, равно как и предполагаемый num, берется из определения функции showSubMenu и является ее аргументом. Вот и всего-лишь навсего...
Добавлено Птн 10 Ноя 2006 04:56:54 :
Al_H
Это абсолютно некорректный код, и не только с точки зрения стандартов. Внутри таблицы вообще могут находиться только строки (ну и tbody, col, colgroup и другие табличные элементы)
Отвечаю на выделенное. Я сказал то же самое, но другими словами
DTD явно описывает что:
<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> <!ELEMENT CAPTION - - (%inline;)* -- table caption --> <!ELEMENT THEAD - O (TR)+ -- table header --> <!ELEMENT TFOOT - O (TR)+ -- table footer --> <!ELEMENT TBODY O O (TR)+ -- table body --> <!ELEMENT COLGROUP - O (COL)* -- table column group --> <!ELEMENT COL - O EMPTY -- table column --> <!ELEMENT TR - O (TH|TD)+ -- table row --> <!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
Т.е.:
Внутри таблицы вообще могут находиться только строки (ну и tbody, col, colgroup и другие табличные элементы)
Ну еще мы предполагаем что THEAD, TFOOT, TBODY обычно опускаются, но в модели DOM браузер их все же воспроизводит.
Отредактировано Azathoth (10-11-2006 09:10:23)
...она старалась, чтобы я больше времени проводил в разных пионерлагерях и группах продлённого дня - кстати сказать, удивительную красоту последнего словосочетания я вижу только сейчас. (c) Виктор Пелевин
Отсутствует
Страницы: 1