CSS, JS и кроссбраузерность

[Николай 2357]

Подскажите, где взять толковую информацию пр нюансам CSS и JS в разных браузерах. В Гугле 90% философии, целый день рылся. Жалко потраченного времени и трафика. В учебниках, какие у меня есть про это ни слова. В одном нашел: "...написан для IE... в разных браузерах может работать поразному..." и все. А как? Я только начал, а уже проблемы:

<style type="text/css">
#pic1{
 filter:progid:DXImageTransform.Microsoft.BasicImage(xRay=0);
 }
#div1{

position:absolute;
top:100px;
left:10px;
display:none;
} 
</style>
<script language="javascript">
<!--
function Function_1(){
document.all.tags("div").item(0).style.display="block";
}
function Function_2(){
document.all.tags("div").item(0).style.display="none";
}
-->
</script>

<input type="button" onclick="Function_1()" value="Открыть"/>
<input type="button" onclick="Function_2()" value="Закрыть"/>

<div id="div1">
<img src="buttons/smpreob2.gif" width="63" height="44"
 onmouseover="pic1.filters(0).xRay=1"
 onmouseout="pic1.filters(0).xRay=0" 
 id="pic1" alt="Смайлик" 
 border="0"/>
</div>

в IE - ура!, Опера фильтра не хочет, Лис вообще все игнорирует.

Вот пример, если интересноhttp://test.inkz.ru

Скормил валидатору - тот облизнулся...

Такого наверное будет много, посоветуйте пожалуйста что-нибудь дельное.

Спасибо.

ЗЫ. Если не лень, по этому коду тоже.

[shamahn]

Не чувствуете, что попахивает извратом?

На мой взгляд (не заставляю его придерживаться), в основном большинстве случаев простенького JS на страничках можно элементарно обойтись id. т.е. все бы прекрасно ВЕЗДЕ работало, если бы Вы подправили:

1) document.all.tags("div").item(0).style.display на document.getElementById("div1").style.display

Ваш пример может пригодиться только в том случае, если в каком-нить контейнере, например, динамически меняется количество item'ов. И-то я бы id выкрутился

Фильтра это чисто ИЕная примочка.

И еще, забыл. Лис не игнорирует. Снизу справа он пишет что у Вас ошибки в скрипте.

[Николай 2357]

Вообщето я про информацию спрашивал...

А насчет

Не чувствуете, что попахивает извратом?

это ведь кусочек кода, для примера. Вот побольше:

<script type="text/javascript">
<!--
function Function_1(div){
for (i=0; i<99; i++){
document.all.tags("div").item(i).style.display="none";
}
document.all.tags("div").item(div).style.display="block";
}
-->
</script>

<a href="#" onClick="Function_1(0)">1-я ссылка</a>
*
*
*
<a href="#" onClick="Function_1(99)">100-я ссылка</a>
<div style="display:none">Текст 1 </div>
*
*
*
<div style="display:none">Текст 100 </div>

Так я про это и спрашиваю, IE ошибку не выдает ведь.

За филтра спасибо, я так и думал. А вот как дальше с такой элементарщиной без иформации голову греть? Жуть.

[shamahn]

У них отношение к DOM разное. Нужно разный код писать. Если скинешь ссылку на страничку полную, скажу тебе где для ФФ искать нужный тебе объект. А ваабще, для ФФ есть классная примочка. Называется FireBug. Отлаживаться милое дело.

Я бы все равно реализовал по другому. Вот так:

for (i=0; i<99; i++){

document.getElementById("div"+i).style.display="none";

}

document.getElementById(div).style.display="block";

}

опять же. Элемент определяется однозначно по ид для любого бровзера.

[Николай 2357]

Вот это гут!!! Странички нет пока, я этим и занимаюсь, а за информацию спасибо. Зэр гут.:)

[shamahn]

Николай 2357, не за что чем могу.

Только смотрите, Вам могут сказать, что это решение не есть оптимальное, и может быть будут правы, ибо в JS я не селен, и лишь высказал свои предпочтения. Но могу Вас заверить, что это не Не правильное решение и, на мой взгляд, самое удобное

[Николай 2357]

Еще раз спасибо. Прокатал во всех трех (больше нет пока), работает. Не совсем удобно в динамике, когда блоки приходится менять местами или добавлять в середину, ну да ладно, для начала и так хорошо. Я сам поэтому и недодумался , зациклился на item.

Зато действительно - ВЕЗДЕ работает!

Еще раз к вопросу о пользе форумов: спасибо авторам!

Свежий взгляд со стороны - так все просто, а я в панику ударился!

[shamahn]

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

Всегда приходит чем-то жертвовать

А так, всегда пож-ста. Может и Вы когда-нить нам поможете советом

Все. Закрываем топик, думаю?

[maddogrts]

А сколько у вас блоков ? типа

?

Представленное решение не очень хорошее мягко говоря, но если блоков меньше 10 вполне приемлемо.

Я к тому веду что вы можете ошибиться в идентификаторах, лучше использовать код без привязки к определенным ID

[Николай 2357]

А как? Я уже начал велосипед изобретать...

Блоков больше 50-ти и нужно иногда их местапми менять.

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

А если честно - не в этом даже вопрос, обойдется. Как дальше жить? Не хотелось бы такие глупые вопросы задавать, а толковой инфы по этому вопросу у меня нет. Скачал FireBug по совету shamahn , а как с ним бороться не знаю. Позор!

[shamahn]

Николай 2357, я же говорил

[maddogrts]

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

<div id="superblok">

<div class="hide">
text text
</div>

<div class="hide">
text text
</div>

<div class="hide">
text text
</div>
...
</div>

Итак нам требуется по клику изменить class hide на класс show.

Для этого пишем скрипт:

window.onload = function(){
 doc = document.getElementById("superblok");
 tag = doc.getElementsByTagName("div");
 for (i=0; i<tag.length; i++) {
 tag[i].onclick = sClick.bind(tag[i]);
 }
}
function sClick() {
 if (this.className == "show") {
 this.className = "hide";
 }
 else {
 this.className = "show";
 }
}
Function.prototype.bind = function(object) {
 var method = this
 return function() {
 return method.apply(object, arguments)
 }
}

В принципе все

[yopopt]

to maddogrts

Что-то ты уж больно замутил. Для начинающих надо бы попроще, без прототипов и тп.

Наверно будет лучше менять класс как-то так:

function sClick() {
 if(this.className.search("show") != -1) {
 this.className = this.className.replace("show", "hide");
 }
 else if(this.className.search("hide") != -1) {
 this.className = this.className.replace("hide", "show");
 }
}

Чтобы не затирались другие классы.

[Николай 2357]

Круто. Нет слов. Спасибо. Не совсем еще разобрался, дело времени.

А насчет

Для начинающих надо бы попроще

необязательно, а то так и старость в "лягушатнике" можно встретить.

[yopopt]

необязательно, а то так и старость в "лягушатнике" можно встретить.

Это верно, только разбираться в сложном и потому малопонятном "лягуш?нку" коде гораздо сложнее...