Jump to content
  • 0

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


Semreg
 Share

Question

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

<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) Как сделать чтобы блок "коментарий" не уходил за границы окна, т.е. чтобы при максимальном отведении курсора в право он упирался в область окна, не добавляя горизонтальнцю линейку прокрутки.

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

// Было
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';
}

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

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

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-фреймворке.

Link to comment
Share on other sites

  • 0

<!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 by Great Rash
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

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

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

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

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

Edited by Riim
Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Edited by Riim
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

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

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