Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2014, 04:56
Новичок на форуме
Отправить личное сообщение для learner Посмотреть профиль Найти все сообщения от learner
 
Регистрация: 15.11.2014
Сообщений: 9

Ширина блока равна высоте экрана разных девайсов
Я только собираюсь учить 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 { 
      max-width: 100em;  /*1em=10px*/
      margin: 0 auto;
}

#wrap { 
      width: 92%;
      margin: 0 auto;;
}

#nav {
      height: 5.5em;
}
        
#nav li {
      width: 20%;
      height: 5.5em;
      float: left;
}
При ширине экрана в 320рх я его переворачиваю:
Код:
@media (max-width: 320px) {
	#nav {
		height: 20px;
		position: fixed;
		top: 0;
		left: 0;
		transform-origin: 0 0;
		transform: translateX(20px) rotate(90deg);
	}

	#nav li {
		height: 20px;
	}
}
Задача стояла, как сделать nav резиновым по отношению к высоте окна, можно написать #nav{width: 100vh;}, но единицы vw и vh не кроссбраузерное решение.
Нашёл здесь на форуме такой ответ на вопрос, как присвоить высоте 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 и меньше и во-вторых, какой из двух моих вариантов скрипта надёжней, если так можно выразиться. Надеюсь на ответ.

Последний раз редактировалось learner, 16.11.2014 в 01:00.
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2014, 08:40
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Как ты сделаешь при медиа-запросе? Никак. На window.onresize проверяй ширину экрана и исполняй соответственно.
Ответить с цитированием
  #3 (permalink)  
Старый 18.11.2014, 20:30
Новичок на форуме
Отправить личное сообщение для learner Посмотреть профиль Найти все сообщения от learner
 
Регистрация: 15.11.2014
Сообщений: 9

Сообщение от krasovsky
На window.onresize проверяй ширину экрана и исполняй соответственно
Во-первых большое спасибо за ответ, но я пока мало что в JS смыслю, каков синтаксис такого выражения?
onresize = function() {
                div.style.width = window.innerHeight + "px";
           };

я по-дилетански пробовал так:

div.style.width320px = window.innerHeight + "px";

и так;

div.style.width.320 = window.innerHeight + "px";

не работает, как я понимаю, из-за моего безграмотного синтаксиса.

Последний раз редактировалось learner, 18.11.2014 в 20:37.
Ответить с цитированием
  #4 (permalink)  
Старый 19.11.2014, 08:32
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Вот
http://jsfiddle.net/czo3c2er/

Последний раз редактировалось krasovsky, 19.11.2014 в 08:46.
Ответить с цитированием
  #5 (permalink)  
Старый 19.11.2014, 23:46
Новичок на форуме
Отправить личное сообщение для learner Посмотреть профиль Найти все сообщения от learner
 
Регистрация: 15.11.2014
Сообщений: 9

Сообщение от krasovsky Посмотреть сообщение
Вот
http://jsfiddle.net/czo3c2er/
Спасибо за ответ, Ваш скрипт работает, но это не то, что мне нужно. В Вашем скрипте блок, с заданными шириной и высотой подстраивается под искусственно изменённое окно. То есть, при загрузке страницы получаем блок с первичными параметрами, а если мышью изменить размер окна, то блок растянется на всю его площадь.
У меня же стоит задача для адаптивного дизайна, и тут речь идёт о первоначальной загрузке когда блок, ставший из горизонтального положения в вертикальное за свою ширину должен взять высоту окна просмотра того девайса, но который он загрузится. тут дело не в ресайзе окна мышью.
Повторюсь, вот скрипт, который это делает, он переписан мною методом тыка с другого скрипта, но он работает.
onload = function() {
            var div  = document.getElementById("nav");
            var html = document.documentElement;
            div.style.width = window.innerHeight + "px";
       }

Для решения не хватает лишь задать ему условие ширины окна при котором он ширине nav придаст высоту окна. Как его переписать так, чтобы он срабатывал только при ширине окна 320рх и меньше?
Не знаю правильно ли я понял Ваш ответ и грамотно ли объяснил мой вопрос.
Ответить с цитированием
  #6 (permalink)  
Старый 20.11.2014, 07:48
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Так а в чем проблем?
Проверяй каждый раз при загрузке страницы ее ширину
window.onload = function(){
if (window.innerWidth >= 320) {
div.style.width = window.innerHeight + "px";
}
}
Ответить с цитированием
  #7 (permalink)  
Старый 21.11.2014, 01:34
Новичок на форуме
Отправить личное сообщение для learner Посмотреть профиль Найти все сообщения от learner
 
Регистрация: 15.11.2014
Сообщений: 9

Так вот проблема в том. что в такой Вашей транскрипции:
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 и присваивал его ширине высоту экрана.
Ответить с цитированием
  #8 (permalink)  
Старый 21.11.2014, 09:39
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Ну ясное дело, что переменную div надо определить сначала. Я привел пример просто а не полный код, кроме того почему бы тебе не заменить ">" на "<" самостоятельно?
Ответить с цитированием
  #9 (permalink)  
Старый 22.11.2014, 07:05
Новичок на форуме
Отправить личное сообщение для learner Посмотреть профиль Найти все сообщения от learner
 
Регистрация: 15.11.2014
Сообщений: 9

Дело в том, что как я писал выше, я только буду учить 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 уже, и его ширина меняется при разных разрешениях экрана.

Последний раз редактировалось learner, 22.11.2014 в 07:08.
Ответить с цитированием
  #10 (permalink)  
Старый 24.11.2014, 07:43
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

По первому вопросу, конечно же код не должен повторятся, оберни в функцию и используй когда нужно
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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ширина блока в пикселях zebulun Events/DOM/Window 1 06.03.2013 00:34
Ширина блока Prazdnic jQuery 2 15.09.2012 16:02
Масштабирование блока, в зависимости от разрешения экрана Keksman jQuery 2 25.05.2012 03:49
Помогите с калькулятором piton1175 AJAX и COMET 0 16.06.2011 14:29
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12