отражения в FF | Форум Mozilla Россия

>Форум Mozilla Россия
   http://forum.mozilla-russia.org/index.php
>Проблемы с сайтами
   http://forum.mozilla-russia.org/viewforum.php?id=24
>отражения в FF
   http://forum.mozilla-russia.org/viewtopic.php?id=5061

firecat > 18-09-2005 09:35:45

На одной страничке нашел скрипт, с помощью которого картинка гуляет по документа, отражаясь от ее краев (типа пинг-понга). Сценарий написан для ослика. Попробовал прикрутить к лисенку, и ничего не получилось. Вот код, поможете?
SCRIPT LANGUAGE="JavaScript"
var name = navigator.appName;
var yPos;

var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var xPos = 20;

function changePos()
{
if(name)
{
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
}
else
{
height = window.innerHeight;
width = window.innerWidth;
Hoffset = document.img.clip.height;
Woffset = document.img.clip.width;
document.img.pageY = yPos + window.pageYOffset;
document.img.pageX = xPos + window.pageXOffset;
}
if (yon)
{
yPos = yPos + step;
}
else
{
yPos = yPos - step;
}
if (yPos < 0)
{
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset))
{
yon = 0;
yPos = (height - Hoffset);
}
if (xon)
{
xPos = xPos + step;
}
else
{
xPos = xPos - step;
}
if (xPos < 0)
{
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset))
{
xon = 0;
xPos = (width - Woffset);
}
}

function pauseResume()
{
if(pause)
{
clearInterval(interval);
pause = false;
}
else
{
interval = setInterval('changePos()',delay);
pause = true;
}
}

function start()
{

if(name == "Microsoft Internet Explorer")
{
name = true;
yPos = document.body.clientHeight;

}
else
{
name = false;
yPos = window.innerHeight;

}

interval = window.setInterval("changePos()",delay);
}
</script>
</head>
<body onLoad="start()">

<div id="img" style="position:absolute;">
<img src="cat.jpg" width="160" height="120" onMouseDown="pauseResume();">
</div>

ragnaar > 18-09-2005 12:47:33

firecat
Я могу допустить, что ты создал 5 дубликатов этой темы случайно (мало ли, форум взглюкнул, или связь), но будь внимателнее...

cr@nk > 18-09-2005 12:58:28

Я могу допустить, что ты создал 5 дубликатов этой темы случайно (мало ли, форум взглюкнул, или связь), но будь внимателнее..

У меня тоже сегодня ни искать, ни создавать темы не хотел, а когда заново зашёл на форум, то увидел 4 своих темы

Snik > 19-09-2005 14:49:12

firecat
А вообще в каком-либо браузере это будет работать??? Имхо, нет. Что касается Mozilla, то, для начала, что такое document.img?

Anton > 19-09-2005 15:23:46

А вообще в каком-либо браузере это будет работать???

В ИЕ работает. Firefox "спотыкается" на этих строчках:

Выделить код

Код:

Hoffset = document.img.clip.height;
             Woffset = document.img.clip.width;

Даже если написать

Выделить код

Код:

Hoffset = document.getElementById("img").clip.height;
             Woffset = document.img.getElementById("img").width;

не может найти свойство clip.

firecat > 19-09-2005 17:04:39

ragnaar пишет

firecat
Я могу допустить, что ты создал 5 дубликатов этой темы случайно (мало ли, форум взглюкнул, или связь), но будь внимателнее...

Здравствуйте!
Тут за меня ответили. Да, действительно форум глючил. Я нажимал на кнопку Отправить, а мне выдавало сообщение об ошибке. Я пробовал еще и еще раз. Поэтому так и получилось.
Код работает прекрасно в ослике, я же об этом написал. Мне интересно увидеть, как это портировать на FF.
Никто пока не может?

Lynn > 19-09-2005 18:58:54

Работает в Firefox. Скрещивать ужа с ежом (FF и IE) оставляю в качестве ДЗ.

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>...</title>
<style type="text/css">
body {
	color: black;
	background: white;
	margin: 0;
	padding: 0;
}
a {
	color: red;
}
#fly {
	position: absolute;
	top: 0; left: 0;
}
</style>
<script type="text/javascript">
var f = d = false;
var intx = false;
var dx = dy = 5;
window.onload = function () {
	f = document.getElementById('fly');
	intx = setInterval('go()',100);
}

function go() {
	var x = f.offsetLeft + dx;
	var y = f.offsetTop  + dy;
	if (x >= window.innerWidth - f.offsetWidth) {
		x  = window.innerWidth - f.offsetWidth;
		dx = -dx;
	}
	if (y >= window.innerHeight - f.offsetHeight) {
		y  = window.innerHeight - f.offsetHeight;
		dy = -dy;
	}
	if (x <= 0) { x = 0; dx = -dx; }
	if (y <= 0) { y = 0; dy = -dy; }
	f.style.left = x + 'px';
	f.style.top  = y + 'px';
}

function SS() {
	if (intx) {
		clearInterval(intx);
		intx = false;
	} else {
		intx = setInterval('go()',100);
	}
}
</script>
</head>
<body>
<div id="fly"><img src="http://forum.mozilla.ru/img/avatars/57.jpg" onclick="SS()"></div>
</body>
</html>

firecat > 19-09-2005 19:34:16

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

