Хотите верьте, хотите нет. Написал как Вы предложили:
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, время: 12:02. |