Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (7)

Лучшие ответы пользователя

Все ответы (9)
  • Как подружить height 100vh и chrome mobile?

    evorios
    @evorios
    Для себя я решил эту проблему таким образом:

    body {
      margin: 0;
      overflow: hidden;
    }
    
    body > .scroll-box {
        position: relative;
        left: 0;
        right: 0;
        height: 100%;
        max-height: 100vh;
        overflow-y: auto;
    }

    Таким образом блокируется прокрутка страницы, следовательно навигационная панель будет видна всегда. А также 1vh будет постоянным. Прокрутка же появляется, если внутри контейнера .scroll-box содержимое не помещается по вертикали. Прокрутка контейнера никак не повлияет на размеры body. Все лайтбоксы, модальные окна и выдвигающиеся меню помещаются в body для того, чтобы появление прокрутки никак не влияло на верстку этих окон.
    PS. Для блокировки паразитной прокрутки основного контейнера во время прокрутки модального окна я добавил в JS:
    $modal.on('show', () => $scrollBox.css({ 'pointer-events': 'none' }));
    $modal.on('hide', () => $scrollBox.css({ 'pointer-events': 'auto' }));
    Ответ написан
    1 комментарий
  • Как сделать фильтр по нескольким параметрам?

    evorios
    @evorios
    У меня в проекте недавно была такая же задача. Я сделал её на основе CSS правил. Надеюсь, тебе такое решение тоже понравится.

    https://jsfiddle.net/b0t3876r/23/

    HTML
    <div class="filter-control">
      <ul data-f1="a">
        <li><a data-f2="Chicago" href="#">Chicago</a></li>
        <li><a data-f2="Houston" href="#">Houston</a></li>
        <li><a data-f2="Dallas" href="#">Dallas</a></li>
      </ul>
    
      <ul data-f1="b">
        <li><a data-f2="Chicago" href="#">Chicago</a></li>
        <li><a data-f2="Houston" href="#">Houston</a></li>
        <li><a data-f2="Dallas" href="#">Dallas</a></li>
      </ul>
    
      <ul data-f1="c">
        <li><a data-f2="beer" href="#">beer</a></li>
        <li><a data-f2="whiskey" href="#">whiskey</a></li>
      </ul>
    </div>
    
    <div class="filteredblock a b c">
    
      <div class="a-Chicago b-Houston c-beer">Chicago Houston beer</div>
      <div class="a-Chicago b-Houston c-whiskey">Chicago Houston whiskey</div>
      <div class="a-Chicago b-Dallas c-beer">Chicago Dallas beer</div>
      <div class="a-Chicago b-Dallas c-whiskey">Chicago Dallas whiskey</div>
      <div class="a-Houston b-Chicago c-beer">Houston Chicago beer</div>
      <div class="a-Houston b-Chicago c-whiskey">Houston Chicago whiskey</div>
      <div class="a-Houston b-Dallas c-beer">Houston Dallas beer</div>
      <div class="a-Houston b-Dallas c-whiskey">Houston Dallas whiskey</div>
      <div class="a-Dallas b-Chicago c-beer">Dallas Chicago beer</div>
      <div class="a-Dallas b-Chicago c-whiskey">Dallas Chicago whiskey</div>
      <div class="a-Dallas b-Houston c-beer">Dallas Houston beer</div>
      <div class="a-Dallas b-Houston c-whiskey">Dallas Houston whiskey</div>
    
    </div>

    JavaScript
    $(function () {
      var $list = $('.filteredblock');
    	$('.filter-control a').on('click', (e) => {
        var $a = $(e.target);
        var $li = $a.parent();
        var $ul = $li.parent();
        var f1 = $ul.data('f1');
        var f2 = $a.data('f2');
        
        $li.toggleClass('checked');
        if ($li.hasClass('checked')) {
        	$list.addClass(`${f1}-${f2}`).removeClass(`${f1}`);
        } else {
        	$list.removeClass(`${f1}-${f2}`);
          if (!$ul.find('.checked').length)
          	$list.addClass(`${f1}`);
        }
        return false;
      });
    });

    CSS
    @charset "utf-8";
    body {
      background: #fff;
      padding: 20px;
      font-family: Segoe UI Symbol;
      color: #000;
    }
    
    .filter-control li {
      list-style-type: none;
    }
    .filter-control li:not(.checked):before {
      content: '☐';
    }
    .filter-control li.checked:before {
      content: '☑';
    }
    
    .filteredblock > div {
      color: #fff;
    }
    
    .filteredblock.a.b.c > div,
    .filteredblock.a-Chicago > .a-Chicago,
    .filteredblock.a-Houston > .a-Houston,
    .filteredblock.a-Dallas > .a-Dallas,
    .filteredblock.b-Chicago > .b-Chicago,
    .filteredblock.b-Houston > .b-Houston,
    .filteredblock.b-Dallas > .b-Dallas,
    .filteredblock.c-beer > .c-beer,
    .filteredblock.c-whiskey > .c-whiskey {
      color: #000;
    }
    
    .filteredblock:not(.a):not(.a-Chicago) > .a-Chicago,
    .filteredblock:not(.a):not(.a-Houston) > .a-Houston,
    .filteredblock:not(.a):not(.a-Dallas) > .a-Dallas,
    .filteredblock:not(.b):not(.b-Chicago) > .b-Chicago,
    .filteredblock:not(.b):not(.b-Houston) > .b-Houston,
    .filteredblock:not(.b):not(.b-Dallas) > .b-Dallas,
    .filteredblock:not(.c):not(.c-beer) > .c-beer,
    .filteredblock:not(.c):not(.c-whiskey) > .c-whiskey {
      color: #fff;
    }

    Если пунктов в фильтрах уж очень много, то поможет в создании правил CSS следующая JS-функция:
    var addCSS = function (selector, style) {
      var sheet = window.document.styleSheets[window.document.styleSheets.length - 1];
      sheet.addRule(selector, style);
    };

    С использованием функции addCSS это выглядит так:
    https://jsfiddle.net/b0t3876r/24/
    Ответ написан
    Комментировать
  • Как в ASP.NET vNext создать сессию?

    evorios
    @evorios
    Вот первая же ссылка из Гугла:
    www.mikesdotnetting.com/article/270/sessions-in-as...

    Перенаправление - обычный редирект в контроллере, если сессия имеется и корректна.
    Ответ написан
    Комментировать