Jump to content
  • 0

Проблема с DOCTYPE


Never
 Share

Question

Добрый день.

Есть вопрос. Смотрю, тут уже поднималась проблема скриптов с DOCTYPE.

Недавно нашёл очень простой Аяксовый скрипт. Так вот он не хочет работать в ФФ с Доктайпом. Даже в ИЕ6 пашет нормально, а в ФФ никак.

Скрипт выдран отсюда.

Код таков (если дописать Доктайп то в ФФ работать не будет):

<html>
<head>
<title>Всплывающие подсказки в духе AJAX</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var curHintId = null; // id активной ссылки

// Делаем XMLHttpRequest "универсальным"
if(!window.XMLHttpRequest && window.ActiveXObject)
var XMLHttpRequest = function() { return new ActiveXObject("Microsoft.XMLHTTP"); }

// Объект, для определения координат мыши
var mouse = {
x : function(e)
{
if (window.event)
return window.event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
else if (window.captureEvents)
return e.pageX;
else
return null;
},
y : function(e)
{
if (window.event)
return window.event.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
else if (window.captureEvents)
return e.pageY;
else
return null;
}
}

function hintsForLinks()
{
if (window.XMLHttpRequest)
{
var hintbox = document.getElementById("hintbox");
var allLinks = document.getElementsByTagName("a");
// Выбираем только линки для которых есть подсказки (id = "hintxxx")
var links = new Array();
var e = 0;
for(i = 0; i < allLinks.length; i++)
{
if (allLinks[i].id.match(/hint\d+/i))
{
links[e] = allLinks[i];
e++;
}
}
// Создаем обработчиков событий для ссылок с подсказками
for(i = 0; i < links.length; i++)
{
links[i].onmouseover = function()
{
// Здесь может быть "полноценный" запрос
getXMLDoc("f/" + this.id + ".txt");
curHintId = this.id;
}
links[i].onmouseout = function()
{
hintbox.style.left = "-1000px"; // прячем hintbox
hintbox.innerHTML = "";
}
links[i].onmousemove = function(e)
{
if (mouse.x(e) && hintbox.innerHTML != "")
{
var dx = (document.body.clientWidth - mouse.x(e) + document.body.scrollLeft < hintbox.offsetWidth) ? hintbox.offsetWidth + 15 : 0;
var dy = (document.body.clientHeight - mouse.y(e) + document.body.scrollTop < hintbox.offsetHeight) ? hintbox.offsetHeight + 15 : 0;
var x = mouse.x(e) + 10 - dx;
var y = mouse.y(e) + 10 - dy;
hintbox.style.left = (x - document.body.scrollLeft > 0) ? x : document.body.scrollLeft;
hintbox.style.top = (y - document.body.scrollTop > 0) ? y : document.body.scrollTop;
}
}
}
}
}

function getXMLDoc(url)
{
try
{
req = new XMLHttpRequest();
if (req)
{
// Обработчик, в случае изменения состояние объекта req
req.onreadystatechange = function ()
{
// req.readyState == 4 - отклик с сервера получен.
if (req.readyState == 4)
{
// req.status == 200 - запрос успешно выполнен.
if (req.status == 200)
{
// Для нашего случая просто заполняем hintbox текстовым содержимым файла
var hintbox = document.getElementById("hintbox");
hintbox.innerHTML = req.responseText;
try
{
document.getElementById(curHintId).fireEvent("onmousemove");
}
catch(e)
{
hintbox.style.left = mouse.x(e) + 10;
hintbox.style.top = mouse.y(e) + 10;
}
}
}
}
req.open("GET", url, true);
req.send("");
}
}
catch(e)
{
return;
}
}

function addHandler(object, event, handler)
{
if (typeof object.addEventListener != "undefined")
object.addEventListener(event, handler, false);
else if (typeof object.attachEvent != "undefined")
object.attachEvent("on" + event, handler);
}

addHandler(window, "load", hintsForLinks);
</script>
<style type="text/css">
#hintbox{
position:absolute;
z-index:1;
width:300px;
left:-1000px;
padding:0.7em 1em;
font-size:80%;
background:#cce;
border:1px solid #99c;
opacity:0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 90);
}
</style>
</head>
<body>
<div id="hintbox"></div>
<h1>Всплывающие подсказки в духе AJAX</h1>
<p><strong>Пример:</strong> Здесь должна работать <a id="hint1" href="#">подсказка</a>.</p>
</body>
</html>

Буду очень признателен, если поможете решить задачку или подскажете другой простенький Аяксовый (подгружающий контент из стороннего файлика) скрипт подсказки, работающий по айдишнику (то есть, без всяких onmouseover).

Спасибо заранее!

Edited by Never
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

При использовании доктайпа в ФФ и др. браузерах надо бы указывать единицы измерения при указании размеров:

hintbox.style.top = mouse.y(e) + 10; - что это ? пукты, пиксели, проценты, em... Браузер при строгом доктайпе не будет гадать.

А что не работает?

Link to comment
Share on other sites

  • 0

издевался-издевался над скриптом, нифига не получается :(

получилось только добиться того, что в ФФе подсказка появляется в левом верхнем углу :(

Edited by Never
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy