Господа, помогите поправить скрипт.

Semreg · October 25, 2009

Вот сам скрипт:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
	* { margin: 0; padding: 0px;}
	#main {background: red; margin: 100px; padding: 100px; text-align: center;}
	#help {position: absolute; width: 300px; background: gray; display: none;}
</style>

<script type="text/javascript">
	document.onmousemove = cursorCoordinate;  
	function cursorCoordinate(e) {
		// Координаты курсора мыши относительно окна документа (IE5+, Mozilla/Gecko, Opera 7+) 
		var x = 0, y = 0;
		if (!e) e = window.event;
		if (e.pageX || e.pageY){
			x = e.pageX;
			y = e.pageY;
		}
		else if (e.clientX || e.clientY) {
			x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
			y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
		}
		document.getElementById('help').style.left = x+15;   
		document.getElementById('help').style.top = y+15;
	}
</script>

</head>
<body>

<div id="main" style="" onmouseover="document.getElementById('help').style.display = 'block';" onmouseout="document.getElementById('help').style.display = 'none';">
	Наведите курсор мыши на форму:
</div>

<div id="help" style="">
	<strong>Коментарий.</strong><br />
	Блок фиксированной ширины с текстом. Блок растягивается в высоту в зависимости от объема текста в нем. 
</div>

</body>  
</html>

Есть 2 проблеммы:

1) Скрипт не корректно работает при прописке доктайпа. Читал темы на форуме с подобной проблеммой, но так и не смог разобраться как его поправить, чтоб заработал с доктайпом.

2) Как сделать чтобы блок "коментарий" не уходил за границы окна, т.е. чтобы при максимальном отведении курсора в право он упирался в область окна, не добавляя горизонтальнцю линейку прокрутки.

Great Rash · October 26, 2009

// Было
document.getElementById('help').style.left = x+15;
document.getElementById('help').style.top = y+15;

// Стало
var xWidth = document.compatMode == 'CSS1Compat' && !window.opera ? document.documentElement.clientWidth : document.body.clientWidth;

document.getElementById('help').style.left = x + 15 + 'px';
document.getElementById('help').style.top = y + 15 + 'px';

var left = 0;
var top = 0;
var prnt = document.getElementById('help');

while (prnt && prnt.nodeName.toLowerCase() != 'body') {
	left += prnt.offsetLeft;
	top += prbt.offsetTop;
	prnt = prnt.offsetParent;
}

if (left + document.getElementById('help').offsetWidth > xWidth) {
	document.getElementById('help').style.left = xWidth - document.getElementById('help').offsetWidth + 'px';
}

Не проверял, по идее должно работать.

Semreg · October 26, 2009

Great Rash, спасибо. Проблемма с доктайпом исчезла.

Как я понял из-за отсутсвия вот этих окончаний доктайп глючил: + 'px'

Но млин подсказка отказывается оставаться в области окна и всеравно добавляет горизонтальную прокрутку.

Great Rash, будь другом, если появится 10 минут свободных глянь мой пример: http://lava-land.ru/index42_1.html

Riim · October 26, 2009

Но млин подсказка отказывается оставаться в области окна и всеравно добавляет горизонтальную прокрутку.

var elem = Tooltip.elem, style = elem.style,
	scroll = $d.getScroll(), viewportDimensions = $d.viewport.getDimensions();
elem.innerHTML = initElem.tooltipText;
var width = elem.offsetWidth + (parseFloat(elem.getStyle('marginLeft'), 10) || 0) + (parseFloat(elem.getStyle('marginRight'), 10) || 0),
	height = elem.offsetHeight + (parseFloat(elem.getStyle('marginTop'), 10) || 0) + (parseFloat(elem.getStyle('marginBottom'), 10) || 0);
style.left = (lastE.pageX + width > scroll.x + viewportDimensions.x ? lastE.pageX - width : lastE.pageX) + 'px';
style.top = (lastE.pageY + height > scroll.y + viewportDimensions.y ? lastE.pageY - height : lastE.pageY) + 'px';

Реализации getScroll, viewport.getDimensions и getStyle есть в любом js-фреймворке.

Semreg · October 26, 2009

Riim, а куда это вставлять в моем файле?

Я дебил в js

Great Rash · October 26, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en" lang="en">

