Ширина блока равна высоте экрана разных девайсов
Я только собираюсь учить 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 |
Часовой пояс GMT +3, время: 16:51. |