Javascript.RU

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

Разрешение экрана
Как сделать что бы запускалась функция при определённом разрешение
let navHover = document.querySelector(".nav_hover");
let navListDescop = document.querySelector(".navig:nth-child(10)");
let navListPhone = document.querySelector(".navig:nth-child(2)");
let descop = document.querySelector(".navig:nth-child(10)");
let phone =document.querySelector(".navig:nth-child(2)");


navHover.onmouseover = navOn;
navHover.onmouseout = navOff;
navListDescop.onmouseover = navListOn;
navListDescop.onmouseout = navListOff;

function navOn(){
	descop.style.top = "320px";
}
function navOff(){
	descop.style.top = "-360px";
}
function navListOn(){
	descop.style.top = "320px";
}
function navListOff(){
	descop.style.top = "-360px";
}

function test(){
	if (document.documentElement.clientWidth > 860) {
		navHover.onmouseover = navOn2;
		navHover.onmouseout = navOff2;
		navListPhone.onmouseover = navListOn2;
		navListPhone.onmouseout = navListOff2;

		function navOn2(){
			phone.style.marginTop = "0px";
		}
		function navOff2(){
			phone.style.marginTop = "-1500px";
		}
		function navListOn2(){
			phone.style.marginTop = "0px";
		}
		function navListOff2(){
			phone.style.marginTop = "-1500px";
		}
	}
}

test();


особенность в том navHover это один и тот же блок
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2020, 09:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сергей Ракипов,

addEventListener( "resize", test)
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2020, 09:56
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Сообщение от рони
addEventListener( "resize", test)
Я так и сделал но функции срабатывают только если были изменение а если просто открыто то не чего.

let navHover = document.querySelector(".nav_hover");
let navListDescop = document.querySelector(".navig:nth-child(10)");
let navListPhone = document.querySelector(".navig:nth-child(2)");
let descop = document.querySelector(".navig:nth-child(10)");
let phone =document.querySelector(".navig:nth-child(2)");

function test(){
    if (document.documentElement.clientWidth < 860) {
        navHover.onmouseover = navOn2;
        navHover.onmouseout = navOff2;
        navListPhone.onmouseover = navListOn2;
        navListPhone.onmouseout = navListOff2;

        function navOn2(){
            phone.style.marginTop = "0px";
        }
        function navOff2(){
            phone.style.marginTop = "-1500px";
        }
        function navListOn2(){
            phone.style.marginTop = "0px";
        }
        function navListOff2(){
            phone.style.marginTop = "-1500px";
        }
    }
}

addEventListener( "resize", test);

function test2(){
	if(document.documentElement.clientWidth > 860){
		navHover.onmouseover = navOn;
		navHover.onmouseout = navOff;
		navListDescop.onmouseover = navListOn;
		navListDescop.onmouseout = navListOff;

		function navOn(){
			descop.style.top = "320px";
		}
		function navOff(){
			descop.style.top = "-360px";
		}
		function navListOn(){
			descop.style.top = "320px";
		}
		function navListOff(){
			descop.style.top = "-360px";
		}
	}
}

addEventListener( "resize", test2);
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2020, 10:02
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,746

Ну значит надо еще вызывать эти функции при открытии страницы.

addEventListener( "resize", () => {test(); test2()} );
addEventListener( "load", () => {test(); test2()} )

Последний раз редактировалось voraa, 01.04.2020 в 10:08.
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2020, 11:37
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

addEventListener( "resize", () => {test(); test2()} );
addEventListener( "load", () => {test(); test2()} )

Тут написано, слушай событие, в скобках какое, первое значение перед запятой это изменение и загрузка, после запятой втрое значение,
мне не понятно что значат круглые скобки

объясните если не сложно
Ответить с цитированием
  #6 (permalink)  
Старый 01.04.2020, 12:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сообщение от Сергей Ракипов
мне не понятно что значат круглые скобки
место для аргументов функции
() => {}
тоже самое, что
function (){}
Ответить с цитированием
  #7 (permalink)  
Старый 01.04.2020, 12:28
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Понял спасибо
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
разрешение экрана kvaleksandr Серверные языки и технологии 1 05.05.2011 14:59
Разрешение экрана Golovastik Internet Explorer 1 21.02.2011 20:28
Разрешение экрана и соответствующий ему фоновый рисунок Alenkaa (X)HTML/CSS 53 12.12.2010 16:59
Можно легко узнать разрешение экрана. А как именно JS это узнает? jungle Общие вопросы Javascript 12 29.11.2010 01:43
Разрешение экрана в FF sidor Firefox/Mozilla 0 01.03.2010 19:56