<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma;
		}

		body {
			margin: 10px;
		}

		#main {
			background: red;
			margin: 100px;
			padding: 100px;
			text-align: center;
		}

		#help {
			position: absolute;
			width: 300px;
			background: gray;
			display: none;
		}
	</style>

	<script type="text/javascript">
		/**
		* elem - элемент на который наводим мышь
		* hint - элемент-подсказка
		* offsetX - сдвиг от курсора по оси Х
		* offsetY - сдвиг от курсора по оси Y
		*/

		function Hint(elem, hint, offsetX, offsetY) {
			var prnt = this;
			this.elem = typeof elem == 'string' ? document.getElementById(elem) : elem;
			this.hint = typeof hint == 'string' ? document.getElementById(hint) : hint;
			this.winWidth = document.compatMode == 'CSS1Compat' && !window.opera ? document.documentElement.clientWidth : document.body.clientWidth;
			this.winHeight = document.compatMode == 'CSS1Compat' && !window.opera ? document.documentElement.clientHeight : document.body.clientHeight;
			this.offsetX = offsetX;
			this.offsetY = offsetY;

			this.addListener('mousemove', document, function(e) {
				prnt.getCoords(e);
				prnt.placeElem();
			});

			this.addListener('mouseover', this.elem, function() {
				prnt.hint.style.display = 'block';
				prnt.placeElem();
			});

			this.addListener('mouseout', this.elem, function() {
				prnt.hint.style.display = 'none';
			});
		}

		Hint.prototype.placeElem = function() {
			if (this.x > this.winWidth - (this.hint.offsetWidth + this.offsetX)) {
				this.x = this.winWidth - (this.hint.offsetWidth + this.offsetX);
			}

			if (this.y > this.winHeight - (this.hint.offsetHeight + this.offsetY)) {
				this.y = this.winHeight - (this.hint.offsetHeight + this.offsetY);
			}

			this.hint.style.left = this.x + this.offsetX + 'px';
			this.hint.style.top = this.y + this.offsetY + 'px';
		}

		Hint.prototype.getCoords = function(e) {
			e = e || window.event;
			this.x = this.y = 0;

			if (e.pageX || e.pageY) {
				this.x = e.pageX;
				this.y = e.pageY;
			} else if (e.clientX || e.clientY) {
				this.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
				this.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
			}
		}

		Hint.prototype.addListener = function(ev, elem, foo) {
			if (document.addEventListener) {
				elem.addEventListener(ev, foo, false);
			} else if (document.attachEvent) {
				elem.attachEvent('on' + ev, foo);
			} else {
				elem['on' + ev] = foo;
			}
		}
	</script>

</head>

<body>

	<div id="main">
		Наведите курсор мыши на форму:
	</div>

	<div id="help">
		<h6>Коментарий.</h6>
		Блок фиксированной ширины с текстом. Блок растягивается в высоту в зависимости от объема текста в нем.
	</div>

	<script type="text/javascript">
		new Hint('main', 'help', 15, 15);
	</script>

</body>
</html>

Semreg код рабочий, разбирайтесь.

Фреймворки - абсолютное зло!

Edited October 26, 2009 by Great Rash

Riim · October 26, 2009

а куда это вставлять в моем файле?

это не готовое решение, а код, объясняющий как сделать то, что вам необходимо.

Фреймворки - абсолютное зло!

почему?

Edited October 26, 2009 by Riim

Semreg · October 26, 2009

Rash, спасибище тебе огромное!

Ты - лучший!

Great Rash · October 26, 2009

Потому, что люди, разбирающиеся в API фреймворка, зачастую не знают элементарных вещей. Для простейших задач таким людям подавай плагин. Такие люди не умеют думать головой и писать скрипты. Задача фреймворков наплодить таких людей как можно больше (и они с ней справляются). В этой печальной ситуации есть только один плюс - люди которые действительно разбираются в скриптах (да и программировании вообще) могут смело просить увеличения з.п.

Riim · October 26, 2009

Потому, что люди, разбирающиеся в API фреймворка, зачастую не знают элементарных вещей. Для простейших задач таким людям подавай плагин. Такие люди не умеют думать головой и писать скрипты

исходя из этого, я могу согласиться с формулировкой "Фреймворки - относительное зло!", но про "абсолютное" я не согласен.

В этой печальной ситуации есть только один плюс

я вижу больше плюсов.

