Див в IE и Opera нормально всплывает, в Mozilla никак.

partiz · January 10, 2009

Написал пример моего кода с "всплывающей подсказкой"... по какой-то причине подсказка не всплывает в Mozilla... Помогите решить проблему, пожалуйста.

<style type="text/css">
<!--
.bubble {
  z-index: 100;
  display: block;
  position: absolute;
	border: 1px solid #6699FF;
	background: #D9ECFF;
	padding: 2px;
	width: 150px;
	height: 20px;
	font-size: 14px;
  FILTER: alpha(Opacity=85);
}
-->
</style>
<script language="JavaScript" type="text/javascript">
function onShowBubble(mytext) {
  e = window.event;
	document.getElementById('bubble').style.width = "150px";
	if (mytext.length>100) document.getElementById('bubble').style.width = "300px";
	document.getElementById('bubble').style.left = (e.clientX-10) + "px";
	document.getElementById('bubble').style.top = (e.clientY-10) + "px";
	document.getElementById('bubble').innerHTML = mytext;
  document.getElementById('bubble').style.display='block';
}
</script>
<input type="button" name="" value="Click me" onclick="onShowBubble('Моя подсказка')"/>
<div id="bubble" class="bubble" onmouseout="document.getElementById('bubble').style.display='none';"></div>

Edited January 10, 2009 by partiz

Vlad · January 10, 2009

Единицы измерения надо обязательно указывать - не 20, а 20px.

partiz · January 10, 2009

2 Vlad... спасибо за совет! Проставил единицы измерения, но это все равно не привело к желаемому результату... Мозилла так же не выводит нужный ДИВ

... обновил код в первом сообщении, не стал снова вставлять, чтобы не захламлять

Edited January 10, 2009 by partiz

s0rr0w · January 11, 2009

2 Vlad... спасибо за совет! Проставил единицы измерения, но это все равно не привело к желаемому результату... Мозилла так же не выводит нужный ДИВ
... обновил код в первом сообщении, не стал снова вставлять, чтобы не захламлять

getElementById является методом объекта window, а не document.

Victor Ananiev · January 11, 2009

та ну? разве так?:

window.getElementById() ??

s0rr0w · January 11, 2009

та ну? разве так?:
window.getElementById() ??

Вот это я гоню....

Болван! Не проснулся еще, когда ответ писал. Позор на мою седую голову. Я сам стал жертвой своей же мини-библиотеки.

Конечно же getElementById - свойство document

А вот window.event в FF может не работать.

Лучше всего, наверное, будет передавать event в функцию-обработчик.

<input type="button" name="" value="Click me" onclick="onShowBubble('Моя подсказка', arguments[0])"/>

function onShowBubble(mytext, e) {
if (!e) { e = window.event}

rus · January 11, 2009

Вот пример, и по моему везде работает (не проверял):


<html><head>
<script language="JavaScript">
if (parseInt(navigator.appVersion)>= 4)
{if (navigator.appName == "Netscape")
{layerStyleRef="layer.";layerRef="document.layers";styleSwitch="";}
else{layerStyleRef="layer.style.";layerRef="document.all";styleSwitch=".style";}}
function show(layerName){if (parseInt(navigator.appVersion)>= 4)
{eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');}}
function cls(layerName){if (parseInt(navigator.appVersion)>= 4)
{eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');}}
</script><style type="text/css">#text1 
{HEIGHT: 80px; LEFT: 0px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 250px; Z-INDEX: 10}
</style></head><body>
<table align="left" id="text1" border="1" width="100%" cellspacing="0" cellpadding="5" style="HEIGHT: 80px; LEFT: 50px; TOP: 90px; WIDTH: 300px"><tr><td bgcolor="#FFFFE1">Здесь Вы можете поместить текст, изображения, используя при этом тэги.</td></tr></table>
<a href="http://webbeginner.ru/" onmouseout="cls('text1');" onmouseover="show('text1');">Посетить сайт</a>
<body></html>

Edited January 11, 2009 by rus

SelenIT · January 11, 2009

Действительно, проблема была в том, что глобальный window.event — чисто IEшная фича. Но передать событие аргументом можно и проще:

<script language="JavaScript" type="text/javascript">
function onShowBubble(e,mytext) {
	document.getElementById('bubble').style.width = "150px";
	if (mytext.length>100) document.getElementById('bubble').style.width = "300px";
	document.getElementById('bubble').style.left = (e.clientX-10) + "px";
	document.getElementById('bubble').style.top = (e.clientY-10) + "px";
	document.getElementById('bubble').innerHTML = mytext;
	document.getElementById('bubble').style.display='block';
}
</script>
<input type="button" name="" value="Click me" onclick="onShowBubble(event,'Моя подсказка')"/>
<div id="bubble" class="bubble" onmouseout="document.getElementById('bubble').style.display='none';"></div>

Тогда IE передаст в ф-цию глобальный event, а FF и т.п. - стандартный, но внутри ф-ции это станет уже неважно.

rus, работать-то этот пример работает... Но это — танк времен первой миро... то есть браузерной войны: проползет даже по грязи и болоту типа NS4, но медленный, неповоротливый и совершенно непригодный для современных дорог (пардон, браузеров). Так писали аккурат 10 лет назад, когда стандартов еще толком не было. Сегодня не осталось ни одного браузера, ради которого стоило бы городить этот огород с eval-ами. Не говоря о том, что это — решение вообще другой задачи, более простой, которая сегодня решается вообще одним CSSом

Edited January 11, 2009 by SelenIT

partiz · January 11, 2009

2 SelenIT ... спасибо большое за решение, оно помогло!

Sign In

Див в IE и Opera нормально всплывает, в Mozilla никак.

Question

partiz

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

partiz

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

partiz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information