Snik > 19-09-2005 19:36:15

Anton
У меня не запустился и в осле.

firecat > 19-09-2005 21:46:09

у меня нашлось время на ДЗ. И я сделал ЭТО! Но появились вопросики, которые напрямую не относятся может к FF
Изменений два
Добавил в функцию go()
function go() {

if(name == "Microsoft Internet Explorer")
{
var x = f.offsetLeft + dx;
var y = f.offsetTop + dy;

if (x >= document.body.clientWidth - f.offsetWidth)
{
x = document.body.clientWidth - f.offsetWidth;
dx = -dx;
}
if (y >= document.body.clientHeight - f.offsetHeight)
{
y = document.body.clientHeight - f.offsetHeight;
dy = -dy;
}

if (x <= 0) { x = 0; dx = -dx; }
if (y <= 0) { y = 0; dy = -dy; }
f.style.left = x + 'px';
f.style.top = y + 'px';
}

else
{

var x = f.offsetLeft + dx;
var y = f.offsetTop + dy;
if (x >= window.innerWidth - f.offsetWidth) {
x = window.innerWidth - f.offsetWidth;
dx = -dx;
}
if (y >= window.innerHeight - f.offsetHeight) {
y = window.innerHeight - f.offsetHeight;
dy = -dy;
}
if (x <= 0) { x = 0; dx = -dx; }
if (y <= 0) { y = 0; dy = -dy; }
f.style.left = x + 'px';
f.style.top = y + 'px';
} //else
} //end function

Запустил и удивился. Картинка стала бегать от левого края к правому по горизонтали.
Пошел на MSDN за справкой. Тут наткнулся на кое-что непереводимое (my English not very good) и удалил самую первую строчку кода
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
и все заработало!
Как вариант, можно наоборот к этой строчке добавить еще одну
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Мне больше нравится первый вариант с удалением. Меньше текста набивать :-)
Вопрос - зачем они нужны эти строчки. Всегда без них обходился, а тут на такое интересное явление наткнулся.

LattyF > 20-09-2005 08:32:36

firecat пишет

Вопрос - зачем они нужны эти строчки. Всегда без них обходился, а тут на такое интересное явление наткнулся.

За тем же, зачем в начале exe файла находится MZ. Это сигнатура файла. Служит для того, чтобы браузер знал, что загрузил и мог проверить на ошибки (DTD). Ее надо писать всегда, иначе могут и глюки пойти.

Lynn > 20-09-2005 10:38:19

LattyF
Ну, насчёт всегда, это слишком резко. Но знать, что это за строчки нужно.

LattyF > 20-09-2005 10:40:15

Lynn пишет

LattyF
Ну, насчёт всегда, это слишком резко. Но знать, что это за строчки нужно.

Как это резко? А стандарты? А потом вы же жалуетесь, что сайты кривые…

Unghost > 20-09-2005 18:26:49

HTML - это язык, у которого есть свои правила, которых надо придерживаться.
Когда люди, например, пишут программу на C, они же пишут её по правилам, а не жалуются "Ой, я тут написал, пару строк выкинул, а компилятор не компилит. Какой плохой компилятор."

firecat > 20-09-2005 23:04:11

Ну сравнение с С немного хромает. Если там писать не по правилам, то компилируется. А если в html я пропущу эти строчки, то в 99.9 процентах страница загрузится. То есть это не правило, а просто рекомендация. Хотя может и важная.

juvio > 21-09-2005 04:24:17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

IE 6.0 ведет себя как 6. И лучше понимает стандарты

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

IE 6 ведет себя как пятерка. Незнаю почему. Поэтому лучше дописывать вторую строчку.

arab > 21-09-2005 10:58:38

Спасибо что предупредили не знал. :lol: обязательно надо будет дописать.

Желание: вот бы NVU автоматически добавлял эту строку в новые страницы

Lynn > 21-09-2005 16:47:53

juvio пишет

IE 6 ведет себя как пятерка. Незнаю почему

Читаем MSDN

Al_H > 22-09-2005 03:06:02

На самом деле,

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

часто предпочтительнее, из соображений обратной совместимости. 5.0 стоит у всех, кто пользуется Windows с каких-то версий 98 по 2000, и при этом ничего сам не обновлял, XP стоит не на каждой машине. Что до обновлений, известно, что подавляющее большинство пользователей ничего и никогда не обновляют и даже не настраивают, пока нужные программки хоть как-то работают. А кто в состоянии скачать новый браузер, мог скачать и Firefox, или Opera. Таким образом, приходим к совместимости как минимум от 5.0 версии. В режиме более строгого следования стандартам 6.0 будет больше отличаться от 5.0 и 5.5, так что больше вероятности, что придется отдельно адаптировать под 6.0, а отдельно под 5.0 и 5.5.

LattyF > 22-09-2005 07:58:26

Al_H пишет

В режиме более строгого следования стандартам 6.0 будет больше отличаться от 5.0 и 5.5, так что больше вероятности, что придется отдельно адаптировать под 6.0, а отдельно под 5.0 и 5.5.

Да здравствует IE! Теперь придется писать отдельную версию сайта не только под него, но еще и под каждую его версию. А то у верстальщиков работы мало. Пусть теперь под IE три версии сайта заколачивают.

Lynn > 22-09-2005 08:29:55

Al_H
Смотря как писать.