А вообще, люди начинавшие на более низком уровне абстракции всегда ворчат на тех кто сразу хватается за самый, на данный момент, высокий уровень, но сами спускаться ниже того с чего они начинали почему-то не спешат. Человек, пишущий на си, не очень жалует яву, но и сам на ассемблере не очень хочет писать. С js-фреймворками та же ситуация.

Edited October 26, 2009 by Riim

Great Rash · October 26, 2009

Вот не скажите, C++ от Java мало чем отличается в плане ООП. И даже больше - ява чуть ли не эталон объектных языков к которому стремиться надо.

Про ассемблер тоже утрировать не надо, вы б еще машинный код вспомнили.

Надо знать язык, а не фреймворк.

Riim · October 26, 2009

Я не знаю, насколько мое сравнение получилось удачным, поскольку ни на одном из перечисленных языков ни разу не писал, я просто хотел показать, что javascript это тоже не более чем очередной уровень абстракции, а учитывая количество различий в реализациях, вообще самопал.

Вот не скажите, C++ от Java мало чем отличается в плане ООП. И даже больше - ява чуть ли не эталон объектных языков к которому стремиться надо.

си-программист вам на это ответит что-то вроде: "в яве нельзя напрямую работать с памятью, а значит, ОС не написать", так же как вы ответили про фреймворки:

зачастую не знают элементарных вещей. Для простейших задач таким людям подавай плагин

Надо знать язык, а не фреймворк.

в чем, по-вашему, принципиальное отличие между фреймворком, написанным на языке X, и новым языком более высокого уровня, чем язык X, написанном на языке X?

Edited October 26, 2009 by Riim

Great Rash · October 26, 2009

Кажись Линукс на Яве написан... хотя ошибиться могу.

Не надо путать язык и фреймворк написанный на этом языке и язык. В общем юзайте что нравится, я не собираюсь навязывать вам свое мнение. Просто останусь при своем.

Riim · October 26, 2009

Кажись Линукс на Яве написан

Я представляю, как бы все висло. А уж про количество ошибок лучше даже не думать, windows отдыхал бы. Linux в основном написан на си (без плюсов).

Не надо путать язык и фреймворк написанный на этом языке и язык

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

В общем юзайте что нравится, я не собираюсь навязывать вам свое мнение

вы, наверное, подумали, что я пытаюсь пропагандировать использование фреймворков, но это не так, я просто совсем не согласен с формулировкой "абсолютное зло". Пользы действительно намного больше, чем просто отупение "конкурентов". Например, фреймворки - это хорошие примеры хорошего (иногда не очень) javascript-а. Javascript я изучал в основном читая PrototypeJs (не у всех получается учиться по книгам), и непонятные мне конструкции вбивал в гугл. Что еще, при таком способе обучения, можно читать кроме фреймворков? Может вот это г**но: http://woweb.ru/load/100 ? Сейчас я свободно ориентируюсь в коде PrototypeJs, многие его части наизусть уже запомнил и самое забавное, что я ни разу его нигде не использовал, наверное, даже к странице ни разу не подключал. Я не "за" и не "против" фреймворков, я против их бездумного использования. Говоря фразу:

Реализации getScroll, viewport.getDimensions и getStyle есть в любом js-фреймворке

я имел в виду не подключить к странице фреймворк ради простейшего tooltip-а, а открыть код этого фреймворка, найти реализации нужных методов и, изменив под себя, использовать в своих проектах.

Great Rash · October 27, 2009

У вас был мегаизвратный способ изучения JS! Хотя наверно это вам в плюс (по ходу вы очень терпеливый человек). Все-таки вернее будет начать учить язык с азов, а не с фреймворка. Основная задача фреймворка - избавить программиста от нудной процедуры написания часто используемых методов и процедур. А если пользователь знает особенности фреймворка, но не знает особенности языка, любая нетривиальная задача ставит его в тупик. Отсюда и тонны просьб подсказать где найти тот или иной плагин для jQuery и ему подобных. Отсюда и незнание элементарных вещей, я уж не говорю про особенности языка.

Riim · October 27, 2009

У вас был мегаизвратный способ изучения JS!

Да вроде все так изучают, ну то есть сначала конечно книгу надо почитать, а потом уже примеры кода смотреть, разница лишь в том кто, сколько книгу читает. У меня редко хватает терпения прочитать дальше предисловия.

Sign In

Господа, помогите поправить скрипт.

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information