Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2018, 21:29
Аватар для Mansolide
Новичок на форуме
Отправить личное сообщение для Mansolide Посмотреть профиль Найти все сообщения от Mansolide
 
Регистрация: 14.05.2018
Сообщений: 7

Оптимизация скрипта при разных разрешениях
Привет, кто поможет оптимизировать скрипт?

<script type='text/javascript'>
$(function(){
$(window).on('resize', (function() {
if ($(window).width() < 769) {
  $(window).scroll(function() {
    var top = $(document).scrollTop();
    if (top < 1) $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
    else $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
     });
} else {}
}));
});
</script>


Данный скрипт в мобильной версии менее чем 769 рх к фиксированному блоку .topblock добавляет тень и полупрозрачный background. В самом блоке находится основное меню и меню гамбургер.

Функция resize нужна для того, что бы если пользователь смотрит на смартфоне горизонтально при большом разрешении и перевернул его вертикально, тогда к .topblock так же добавляется тень и background.

Скрипт работает не совсем коректно, в Мобайл Хром на Sony работает, а в Опере на этом же телефоне нет.

Так же при обновлении страницы или при переходе на другую страницу, скрипт тоже работает не корректно, тень есть, полупрозрачный background отсутствует. Это например можно проверить в Десктопе Хрома нажам F12 и выбрать разрешение 768 рх или меньше.

Если сайт проверить в responsinator.com, то там вообще не работает ничего, нет тени и нет background.

Последний раз редактировалось Mansolide, 14.05.2018 в 21:37.
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2018, 21:37
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,790

http://htmlbook.ru/css/value/media
про Медиа-запросы почитайте
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2018, 21:40
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,790

если не устраивает, то https://developer.mozilla.org/ru/doc...dow/matchMedia

но никак не ресайз, зачем вам каждые пару пикселей пытаться добавлять одно и то же свойство объекту.
Ответить с цитированием
  #4 (permalink)  
Старый 15.05.2018, 05:23
Аватар для Mansolide
Новичок на форуме
Отправить личное сообщение для Mansolide Посмотреть профиль Найти все сообщения от Mansolide
 
Регистрация: 14.05.2018
Сообщений: 7

Единственно что понял, что на большее понимание знаний не хватает, что и где изменить или переписать не понимаю.
Ответить с цитированием
  #5 (permalink)  
Старый 15.05.2018, 17:39
Аватар для Mansolide
Новичок на форуме
Отправить личное сообщение для Mansolide Посмотреть профиль Найти все сообщения от Mansolide
 
Регистрация: 14.05.2018
Сообщений: 7

Объясните кто нить на пальцах, почему нельзя использовать 'resize', ведь пользователи часто вертят экран при просмотре на планшете, из-за этого и разрешение по ширине меняется от 678 рх до 1024 рх например, получается при просмотре на 768 рх нужно, что бы скрипт включился, а при повороте планшета на большую ширину он отключается.
Ответить с цитированием
  #6 (permalink)  
Старый 15.05.2018, 17:46
Аватар для Mansolide
Новичок на форуме
Отправить личное сообщение для Mansolide Посмотреть профиль Найти все сообщения от Mansolide
 
Регистрация: 14.05.2018
Сообщений: 7

Я может в начале не правильно написал

Сообщение от Mansolide Посмотреть сообщение
Функция resize нужна для того, что бы если пользователь смотрит на смартфоне горизонтально при большом разрешении и перевернул его вертикально, тогда к .topblock так же добавляется тень и background.
Здесь я имел ввиду, если пользователь из горизонтального положения поворачивает планшет вертикально, то к фиксированному .topblock должна добавится тень и полупрозрачный фон, до этого на большем разрешении не было тени и фона.
Ответить с цитированием
  #7 (permalink)  
Старый 15.05.2018, 20:49
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,790

resize использовать можно, но вам нужна только одна контрольная точка, перескочив которую добавляется css свойство, а для этого есть более подходящее событие.
Ответить с цитированием
  #8 (permalink)  
Старый 15.05.2018, 20:56
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,790

вы почитали про медиа?
http://htmlbook.ru/css/value/media

можете объяснить почему нельзя их использовать?

если непонятно то почитайте еще немного
https://habr.com/post/119127/
https://habr.com/post/198292/

может не нежен вам JS? css прекрасно справится.
Ответить с цитированием
  #9 (permalink)  
Старый 16.05.2018, 00:29
Аватар для Mansolide
Новичок на форуме
Отправить личное сообщение для Mansolide Посмотреть профиль Найти все сообщения от Mansolide
 
Регистрация: 14.05.2018
Сообщений: 7

Теоретически вроде понимаю, но как это реализовать на JS не знаю, а полностью на CSS это не решить.

Изначально .topblock не фиксированный и в десктопном режиме скролится в месте со страницей. А в мобильном разрешении от 768рх и ниже он фиксированный и для лучшее визуального восприятия к нему добавляется тень и полупрозрачность. Для этого нужно отследить скрол и смену разрешения.

Можно конечно сразу в основной CSS добавить тень и полупрозрачность и отслеживать только скроллинг, изначально так и было и был простой скрипт

<script type='text/javascript'>
$(function(){
     $(window).scroll(function() {
     var top = $(document).scrollTop();
     if (top < 1) $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
    else $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
     });
});
</script>


Но в десктопе считаю это лишним, потому пошёл дальше и дошёл до отслеживания разрешения и ресайза и заметил баги.
Ответить с цитированием
  #10 (permalink)  
Старый 16.05.2018, 00:47
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,790

function addRemoveCSS (){		
			var top = $(document).scrollTop();
			var flag = $(window).width() < 769 && top < 1;

			if(flag && $('.topblock').css('box-shadow') !== 'none') $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
			if(!flag && $('.topblock').css('box-shadow') === 'none') $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
		}
		addRemoveCSS(); // если при загрузке запускать не нужно. удалите эту строку

		$(window).scroll(addRemoveCSS); 
		matchMedia('(min-width: 769px)').addListener(addRemoveCSS);


если будет работать не так как вы планируете, напишите подробней что и в каком случае должно происходить

Последний раз редактировалось j0hnik, 16.05.2018 в 01:16.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Авто выполнение скрипта при открытии вкладки. FreeZon Javascript под браузер 1 28.09.2015 08:14
Соединить 2 скрипта в один или сбор информации из разных автозаполняемых полей Ilya_Ru Общие вопросы Javascript 4 07.04.2015 12:53
При выполнении скрипта появляется тень текста Maggie Javascript под браузер 16 24.08.2014 17:47
как в dreamweaver сделать чтобы шрифт и ссылки не съезжали на разных разрешениях?? ekstrimalka1 Элементы интерфейса 2 19.09.2011 10:33
Выполнение скрипта при нажатии Entet в текстовм поле Vlasssov Общие вопросы Javascript 4 23.08.2009 22:31