Задать вопрос
IsSavinykh

Илья Савиных

Full-Stack Веб-разработчик, мобильный разработчик
Ответы пользователя по тегу CSS

  • Как сделать такой option?

    IsSavinykh
    @IsSavinykh
    Full-Stack Веб-разработчик, мобильный разработчик
    Попробуйте так: jsfiddle.net/rp4Se/4

    Добавлять в option нельзя, но можно разделять по контенту, либо добавить дополнительный атрибут data-* из которого уже отображать пользователю в кастомном селекте. Вам нужно эмулировать селект, чтобы добиться требуемого поведения.
    Ответ написан
    Комментировать
    Комментировать

  • Как придать необычную форму div средствами CSS?

    IsSavinykh
    @IsSavinykh
    Full-Stack Веб-разработчик, мобильный разработчик 
    .block {
     clip-path: polygon(0% 40%,100% 0%,100% 100%,0% 100%) margin-box;
     margin: 0;
}
    попробуйте так..
    Ссылка на статью - здесь подробнее об этом говориться
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать, если элементов больше 5 - то они скрывались? И открывались по нажатии кнопки?

    IsSavinykh
    @IsSavinykh
    Full-Stack Веб-разработчик, мобильный разработчик
    При генерации блоков задайте атрибут hidden всем блокам, начиная с шестого (чтобы первые 5 отображались)
    <div class="content">
   <div class="filter">
      <p>Текст - 1</p>
   </div>
   <div class="filter">
      <p>Текст - 2</p>
   </div>
   <div class="filter">
      <p>Текст - 3</p>
   </div>
   <div class="filter">
      <p>Текст - 4</p>
   </div>
   <div class="filter">
      <p>Текст - 5</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 6</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 7</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 8</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 9</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 10</p>
   </div>
   <p class="show_content">Показать остальное</p>
</div>

    Далее на Jquery напишите код..
    $(document).ready(() => {
        $('body').on('click', '.show_content' , () => {
            var scrollToProduct = $('.filter:hidden');
            $('.filter:hidden:lt(5)').slideDown(1000);
            if (scrollToProduct.length === 0) $('.show_content').hide() ;
            $('html, body').animate({
                scrollTop: scrollToProduct.offset().top
            }, 1000);
        });
    });

    $('.filter:hidden:lt(5)').slideDown(1000); - 5 можете заменить на любое значение, именно столько блоков будут отображаться при каждом нажатии на "Показать остальное"
    Также может быть будет полезным после нажатия на кнопку "Показать остальное", чтобы вас плавно скроллило на первый новый отобразившийся блок)
    Либо, если Вам нужно, чтобы при нажатии на кнопку отображались все блоки, то напишите:
    $(document).ready(() => {
        $('body').on('click', '.show_content' , () => {
            var scrollToProduct = $('.filter:hidden');
            $('.filter:hidden').slideDown(1000);
            if (scrollToProduct.length === 0) $('.show_content').hide() ;
            $('html, body').animate({
                scrollTop: scrollToProduct.offset().top
            }, 1000);
        });
    });

    или примитивный вариант:
    $(document).ready(() => {
        $('body').on('click', '.show_content' , () => {
            var scrollToProduct = $('.filter:hidden');
            $('.filter:hidden').show();
            if (scrollToProduct.length === 0) $('.show_content').hide() ;
        });
    });
    Ответ написан
    Комментировать
    Комментировать