Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Скрипт не работает если указать DOCTYPE


Автор: OlegRu 8.6.2006, 10:18
Всем привет!

Хочу использовать вот такой скрипт http://www.03www.ru/00/160305-3-8.html.

Но у меня на странице указан DOCTYPE:
Код

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


Из-за этого скрипт совершенно не работает, текст не подсвечивается.
Вопрос:  как можно заставить работать скрипт ? не убирая строчки DOCTYPE.
Благодарю за внимание. 

Автор: Sardar 8.6.2006, 11:24
Я думал видел "самые кривые скрипты", этот отодвинул планку ещё дальше...  smile 
ИЕ обычно не отличаеться особым стремлением выполнять стандарты дотошно, но вероятно обращение к элементу просто по ID, без document.getElementById, запрещаеться если документ не в quirksmode.

Здесь: interval=setInterval("makeglow(myLink)",10) 

Автор: 12345c 8.6.2006, 11:32
Как показывает пример со стилем, filter:glow(color=#FF00FF,strength=5) даже без скрипта в стандарте не поддерживается.

(Впишите: с доктайпом и без)
Код

a{color:black;width:150;font:bold;filter:glow(color=#FF00FF,strength=5)}


Добавлено @ 11:35 
Sardar, там всё правильно с кодами, просто один раз параметр в функцию лишний вставили. Интересно, что ошибку не вызвало.

Добавлено @ 11:36 
Да, вот он, переписанный правильно пример:
Код
<html><head>
<style>
a{color:black;width:150;font:bold;filter:glow(color=#FF00FF,strength=5)}
</style>
<script>var i
function glow(){i=0;interval=setInterval(makeglow,10);}

function back(){clearInterval(interval);document.getElementById('myLink').style.filter=false;}

function makeglow(){i++;if(i<5){document.getElementById('myLink').style.filter="glow(color=#FF00FF,strength=" + i + ")";}
else if(self.interval){clearInterval(interval);}
}
</script>
</head><body>
<a href="default.asp.htm" tppabs="http://www.w3schools.com/dhtml/default.asp" id="myLink" onmouseover="glow()" onmouseout="back()"
  onclick=return!1;document.getElementById('myLink').style.filter='glow(color=#FF00FF,strength=5);'>Mouse over this link</a>
</body></html>
 

Автор: OlegRu 8.6.2006, 11:58
To 12345c
Спасибо. Еще интересно то, что если вписать доктайп так то работает :
Код

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

а если так - то не работает:  smile 
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Нашел похожую проблему здесь :  http://www.daniweb.com/techtalkforums/thread19630.html
Но так понял, что ничего конкретного там не решили.

Вот это определение "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" мне нужно!
Оно применяется в библиотеке script.aculo.us.
Как же совместить xhtml1-transitional.dtd и горящую гиперссылку ??   smile  

Автор: Sardar 8.6.2006, 14:18
OlegRu, а почему системный идентификатор от XHTML1.1, а публичный HTML4.0? По идее браузер должен плюнуть на такой фокус и вывалиться в quirksmode. В таком случае что с доктайпом, что без него работать должно одинакого "криво".

Цитата(OlegRu @  8.6.2006,  10:58 Найти цитируемый пост)
Еще интересно то, что если вписать доктайп так то работает :

Без указания системного идентификатора ИЕ должен вывалиться в quirksmode что он и делает.

Ставь это: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
При этом пройдись http://validator.w3.org по коду и выполни всё что тот говорит... а ругаться он будет по началу много smile

Цитата(OlegRu @  8.6.2006,  10:58 Найти цитируемый пост)
Оно применяется в библиотеке script.aculo.us.

Нет, на прямую не применяеться, просто если поставить правильный доктайп то даже ИЕ будет следовать стандартам, а это значит предсказуемое поведение и главное расчёт размеров элемента на котором script.aculo.us держиться.    

Автор: 12345c 8.6.2006, 16:39
Sardar, в тоже поудивлялся, почему не выпадает. Провалидировал и твой, и loose.dtd - не работает фильтр.

Код
<!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">
a{color:black;width:150;font:bold;filter:glow(color=#FF00FF,strength=5)}
</style>
<script type="text/javascript">var i
function glow(){i=0;interval=setInterval(makeglow,10);}

function back(){clearInterval(interval);document.getElementById('myLink').style.filter=false;}

function makeglow(){i++;if(i<5){document.getElementById('myLink').style.filter="glow(color=#FF00FF,strength=" + i + ")";}
else if(self.interval){clearInterval(interval);}
}
</script>
</head>

<body>
<a href="default.asp.htm" id="myLink" onmouseover="glow()" onmouseout="back()"
  onclick="return!1;document.getElementById('myLink').style.filter='glow(color=#FF00FF,strength=5);'">Mouse over this link</a>
</body></html>


Добавлено @ 16:43 
OlegRu, а первый вариант не доктайп вообще, а лишь его заготовка. Статьи про доктайпы лежат в и-нете. http://www.yandex.ru/yandsearch?yaca=1&text=%E2%E0%F0%E8%E0%ED%F2%FB+doctype&stype=&numdoc=30 - "варианты doctype" 

Автор: Sardar 9.6.2006, 01:06
Опытным путём установленно что:
  • в quirksmode фильтр может применяться к любому элементу, но требуеться задать ширину.
  • с доктайпом фильтр применяеться только к блочным элементам, ширина по прежнему необходима
  • MSDN по этому поводу молчит
  • если фильтр задать как progid:DXImageTransform.Microsoft.Glow то контейнер элемента будет расти (текст будет сдвигаться чуть вправо-вниз). Если просто как glow, то свечение будет просто обрезаться если не влезает.
  •  обращение к o.filters.item("progid:DXImageTransform.Microsoft.Glow") вылетает с "не известной ошибкой", на MSDN сие пользуеться в примерах.
  •  обращение к o.filters.item(0) будет вылетать с ошибкой если фильтр не задан. Обычное поведение в JS это возвращение null, всё в ИЕ не как у людей...  smile

Вот что вышло:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
    
<style type="text/css">
div {
  color: black;
  font-weight: bold;
  width: 300px;
}
</style>

</head>

<body>
<script type="text/javascript">
var running = {};

function glow(o) {
    var strn = 0, id;
    while(running[(id="~fltrid_"+Math.random())]);
    o.setAttribute("ef_elem_id", id);
    running[id]= window.setInterval(function() {
        o.style.filter = "progid:DXImageTransform.Microsoft.Glow(Color=#FF00FF, Strength="+(strn++)+")";
        if(strn>5) {
           window.clearInterval(running[id]);
           running[id] = null;
        }
    }, 10);
}

function back(o) {
   o.style.filter = false;
   var id = o.getAttribute("ef_elem_id");
   //alert("back: "+id);
   if(!running[id]) return;
   window.clearInterval(running[id]);
   running[id] = null;
}
</script>
<div>Test: 
 <a href="#" id="myLink" onmouseover="glow(this.parentNode)" onmouseout="back(this.parentNode)">Mouse over this link</a>
</div>
<div id="dbg"></div>
</body>
</html>


12345c, форматируй код, читать не удобно. 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)