| Автор |
Сообщение |
Сообщения: 19
Страна: Украина |
 28.04.2008 в 20:03 [Отредактировано: 07.05.2008 в 01:39]
Проблема вот в чем: у меня есть ячейка с параметрами
Код: <td style="background: url(1.gif) 100% no-repeat;">
Я хочу, чтоб при ширине браузера меньше, чем 452 пикселя эти параметры менялись на
Код: <td style="background: url(earth.gif) 0% no-repeat;">
Но, увы, недостаточные знания js не позволяют решить проблему самостоятельно.
Может кто знает как это решается? |
Сообщения: 327 |
30.04.2008 в 04:24
Код: <html>
<head>
<style type="text/css">
td.wide { background: url(1.gif) 100% no-repeat; }
td.slim { background: url(earth.gif) 0% no-repeat; }
<style>
<script type="text/javascript">
bodyResize = function(body) {
var td = document.getElementById('mytd');
if (body.style.width > 452) {
td.className = 'wide';
} else {
td.className = 'slim';
}
}
</script>
</head>
<body onresize="bodyResize(this);">
<!-- ... -->
<td class="wide" id="mytd">
<!-- ... -->
</body>
</html>
Вот где-то так вот. Тестить было лень 
|
Сообщения: 1053
Страна: Россия |
30.04.2008 в 05:54
Цитата: if (body.style.width > 452) {
Это круто.
|
Сообщения: 19
Страна: Украина |
05.05.2008 в 15:38 [Отредактировано: 07.05.2008 в 01:38]
Большой спасибо!!
Окончательный вариант получился таким:
Код: <html>
<head>
<style type="text/css">
td.wide { background: url(1.gif) 100% no-repeat; }
td.slim { background: url(earth.gif) 0% no-repeat; }
</style>
<script type="text/javascript">
function wre() {
var td2 = document.getElementById('mytd');
if (init() > 452) {
td2.className = 'wide';
} else {
td2.className = 'slim';
}
}
N=window.navigator.appName.substring(0,8);
function init() {
if(N=="Microsof" ){w=document.body.clientWidth;}
if(N=="Netscape" ){w=window.innerWidth;}
if(N=="Opera" ){w=window.innerWidth;};
return(w);
}
</script>
</head>
<body onload="wre();" onResize="wre();">
<!-- ... -->
<td class="wide" id="mytd">
<!-- ... -->
</body>
</html> |
Сообщения: 564
Страна: Россия |
05.05.2008 в 22:04
Удивительно, Оперу почему-то все учитывают, а Safari, которого гораздо больше - нет...
|
Сообщения: 1053
Страна: Россия |
06.05.2008 в 01:00 [Отредактировано: 06.05.2008 в 01:02]
Код: function init(){
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}
с учетом замечания Pilat66 Авторство: tigir.com
|
Сообщения: 47
Страна: Россия |
08.05.2008 в 18:01
А зачем ужасная функция init() ?
document.body.offsetWidth и document.body.clientWidth поддерживается всеми браузерами
Код: var td2 = document.getElementById('mytd'); - это лучше вынести из функции, т.к. при каждом ресайзе будет инициализироваться переменная и искаться mytd, что не есть хорошо
Код: if (init() > 452) ...
По мне легче читается такой код:
Код: td2.className = iinit() > 452 ? ''wide' : 'slim'; |
Сообщения: 1053
Страна: Россия |
08.05.2008 в 18:40
Цитата: document.body.offsetWidth и document.body.clientWidth поддерживается всеми браузерами
это не соответствует действительности
|
Сообщения: 47
Страна: Россия |
09.05.2008 в 07:52
HTMLElement (HTML DOM Level 2) думает иначе:
clientWidth IE 4.0+ | Mozilla 1.0+ | Netscape 7.0+ | Opera 7.0+ | Safari 1.0+
offsetWidth IE 4.0+ | Mozilla 1.0+ | Netscape 6.0+ | Opera 7.0+ | Safari 1.0+
Другое дело, что это не будет работать для window, а для document.body пройдет на ура. Но здесь window и не требуется, можно обойтись только document.body
|
Сообщения: 1053
Страна: Россия |
09.05.2008 в 13:26
Vadyacorp
Я и говорю не о clientWidth, а о document.body. В частности его нет в IE5.*, поддержка которого пока еще диктуется заказчиками.
|
Сообщения: 47
Страна: Россия |
12.05.2008 в 06:06
Ну это не правда, document.body имеется уже в спецификации HTML 3.2, которую полностью держит IE5 и даже (могу ошибаться) IE4
IE4+ полностью поддерживает document.body.clientWidth и иже с ними
|
Сообщения: 47
Страна: Россия |
12.05.2008 в 06:06 |
Сообщения: 1053
Страна: Россия |
12.05.2008 в 10:43
Виноват, я все перепутал и заврался, все совсем наоборот. Относительно document.body.* вы во всем правы.
Извините мою глупость, пойду грызть спецификацию, чтобы не ляпнуть еще какую-нибудь глупость.
А в IE5* нет documentElement.
Нужное значение возвращает все же document.documentElement.clientWidth, только в случае c IE5* это будет document.body.clientWidth.
|
