Проблема с DOCTYPE

Never · October 24, 2009

Добрый день.

Есть вопрос. Смотрю, тут уже поднималась проблема скриптов с 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 October 24, 2009 by Never

s0rr0w · October 24, 2009

Поиск скриптов - 50$ в час.

Never · October 24, 2009

спасибо большое буду знать

ZoNT · October 26, 2009

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

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

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

Never · October 26, 2009

Спасибо. Постараюсь подставить пиксели (это именно они).

В ФФе скрипт просто не работает и всё с ДОКТАЙПОМ.

Never · October 28, 2009

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

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

Edited October 28, 2009 by Never

ZoNT · October 28, 2009

Есил в левом верхенм углу - значит опять таки размерность не укащана у свойств top и left, вот и в ноль позиционируется.

Never · October 28, 2009

я так и думал... только ничего пока не получилось сделать

Sign In

Проблема с DOCTYPE

Question

Never

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Never

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

Never

Link to comment

Share on other sites

Never

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

Never

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information