Javascript.RU

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

Проблема с отрабатыванием скрипта на разных разрешениях
День добрый! Проблема следующего характера...
Есть адаптивный сайт, на котором при разрешении меньше 768 "прячется" сайдбар шириной 250px (position: absolute; left: -250, в то же время в хэдере появляется иконка, по клику на которую сайдбару добавляется класс .active{left:0;}.
Здесь все работает так как надо - кликнул по иконке - сайдбар получил класс и выехал, кликнул еще раз - он лишился класса и, соответственно, заехал.

Но, если сузить экран, скажем до 350px, выезжающий сайдбар закрывает иконку. Поэтому было принято решение, на этом разрешении и меньше при клике добавлять/убирать класс самой иконке, который также позиционировал ее абсолютно и сдвигал вправо ровно на столько, на сколько это нужно, чтобы она не закрывалась сайдбаром.
Визуально кажется, что выезжающий сайдбар попросту "сдвигает" иконку в сторону. Но это происходит только после обновления страницы. То есть, если я захожу на сайт например с iPhone 4 в альбомной ориентации (480px), где иконка расположена на достаточно большом расстоянии от активного сайдбара и, естественно, им не закрывается, а потом меняю ориентацию на портретную (320px) без обновления страницы, иконке класс не добавляется и она благополучно закрывается сайдбаром (после обновления все работает как положено).

window.resize полностью проблему не решает - при первом повороте телефона из альбома в портрет, класс добавляется и иконка благополучно ездит туда/сюда при клике, а вот при повторном - уже нет, класс не добавляется. И как решить эту проблему не знаю...
Есть какие-либо соображения на этот счет?


jQuery(document).ready(function($){

$('.icon-menu').click(function() {
$('.sidebar').toggleClass('active');
});

$(window).resize(function() {
var windowWidth = $( window ).width();
if (windowWidth < 435 ) {
$('.icon-menu').click(function() {
$(this).toggleClass('left');
});
};
});

});
Ответить с цитированием
  #2 (permalink)  
Старый 26.02.2016, 07:44
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

K_Dmitrij,
проверять через медиазапросы ориентацию устройства и менять header.
@media (orientation : landscape) /* альбомная ориентация */
@media (orientation : portrait) /* книжная */


Ну или добавить больше контрольных точек
@media (max-width:321px){
 /* что-то делаем */
}
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема скрипта карусели в firefox. Очень прошу помощи. -user21- jQuery 5 16.06.2010 12:38
Проблема с кодировкой кирилицы внутри скрипта GRIG jQuery 13 29.04.2010 10:30
Ещё одна проблема обработки скрипта в Mozilla comcam Firefox/Mozilla 15 27.03.2009 01:22
Проблема понимания работы скрипта Diogo Общие вопросы Javascript 0 08.11.2008 16:52
Проблема обработки скрипта в Mozilla ermugard Firefox/Mozilla 2 18.06.2008 16:52