Ширина блока равна высоте экрана разных девайсов
Я только собираюсь учить JS и практически ничего не знаю по этой теме, прошу помочь в одном вопросе
Его суть, - существует некий nav: HTML: <div id="page"> <div id="wrap"> <nav id="nav"> <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </nav> </div> </div> CSS: Код:
#page { Код:
@media (max-width: 320px) {Нашёл здесь на форуме такой ответ на вопрос, как присвоить высоте div значение window.innerHeight.
<script type="text/javascript">
onload = function() {
var div = document.getElementById("nav");
var html = document.documentElement;
div.style.height = html.clientHeight + "px";
onresize = function() {
div.style.height = html.clientHeight + "px";
};
}
</script>
Переписал скрипт вот так:
<script type="text/javascript">
onload = function() {
var div = document.getElementById("nav");
var html = document.documentElement;
div.style.width = html.clientHeight + "px";
onresize = function() {
div.style.width = html.clientHeight + "px";
};
}
</script>
И вот так:
<script type="text/javascript">
onload = function() {
var div = document.getElementById("nav");
var html = document.documentElement;
div.style.width = window.innerHeight + "px";
onresize = function() {
div.style.width = window.innerHeight + "px";
};
}
</script>
И оба моих варианта работают во всех браузерах FF, Chrome, Safari, Opera, IE9. Но есть два вопроса, во-первых, как сделать так, чтобы скрипт срабатывал только при медиа-запросе и только при ширине окна 320px и меньше и во-вторых, какой из двух моих вариантов скрипта надёжней, если так можно выразиться. Надеюсь на ответ. |
Как ты сделаешь при медиа-запросе? Никак. На window.onresize проверяй ширину экрана и исполняй соответственно.
|
Цитата:
onresize = function() {
div.style.width = window.innerHeight + "px";
};
я по-дилетански пробовал так: div.style.width320px = window.innerHeight + "px"; и так; div.style.width.320 = window.innerHeight + "px"; не работает, как я понимаю, из-за моего безграмотного синтаксиса. |
|
Цитата:
У меня же стоит задача для адаптивного дизайна, и тут речь идёт о первоначальной загрузке когда блок, ставший из горизонтального положения в вертикальное за свою ширину должен взять высоту окна просмотра того девайса, но который он загрузится. тут дело не в ресайзе окна мышью. Повторюсь, вот скрипт, который это делает, он переписан мною методом тыка с другого скрипта, но он работает.
onload = function() {
var div = document.getElementById("nav");
var html = document.documentElement;
div.style.width = window.innerHeight + "px";
}
Для решения не хватает лишь задать ему условие ширины окна при котором он ширине nav придаст высоту окна. Как его переписать так, чтобы он срабатывал только при ширине окна 320рх и меньше? Не знаю правильно ли я понял Ваш ответ и грамотно ли объяснил мой вопрос. |
Так а в чем проблем?
Проверяй каждый раз при загрузке страницы ее ширину
window.onload = function(){
if (window.innerWidth >= 320) {
div.style.width = window.innerHeight + "px";
}
}
|
Так вот проблема в том. что в такой Вашей транскрипции:
window.onload = function(){
if (window.innerWidth >= 320) {
div.style.width = window.innerHeight + "px";
}
}
скрипт не работает, как я думаю, не может найти объект к которому применить своё действие, а если я добавляю строку с id:
window.onload = function(){
var div = document.getElementById("nav");
if (window.innerWidth >= 320) {
div.style.width = window.innerHeight + "px";
}
}
то он срабатывет, но не только при ширине окна 320, но при всех больших разрешениях. Правда при разрешении меньше 320 уже всё ок. В редакции без Вашей новой строки if (window.innerWidth >= 320) он при любых разрешения экрана находил nav и присваивал его ширине высоту экрана. |
Ну ясное дело, что переменную div надо определить сначала. Я привел пример просто а не полный код, кроме того почему бы тебе не заменить ">" на "<" самостоятельно?
|
Дело в том, что как я писал выше, я только буду учить js и его синтаксис для меня пока ещё тёмный лес, теперь, благодаря Вам я уже знаю, что >= это больше или равно, а это <= меньше или равно. :)
Ещё раз спасибо Вам за Ваше терпение и ответы. В таком виде:
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";
}
}
это работает. Но я не знаю, должны ли эти записи быть телом одного скрипта, телом одного JS-документа при подключении из внешнего файла или это два разных скрипта с самостоятельным подключение для каждого? Работают все варианты, даже так:
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";
}
}
}
И ещё один вопрос, если позволите. При ресайзе окна по ширине, с 320рх на большую, когда nav становится в своё исходное горизонтальное положение, то без перезагрузки страницы он всё ещё принимает высоту окна, в качестве своей ширины. Я попытался это исправить, не зная возможно ли это в принципе:
window.onresize = function(){
var div = document.getElementById("nav");
if (window.innerWidth > 320) {
div.style.width = parent.style.width + "px"; // мои каракули
}
}
Не работает. Ширина nav при ширине экрана больше чем 320рх у меня 100% ширины своего родителя #wrapp. Пробовал взять переменную wrapper: div.style.width = wrapper.style.width + "px"; Так тоже не работает, ширина всего окна мне не подойдёт, так как #wrapp уже, и его ширина меняется при разных разрешениях экрана. |
По первому вопросу, конечно же код не должен повторятся, оберни в функцию и используй когда нужно
myFnc = fucntion(){
var div = document.getElementById("nav");
if (window.innerWidth > 320) {
div.style.width = parent.style.width + "px"; // мои каракули
}
}
window.onload = myFnc();
window.onresize = myFnc();
Вроде можно даже так "window.onload = window.onresize = myFnc();", не знаю не проверял. По второму можно дописать
if (window.innerWidth <= 320) {
div.style.width = window.innerWidth + "px";
}
else {
div.removeAttribute('style');
}
Этот способ убирает инлайн-атрибут style, снимая стили навешанные через js и написаные прямо в html |
Хотите верьте, хотите нет. Написал как Вы предложили:
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, время: 07:34. |