Показать сообщение отдельно
  #1 (permalink)  
Старый 09.11.2018, 00:41
Аватар для irchik
Новичок на форуме
Отправить личное сообщение для irchik Посмотреть профиль Найти все сообщения от irchik
 
Регистрация: 09.11.2018
Сообщений: 2

Замена фона при нажатии кнопки и в зависимости от разрешения экрана
Здравствуйте! Есть кнопка, которая отвечает за замену фона на сайте, она работает на:

<img src="knopka.png" onClick="return setBg1()">

<script>
<!--
var countPress = 1;
function setBg1() {
countPress++;
if (countPress == 2) {document.body.style.backgroundImage = 'url(noch.png)';}
if (countPress == 3) {document.body.style.backgroundImage = 'url(den.png)';
countPress = 1;}
}
//-->
</script>

и есть мобильная версия сайта для разрешения <1200, где два других фона, которые тоже нужно переключать кнопкой.
я не придумала ничего умнее, чем скрыть первую кнопку с помощью display:none; и проявить вторую кнопку, при нажатии на которую срабатывает скрипт-клон, но с другими фонами:

<img src="knopka.png" onClick="return setBg2()">

<script>
<!--
var countPress = 1;
function setBg2() {
countPress++;
if (countPress == 2) {document.body.style.backgroundImage = 'url(nochmobil.png)';}
if (countPress == 3) {document.body.style.backgroundImage = 'url(denmobil.png)';
countPress = 1;}
}
//-->
</script>

в итоге всё работает отдельно в браузере и отдельно на телефоне, но не работает (что логично) при масштабировании экрана браузера, потому что при этом процессе первый скрипт не отключается, пока не происходит нажатие кнопки(которая видна только в мобильной версии), и она уже включает второй скрипт, ну и при обратном масштабировании мобильный фон конечно же остается в полной версии, пока не будет нажата кнопка, которая видна только в полной версии.

Я пыталась подключить $(window).resize(function(), чтобы скрипт отключался при определенном разрешении - не сработало,
чтобы принудительно включался мобильный фон при уменьшении окна - сработало, но тут либо один, либо второй, то есть если полный фон светлый - то мобильный тоже светлый, а если полный фон темный - то мобильный тоже должен быть темным, но получалось переключить оба либо на светлый, либо на темный.

Зачем мне это надо? я не знаю, но не могу спокойно жить, пока задача не решена. Возможно, все вообще очень кривое, потому что очень отдаленно понимаю js, ищу примеры и разбираю их, сама мало что могу написать... Помогите!

Последний раз редактировалось irchik, 09.11.2018 в 00:49.
Ответить с цитированием