[Помогите] Вид "сетка" для мобильного

Тема в разделе "OpenCart", создана пользователем cereberlum, 22 окт 2015.

  1. cereberlum

    cereberlum

    Регистрация:
    26 май 2013
    Сообщения:
    756
    Симпатии:
    269
    Господа, никто не знает как сделать отображение по типу "сетка" если пользователь сидит с мобильного устройства? Что можно переверстать тип отображения чтобы на мобильном было нормально я знаю. Меня, все же, интересует возможно ли переключать тип отображения?
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Подключаете jquery.browser https://github.com/gabceb/jquery-browser-plugin
    И в шаблоне, где
    Код:
    view = $.totalStorage('display');
    
    Меняете на
    Код:
    if ($.browser.mobile) {
        view = 'grid';
    } else {
        view = $.totalStorage('display');
    }
     
    cereberlum нравится это.
  3. cereberlum

    cereberlum

    Регистрация:
    26 май 2013
    Сообщения:
    756
    Симпатии:
    269
    Интересно, почему может не работать, <script type="text/javascript" src="/catalog/view/theme/pav_drugstore/javascript/jquery.browser.js"></script> подключил, в коде ниже <script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script> Скажите, как можно проверить что скрипт узнает мобильный браузер? и еще я пробовал сделать так:
    Код:
    if ( screen.width <= '760' ) {
        view = 'grid';
    } else {
        view = $.totalStorage('display');
    }
    Но тоже что-то не прокатило.

    P/S/ Оказывается все нормально работает, просто надо было реально с мобильного устройства смотреть, а не сервисами всякими. Теперь вопрос, а можно сделать по ширине девайса переключение, типа как в примере что я привел?
     
    Последнее редактирование: 23 окт 2015
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Скрипт проверяет User agent, а не размер экрана, так что работать будут только сервисы с полноценным эмулятором (кстати, такой есть в Хроме).

    Вы это уже сделали. Просто нужно размер проверять по событию window.resize, иначе оно сработает только один раз при загрузке страницы, если размер совпал с условием. И проверять нужно document.documentElement.clientWidth, а не размер экрана.
     
  5. cereberlum

    cereberlum

    Регистрация:
    26 май 2013
    Сообщения:
    756
    Симпатии:
    269
    Спасибо за ответ, для общего развития полезно, я сделал как-то через стили. Ну т.е. я скрываю баннер для устройств с шириной экрана меньше 500 пикселей, скрsваю на css @media. В результате написал вот такую фигню
    Код:
    if( $('.pav-banner').css('display')=='none') {  
        view = 'grid';
    } else {
        view = $.totalStorage('display');
    }
    И это как-то работает.
     
    Marrie нравится это.