Хотите верьте, хотите нет. Написал как Вы предложили:
myFnc = function(){ var div = document.getElementById("nav"); if (window.innerWidth <= 320) { div.style.width = window.innerHeight + "px"; } } //здесь нужна точка с запятой? window.onload = myFnc(); window.onresize = myFnc(); Всё работало, и при подключении скрипта в head и из внешнего файла, при чём так: window.onload = window.onresize = myFnc(); тоже работало. Потом решил попробовать перестроить дизайн и изменил ширину экрана для начала трансформации nav с <= 320 на <= 600 и уже никак не работает, не из head, не из внешнего файла. Вернул на <= 320, хотя это уже шаманство, не заработало. В итоге работает только так: window.onload = function(){ var div = document.getElementById("nav"); if (window.innerWidth <= 320) { div.style.width = window.innerHeight + "px"; } } window.onresize = function(){ var div = document.getElementById("nav"); if (window.innerWidth <= 320) { div.style.width = window.innerHeight + "px"; } } Как же с этим быть, если в скриптах повторятся? Редактор и меня phpDesigner8 в связке с Denver3. Что же касается способа удаления стилей навешанных через js: if (window.innerWidth > 320) { div.style.width = window.innerHeight + "px"; } else { div.removeAttribute('style'); } то при увеличении ширины окна nav это срабатывает, но если отыграть назад, то nav уже не растягивается на всю высоту окна, причём то же и при ресайзе окна по высоте. Перезагрузка страницы не помогает, выходит, что вариант с удалением атрибута 'style' вообще блокирует работу скрипта. Перепробовал все варианты: div.removeAttribute('style'); div.removeAttribute('style.width'); div.removeAttribute('width'); div.removeAttribute('window.innerHeight); |
Цитата:
Ты кстати смотришь что вообще пишешь? if (window.innerWidth > 320) {//если ширина окна БОЛЬШЕ 320 div.style.width = window.innerHeight + "px";//задать ширину дива ширине экрана И это при том что у тебя выше код window.onresize = function(){ var div = document.getElementById("nav"); if (window.innerWidth <= 320) {если ширина окна МЕНЬШЕ 320 div.style.width = window.innerHeight + "px";//задать ширину дива ширине экрана } } ?? Цитата:
Цитата:
|
Цитата:
window.onload = function(){ var div = document.getElementById("nav"); if (window.innerWidth <= 320){ div.style.width = window.innerHeight + "px"; } } window.onresize = window.onload; работает с одним лишь только но. В Opera(12.17) при старом условии <= 320, тоже всё ок, но если его изменить на любое другое, то скрипт работает только при подключении в head. Причём, если сузить окно до прежнего <= 320, то работает, перезагрузишь страницу, снова отказ, вот такая вот ерунда, но это не критично. Вы можете мне подсказать как написать такую строку на js? var div = document.getElementById("nav"); if (window.innerWidth > 320) { div.style.width = снова равна 100% ширине #wrap; } Это уже последняя просьба и, в любом случае, ещё раз спасибо за Ваши ответы, они мне очень помогли.:) |
Я лично уже запутался. Опиши какая конкретно задача у тебя стоит?
Если только менять ширину блока под разные разрешения экрана - так с эти замечательно справиться css media queries. И не нужно никакого js вообще. @media (max-width:320px) { #nav { width:320px; //или width:100%; } } При этом ширина предка #nav должна естественно равняться ширине экрана. |
Цитата:
Задача была, и которая благодаря Вам уже решена, чтобы nav, при ширине окна 320рх и меньше, в качестве своей ширины принимал высоту окна, тогда он будет резиновым на любом устройстве, с любой высотой viewport. Вот код устанавливающий nav в положение параллельно скроллингу: @media (max-width: 320px) { #nav { height: 20px; position: fixed; top: 0; left: 0; transform-origin: 0 0; transform: translateX(20px) rotate(90deg); } } Вот скрипт, отредактированный Вами, который делает его резиновым в этом перевёрнутом положении: window.onload = function(){ var div = document.getElementById("nav"); if (window.innerWidth <= 320){ div.style.width = window.innerHeight + "px"; } } window.onresize = window.onload; window.onresize = window.onload; Эта строка, делает nav резиновым при ресайзе окна по высоте (только по высоте, ширина 320рх!) без перезагрузки страницы. Осталось только сделать так, чтобы при ресайзе окна по ширине с 321рх и больше, nav, за свою ширину снова принял своё старое значение ширины, а именно, 100% ширины #wrap. Я ведь, только при ширине 320рх и меньше его переворачиваю, а при 321рх и больше действуют старые правила, где он горизонтальный и значение высоты окна мне уже не нужно. Как я понимаю, это условие должно выглядеть так: if (window.innerWidth > 320) { div.style.width = снова равна 100% ширине #wrap; } А я, как Вы знаете, мало что пока понимаю в этом вопросе. снова равна 100% ширине #wrap, как вот такую строку, или строку с более грамотно сформулированной задачей, прописать на JS? |
Можно попробовать что то типо этого
if (window.innerWidth <= 320){ div.style.width = window.innerHeight + "px"; } else { div.style.width = '100%'; //если ширина не <= 320 установить ее в 100% или подставь свое значение } |
Работает! Да-а, как всё просто в руках мастера :), ещё раз огромное Вам спасибо.
|
Часовой пояс GMT +3, время: 11:50. |