>Форум Mozilla Россия http://forum.mozilla-russia.org/index.php >Проблемы с сайтами http://forum.mozilla-russia.org/viewforum.php?id=24 >Не срабатывает корректирующий резиновость слоев скрипт в Мазиле. http://forum.mozilla-russia.org/viewtopic.php?id=17438 |
WEB_bobby > 07-06-2007 17:20:05 |
Увы, облегчить не вышло.:( Очень серьезная проблема у меня. Я сделал не только резиновость сайта, но а также написал скрипт, который корректирует растягиваемость слоев - для того чтобы сайт не превращался в подобие сосиски на разрешениях больше чем 1024*768. Беда в том, что в IE все отлично срабатывает, как по маслу.. Вот такой CSS Выделить код Код:* { margin: 0; padding: 0; border:0; } body { background:url(images/fon.gif); font: 16px Comic Sans MS; color:#C2B9F7; min-width:1008px; } #l { background-image: url(images/book_anim.gif); background-position: left; background-repeat: no-repeat; height: 170px; padding-left: 170px; overflow: hidden; } #f { background-image: url(images/superFon.jpg); background-position: center; background-repeat: no-repeat; height: 140px; padding-top: 30px; text-align: center; overflow: hidden; } #r { background-image: url(images/book_anim.gif); background-position: right; background-repeat: no-repeat; height: 170px; padding-right: 170px; overflow: hidden; } #X1_f { background-image: url(images/1_m.jpg); background-repeat: repeat-x; height: 240px; overflow: hidden; } #X1_lg { background-image: url(images/1_ml.jpg); background-position: left; background-repeat: no-repeat; height: 240px; overflow: hidden; } #X1_rg { background-image: url(images/1_mr.jpg); background-position: right; background-repeat: no-repeat; height: 170px; padding-top: 70px; text-align: center; overflow: hidden; } #X2_f { background-image: url(images/2_m.jpg); background-repeat: repeat-x; height: 185px; overflow: hidden; } #X2_lg { background-image: url(images/2_ml.jpg); background-position: left; background-repeat: no-repeat; height: 185px; overflow: hidden; } #X2_rg { background-image: url(images/2_mr.jpg); background-position: right; background-repeat: no-repeat; height: 170px; padding-top: 15px; text-align: center; overflow: hidden; } #X3_f { background-image: url(images/3_m.jpg); background-repeat: repeat-x; height: 340px; overflow: hidden; } #X3_lg { background-image: url(images/3_ml.jpg); background-position: left; background-repeat: no-repeat; height: 340px; overflow: hidden; } #X3_rg { background-image: url(images/3_mr.jpg); background-position: right; background-repeat: no-repeat; height: 325px; padding-top: 15px; text-align:center; overflow: hidden; } #X4_f { background-image: url(images/4_m.jpg); background-repeat: repeat-x; height: 185px; overflow: hidden; } #X4_lg { background-image: url(images/4_ml.jpg); background-position: left; background-repeat: no-repeat; height: 185px; overflow: hidden; } #X4_rg { background-image: url(images/4_mr.jpg); background-position: right; background-repeat: no-repeat; height: 170px; padding-top: 15px; text-align:center; overflow: hidden; } #X5_f { background-image: url(images/5_m.jpg); background-repeat: repeat-x; height: 260px; overflow: hidden; } #X5_lg { background-image: url(images/5_ml.jpg); background-position: left; background-repeat: no-repeat; height: 260px; overflow: hidden; } #X5_rg { background-image: url(images/5_mr.jpg); background-position: right; background-repeat: no-repeat; height:245px; padding-top: 15px; text-align:center; overflow: hidden; } Вот такой скрипт: Выделить код Код:window.onresize = function() { var q = document.body.clientWidth; if (q <= 1024) { document.getElementById("X1_1DIV").style.width = "140px"; document.getElementById("X1_2DIV").style.width = "140px"; document.getElementById("X1_mainDIV").style.width = 728px; document.getElementById("X1_F").style.width = 728px; document.getElementById("X2_1DIV").style.width = "140px"; document.getElementById("X2_2DIV").style.width = "140px"; document.getElementById("X2_mainDIV").style.width = 728px; document.getElementById("X2_F").style.width = 728px; document.getElementById("X3_1DIV").style.width = "140px"; document.getElementById("X3_2DIV").style.width = "140px"; document.getElementById("X3_mainDIV").style.width = 728px; document.getElementById("X3_F").style.width = 728px; document.getElementById("X4_1DIV").style.width = "140px"; document.getElementById("X4_2DIV").style.width = "140px"; document.getElementById("X4_mainDIV").style.width = 728px; document.getElementById("X4_F").style.width = 728px; document.getElementById("X5_1DIV").style.width = "140px"; document.getElementById("X5_2DIV").style.width = "140px"; document.getElementById("X5_mainDIV").style.width = 728px; document.getElementById("X5_F").style.width = 728px; }else { q = (q - 408) + 'px'; document.getElementById("X1_1DIV").style.width = "204px"; document.getElementById("X1_mainDIV").style.width = q; document.getElementById("X1_F").style.width = q; document.getElementById("X1_2DIV").style.width = "204px"; document.getElementById("X2_1DIV").style.width = "204px"; document.getElementById("X2_mainDIV").style.width = q; document.getElementById("X2_F").style.width = q; document.getElementById("X2_2DIV").style.width = "204px"; document.getElementById("X3_1DIV").style.width = "204px"; document.getElementById("X3_mainDIV").style.width = q; document.getElementById("X3_F").style.width = q; document.getElementById("X3_2DIV").style.width = "204px"; document.getElementById("X4_1DIV").style.width = "204px"; document.getElementById("X4_mainDIV").style.width = q; document.getElementById("X4_F").style.width = q; document.getElementById("X4_2DIV").style.width = "204px"; document.getElementById("X5_1DIV").style.width = "204px"; document.getElementById("X5_mainDIV").style.width = q; document.getElementById("X5_F").style.width = q; document.getElementById("X5_2DIV").style.width = "204px"; } } function onLoadCheckWidth() { var q = document.body.clientWidth; if (q <= 1024) { document.getElementById("X1_1DIV").style.width = "140px"; document.getElementById("X1_2DIV").style.width = "140px"; document.getElementById("X1_mainDIV").style.width = 728px; document.getElementById("X1_F").style.width = 728px; document.getElementById("X2_1DIV").style.width = "140px"; document.getElementById("X2_2DIV").style.width = "140px"; document.getElementById("X2_mainDIV").style.width = 728px; document.getElementById("X2_F").style.width = 728px; document.getElementById("X3_1DIV").style.width = "140px"; document.getElementById("X3_2DIV").style.width = "140px"; document.getElementById("X3_mainDIV").style.width = 728px; document.getElementById("X3_F").style.width = 728px; document.getElementById("X4_1DIV").style.width = "140px"; document.getElementById("X4_2DIV").style.width = "140px"; document.getElementById("X4_mainDIV").style.width = 728px; document.getElementById("X4_F").style.width = 728px; document.getElementById("X5_1DIV").style.width = "140px"; document.getElementById("X5_2DIV").style.width = "140px"; document.getElementById("X5_mainDIV").style.width = 728px; document.getElementById("X5_F").style.width = 728px; }else { q = (q - 408) + 'px'; document.getElementById("X1_1DIV").style.width = "204px"; document.getElementById("X1_mainDIV").style.width = q; document.getElementById("X1_F").style.width = q; document.getElementById("X1_2DIV").style.width = "204px"; document.getElementById("X2_1DIV").style.width = "204px"; document.getElementById("X2_mainDIV").style.width = q; document.getElementById("X2_F").style.width = q; document.getElementById("X2_2DIV").style.width = "204px"; document.getElementById("X3_1DIV").style.width = "204px"; document.getElementById("X3_mainDIV").style.width = q; document.getElementById("X3_F").style.width = q; document.getElementById("X3_2DIV").style.width = "204px"; document.getElementById("X4_1DIV").style.width = "204px"; document.getElementById("X4_mainDIV").style.width = q; document.getElementById("X4_F").style.width = q; document.getElementById("X4_2DIV").style.width = "204px"; document.getElementById("X5_1DIV").style.width = "204px"; document.getElementById("X5_mainDIV").style.width = q; document.getElementById("X5_F").style.width = q; document.getElementById("X5_2DIV").style.width = "204px"; } } |
Infocatcher > 07-06-2007 17:41:56 |
А если так: |
WEB_bobby > 07-06-2007 18:01:34 |
Попробывал, еще хуже стало. В IE даже теперь не происходит коррекция. Вот таким стал код(на сервере остался пред. вариант) Может я где не так применил? Выделить код Код:window.onresize = function() { var q = document.body.clientWidth; if (q <= 1024) { document.getElementById("X1_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X1_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X1_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X1_F").setAttribute("style", "width: 728px"); document.getElementById("X2_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X2_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X2_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X2_F").setAttribute("style", "width: 728px"); document.getElementById("X3_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X3_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X3_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X3_F").setAttribute("style", "width: 728px"); document.getElementById("X4_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X4_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X4_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X4_F").setAttribute("style", "width: 728px"); document.getElementById("X5_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X5_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X5_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X5_F").setAttribute("style", "width: 728px"); }else { q = (q - 408) + 'px'; document.getElementById("X1_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X1_mainDIV").setAttribute("style", "width: q"); document.getElementById("X1_F").setAttribute("style", "width: q"); document.getElementById("X1_2DIV").setAttribute("style", "width: 240px"); document.getElementById("X2_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X2_mainDIV").setAttribute("style", "width: q"); document.getElementById("X2_F").setAttribute("style", "width: q"); document.getElementById("X2_2DIV").setAttribute("style", "width: 240px"); document.getElementById("X3_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X3_mainDIV").setAttribute("style", "width: q"); document.getElementById("X3_F").setAttribute("style", "width: q"); document.getElementById("X3_2DIV").setAttribute("style", "width: 240px"); document.getElementById("X4_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X4_mainDIV").setAttribute("style", "width: q"); document.getElementById("X4_F").setAttribute("style", "width: q"); document.getElementById("X4_2DIV").setAttribute("style", "width: 240px"); document.getElementById("X5_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X5_mainDIV").setAttribute("style", "width: q"); document.getElementById("X5_F").setAttribute("style", "width: q"); document.getElementById("X5_2DIV").setAttribute("style", "width: 240px"); } } function onLoadCheckWidth() { var q = document.body.clientWidth; if (q <= 1024) { document.getElementById("X1_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X1_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X1_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X1_F").setAttribute("style", "width: 728px"); document.getElementById("X2_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X2_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X2_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X2_F").setAttribute("style", "width: 728px"); document.getElementById("X3_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X3_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X3_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X3_F").setAttribute("style", "width: 728px"); document.getElementById("X4_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X4_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X4_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X4_F").setAttribute("style", "width: 728px"); document.getElementById("X5_1DIV").setAttribute("style", "width: 140px"); document.getElementById("X5_2DIV").setAttribute("style", "width: 140px"); document.getElementById("X5_mainDIV").setAttribute("style", "width: 728px"); document.getElementById("X5_F").setAttribute("style", "width: 728px"); }else { q = (q - 408) + 'px'; document.getElementById("X1_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X1_mainDIV").setAttribute("style", "width: q"); document.getElementById("X1_F").setAttribute("style", "width: q"); document.getElementById("X1_2DIV").setAttribute("style", "width: 240px"); document.getElementById("X2_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X2_mainDIV").setAttribute("style", "width: q"); document.getElementById("X2_F").setAttribute("style", "width: q"); document.getElementById("X2_2DIV").setAttribute("style", "width: 240px"); document.getElementById("X3_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X3_mainDIV").setAttribute("style", "width: q"); document.getElementById("X3_F").setAttribute("style", "width: q"); document.getElementById("X3_2DIV").setAttribute("style", "width: 240px"); document.getElementById("X4_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X4_mainDIV").setAttribute("style", "width: q"); document.getElementById("X4_F").setAttribute("style", "width: q"); document.getElementById("X4_2DIV").setAttribute("style", "width: 240px"); document.getElementById("X5_1DIV").setAttribute("style", "width: 240px"); document.getElementById("X5_mainDIV").setAttribute("style", "width: q"); document.getElementById("X5_F").setAttribute("style", "width: q"); document.getElementById("X5_2DIV").setAttribute("style", "width: 240px"); } } Добавлено Чтв 07 Июн 2007 18:11:30 : |
Infocatcher > 07-06-2007 19:42:55 |
А вот такое: точно не заработает... Скажем, что-то вроде этого: Вариант (если для элемента "X1_F" уже есть какие-нибудь стили в CSS): А обработка изначального варианта останавливалась на этом: Полагаю, должно быть ... = "728px"; И вообще, пишем: И выясняем, на что жалуется браузер UPD Посмотрел на стили... И еще. Выделить код Код:var idArr = ["X1", "X2", "X3"]; // Создаем массив идентификаторов для элементов с одинаковой шириной // ... if() ... var q = "100px"; // Нужная ширина... for(i = 0; i < idArr.length; i++) document.getElementById(idArr[i]).style.width = q; |
WEB_bobby > 07-06-2007 20:05:35 |
Спасибо, буду разбирать, завтра к обеду напишу что наразбирал. |
Infocatcher > 07-06-2007 20:12:18 |
Пожалуйста. |
WEB_bobby > 07-06-2007 22:57:14 |
Попробвал как в первом варианте. Поставил везде кавычки не помогло. Так же осталось. Выделить код Код:window.onresize = function() { var q = document.body.clientWidth; if (q <= 1024) { document.getElementById("X1_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X1_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X1_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X1_F").setAttribute("style", "width: 728px;"); document.getElementById("X2_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X2_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X2_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X2_F").setAttribute("style", "width: 728px;"); document.getElementById("X3_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X3_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X3_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X3_F").setAttribute("style", "width: 728px;"); document.getElementById("X4_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X4_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X4_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X4_F").setAttribute("style", "width: 728px;"); document.getElementById("X5_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X5_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X5_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X5_F").setAttribute("style", "width: 728px;"); }else { q = (q - 408); document.getElementById("X1_1DIV").setAttribute("style", "width: 204px;"); document.getElementById("X1_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X1_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X1_2DIV").setAttribute("style", "width: 204px;"); document.getElementById("X2_1DIV").setAttribute("style", "width: 204px;"); document.getElementById("X2_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X2_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X2_2DIV").setAttribute("style", "width: 204px;"); document.getElementById("X3_1DIV").setAttribute("style", "width: 204px;"); document.getElementById("X3_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X3_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X3_2DIV").setAttribute("style", "width: 204px;"); document.getElementById("X4_1DIV").setAttribute("style", "width: 204px;"); document.getElementById("X4_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X4_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X4_2DIV").setAttribute("style", "width: 204px;"); document.getElementById("X5_1DIV").setAttribute("style", "width: 204px;"); document.getElementById("X5_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X5_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X5_2DIV").setAttribute("style", "width: 204px;"); } } function onLoadCheckWidth() { var q = document.body.clientWidth; if (q <= 1024) { document.getElementById("X1_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X1_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X1_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X1_F").setAttribute("style", "width: 728px;"); document.getElementById("X2_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X2_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X2_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X2_F").setAttribute("style", "width: 728px;"); document.getElementById("X3_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X3_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X3_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X3_F").setAttribute("style", "width: 728px;"); document.getElementById("X4_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X4_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X4_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X4_F").setAttribute("style", "width: 728px;"); document.getElementById("X5_1DIV").setAttribute("style", "width: 140px;"); document.getElementById("X5_2DIV").setAttribute("style", "width: 140px;"); document.getElementById("X5_mainDIV").setAttribute("style", "width: 728px;"); document.getElementById("X5_F").setAttribute("style", "width: 728px;"); }else { q = (q - 408); document.getElementById("X1_1DIV").setAttribute("style", "width: 204px;"); document.getElementById("X1_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X1_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X1_2DIV").setAttribute("style", "width: 204px;"); document.getElementById("X2_1DIV").setAttribute("style" "width: 204px;"); document.getElementById("X2_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X2_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X2_2DIV").setAttribute("style", "width: 204px;"); document.getElementById("X3_1DIV").setAttribute("style", "width: 204px;"); document.getElementById("X3_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X3_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X3_2DIV").setAttribute("style", "width: 204px;"); document.getElementById("X4_1DIV").setAttribute("style", "width: 204px;"); document.getElementById("X4_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X4_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X4_2DIV").setAttribute("style", "width: 204px;"); document.getElementById("X5_1DIV").setAttribute("style", "width: 204px;"); document.getElementById("X5_mainDIV").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X5_F").setAttribute("style", "width:" + q + "px" + ";"); document.getElementById("X5_2DIV").setAttribute("style", "width: 204px;"); } } |
Infocatcher > 07-06-2007 23:49:46 |
Проще проверить работоспособность малого кода... Проверяем: Выделить код Код:window.onresize = function() { var q = document.body.clientWidth; alert("Width = " + q); // Проверяем определение ширины if (q <= 1024) document.getElementById("X1_1DIV").setAttribute("style", "width: 40px;"); // Есть смысл поставить или очень малое значение, или очень большое – чтобы сразу видно было else document.getElementById("X1_1DIV").setAttribute("style", "width: 400px;"); } Потом проверяем И только если простое работает, дописывайте все остальное. |
Infocatcher > 08-06-2007 02:51:53 |
Помучив расширение Custom Buttons и JavaScript, добился занятного эффекта. Выделить код Код:javascript: var oldStyle = content.document.getElementById("search").getAttribute("style"); content.document.getElementById("search").setAttribute("style", oldStyle + "; background-color: red;"); А теперь смотрим на самый верх страницы и любуемся кровавым фоном. Так вот, возможно, нужно использовать именно такой скрипт: Выделить код Код:var oldStyle = content.document.getElementById("search").getAttribute("style"); content.document.getElementById("search").setAttribute("style", oldStyle + "; background-color: red;"); Вместо "; background-color: red;" добавить нужное... |
WEB_bobby > 08-06-2007 22:35:44 |
Все оказалось гораздо проще. В названии слои имели нижний регистр, а в JS верхний. Добавлено Птн 08 Июн 2007 22:37:49 : Тема закрыта по просьбе автора |