Справочник DESIGN/HTML/CSS

Мой Справочник | JavaScript | jQuery-примеры

1. Плавный скроллинг до блока (.block-class) при нажатии на ссылку\кнопку (.link-class) +

<button class="js-scroll">1. Scroll to footer</button>

// До одного блока
$(function() {
  $(".link-class").on("click", function(event) { // анонимная функция
    // сброс настроек
    event.preventDefault();

    // сохраняем расстояние до h1 в переменную
    var scrollToBlock = $(".block-class").offset().top;

    // скролим тело документа (html и body для кроссбраузерности) на расстояние scrollHight 500млс
    $("html, body").animate({ scrollTop: scrollToBlock }, 500);
  });
});

// Если нужны разные скролы по нескольким ссылкам
$(function() {
  // вставляем общий селектор для всех ссылок меню
  $("ul.menu a").on("click", function(event) {
    // сброс настроек
    event.preventDefault();

    // сохраняем id блока, это будет значение атрибута href кликнутой ссылки,
    // ссылки должны быть связаны с блоками по id
    var currentBlock = $(this).attr('href');


    // делаем выборку элемента по сохранённому id, и вычисляем до него расстояние 
    var topHeight = $(currentBlock).offset().top;

    // скролим при клике до нужного блока
    $("html, body").animate({ scrollTop: topHeight + 20}, 500);
  });
});



2. Фиксированное меню при скролле +

// Fixed header when scroll 
$(function() {
  // сохранем значение высоты хэдера в var
  var headerHeight = $(".page-header").innerHeight(); // или height()

  // улавливаем событие скрола
  $(document).on("scroll", function() {
    // текущее значение высоты скрола от верха окна при скроле
    var documentScroll = $(this).scrollTop();

    // Если высота скрола > высоты хэдера
    if(documentScroll > headerHeight) {
      // добавляем класс хедеру
      $(".page-header").addClass("fixed");

      // и padding для body на высоту хэдера (т.к. фикс. хэдер выходит из потока)
      $("body").css("paddingTop", headerHeight);
    } else {
      $(".page-header").removeClass("fixed");
      $("body").css({"paddingTop": 0});
    }
  });
});



3. Звёзды рейтинга +

$(document).ready(function() {
  $(".star-input").on("click", function() {
    // выводим зачение поля в консоль
    console.log($(this).val());
  });

  $(".star").on("click", function() {
    $(this).css('background-position', '-40px -5px');
    $(this).nextAll().css('background-position', '-5px  -5px');
    $(this).prevAll().css('background-position', '-40px -5px');
  });
});



4. Отслеживание элементов в DOM через .get() +

$(document).ready(function() {
  var firstBtn  = $('#btn-1'),
    secondBtn   = $('#btn-2'),
    firstTitle  = $('.js-title-1'),
    secondTitle = $('.js-title-2');

  firstTitle.on('click', function() {
    secondBtn.get(0).checked = false;
    firstBtn.get(0).checked = true;
    firstTitle.css('color', 'orange');
    secondTitle.css('color', 'black');
  });

  secondTitle.on('click', function() {
    firstBtn.get(0).checked = false;
    secondBtn.get(0).checked = true;
    secondTitle.css('color', 'orange');
    firstTitle.css('color', 'black');
  });
});



5. Аккордион (НЕсамозакрывающийся) +

// нужно предварительно средствами css спрятать параграфы
<ul class="accordion">
  <li>
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur</p>
  </li>
  <li>
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur</p>
  </li>
</ul>


$('.accordion h3').on('click', function() {
  // по клику на заголовок показываем следующий за ним параграф
  $(this).next().slideToggle();
});



6. Аккордион (Cамозакрывающийся) +

 <div class="faq">
  <div class="faq-item">
    <a href="#" class="faq-title"></a>
    <p class="faq-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Magnam aliquid, repudiandae inventore laboriosam fuga omnis temporibus maxime voluptas quas.
    Nihil ex, nesciunt molestiae. Magni quas facilis doloremque, aperiam culpa nobis!</p>
  </div>
  ...
</div>

$('.faq p').hide()  // прячем все параграфы средствами css и jq
           .prev() // обращаемся к предыдущему элементу (заголовку)
           .on('click', function(e) { // отслеживаем его по клику
  e.preventDefault();
  $('.faq p').not(this).slideUp();   // прячем все параграфы, кроме текущего
  $(this).next().not(':visible').slideDown();  // обращаемся к следующему за заголовком
  // элементу, за this (заголовок), это параграф и если он неотображенный, то будет показан
});
Вопрос №1
Вопрос №2
Вопрос №3



7. Модальное окно +

<button class="show-modal">Show modal</button>
// должен стоять перед модальным окном
<div class="overlay"></div>

// должен стоять перед /body
<div class="modal">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora optio cum dolores
  <button class="modal-close">X Закрыть мод. окно</button>
</div>
// слой-маска для body
.overlay {
  display: none;
  background: rgba(0,0,0,.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
// мод. окно
.modal {
  display: none;
  position: fixed;
  background: white;
  width: 300px;
  top: 100px;
  left: 50%;
  margin-left: -150px;
  z-index: 1100;
}
body.open-modal {
  overflow-y: hidden;
  padding-right: 16px;
}
// показываем при клике на кнопку
// делаем обратное при клике на close
$('.show-modal').on('click', function(e) {
  e.preventDefault();
  // планое появление мод. окна и маски
  $('.modal, .overlay').fadeIn();
  // убираем скролл у боди
  $('body').addClass('open-modal');
});

// делаем обратное при клике на close
$('.modal-close').on('click', function(e) {
  e.preventDefault();
  $('.modal, .overlay').fadeOut();
  $('body').removeClass('open-modal');
});


// если мод. окон несколько с одним классом
// тогда нужно привязать им разный id

$('.show-modal').on('click', function(e) {
  e.preventDefault();
  // сохраняем значение атрибута в переменную
  var currentModal = $(this).attr('href');

  $(currentModal +  ', .overlay').fadeIn();
  $('body').addClass('open-modal');
});

$('.modal-close, .overlay').on('click', function(e) {
  e.preventDefault();
  $(currentModal +  ', .overlay').fadeOut();
  $('body').removeClass('open-modal');
});




8. Всплывающие подсказки при наведении (pop-up)+


// у ссылки href это id поп-апа
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  <a class="link" href="popup-1">Eos, veniam.
    <span class="popup" id="popup-1">Some pop-up-text</span>
  </a>
</p>
// наведение на .link
$('.link').hover(function() {
  // сохраняем this в пер. $this
  var $this = $(this),
      // сохраняем значение атрибута href
      popUpId = $this.attr('href');
  $(popUpId).fadeIn();  // появление при наведении
  }, function() {
    $('.popup').fadeOut();  // исчезовение при отведении
});

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Наведи на меня!




9. Выпадающий текст +

<ul class="list">
  <li class="list-item">
    <a href="#" class="js-details">Нажми на меня</a>
    <p class="js-drop-down-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Aspernatur id saepe explicabo asperiores in sint similique dolore ratione quo tempora ipsam
    illum, porro unde blanditiis ipsum enim, soluta iure possimus.</p>
  </li>
  ...
</ul>

// Обрабатываем все элементы списка методом .each()
$('.list-item').each(function() {
  // сохраняем выпадающий текст внутри текущего элемента списка в пер. text
  var text = $('.js-drop-down-text', this);

  // Улавливаем клик по ссылке внутри текущего элемента
  $('.js-details', this).on('click', function(e) {
    e.preventDefault();
    // меняем стилизацию кнопки
    $(this).toggleClass('active');

    // показываем-скрываем текст при клике
    text.slideToggle();
  });
});



ПОДСВЕТКА ТАБЛИЦЫ

  // сохраняем колонки в переменную
  var cols = $('.products-table col');

  // перебираем все строки
  $('.products-table tr').each(function() {

    // выбираем все ячейки (th и td) внутри выбранной строки и сохраняем её номер в DOM-е в переменную i
    $('th, td', this).each(function(i) {

      // при наведении на i-тую ячейку, окрашиваем(#c4eff6) i-тую колонку при на наведении, при отведении (#fff)
      $(this).hover(
        // при наведении
        function() {
          cols.eq(i).css('background-color', '#c4eff6');
        },

        // при отведении
        function() {
          cols.eq(i).css('background-color', '#fff');
      });
    });

  });



ТАБЫ

$('ul.products__menu') // меню
  .on('click', 'li:not(.active)', function() { // кликаем по li без класса .active
    $(this)
      .addClass('active')         // добавляем li класс .active
      .siblings()                 // у родственников
      .removeClass('active')      // удаляем класс .active
      .closest('div.tabs')        // находит первый в DOM div.tabs
      .find('div.tabs__content')  // находит div.tabs__content
      .removeClass('active')      // удаляем у него класс .active
      .eq($(this)                 // 
      .index())                   //
      .addClass('active');        //
    }
  );

<ul class="products__menu">
  <li class="active">ТАБ-1</li>
  <li>ТАБ-2</li>
  <li>ТАБ-3</li>
  <li>ТАБ-4</li>
</ul>
<div class="tabs__content  active"> ТАБ-1 контент </div>
<div class="tabs__content"> ТАБ-2 контент </div>
<div class="tabs__content"> ТАБ-3 контент </div>
<div class="tabs__content"> ТАБ-4 контент </div>



Checked

// при checked делать что-нибудь
$('#add-complect-item-6').click(function() {
  if($(this).is(':checked')) {
    $('#add-complect-other-id').addClass('active');
  } else {
    $('#add-complect-other-id').removeClass('active');
  }
});



Фиксируем блок при скроле

// фиксируем .progress-cont
  $(window).scroll(function() {
    var pageScroll = $(document).scrollTop(),
        bodyHeight = $('body').height();

    if ((pageScroll > 175) && (pageScroll < bodyHeight - 700)) {
      $('.progress-cont').css('top', pageScroll - 150);
    } else {
      $('.progress-cont').css('top', 26);
    }
  });

Для простого переключения чего-либо классом, можно сначала удалить этот класс у всех элементов, в затем добавить класс только для $(this)

var test = $('.test');
test.on('click', function() {
  test.addClass('active').not(this).removeClass('active');
});

Разработчик: Евгений Леухин
EvgenyLeukhin@yandex.ru

© 2016 - 2021

Мод. окно

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ab distinctio quo dolores expedita ea assumenda, nisi quisquam necessitatibus ad nostrum enim quibusdam omnis maiores deserunt maxime et sunt, doloribus optio a impedit vel ut! Fugiat obcaecati facilis autem repellat culpa quo praesentium quas ex, quaerat est consequatur inventore esse sunt repudiandae totam dicta illum, eius, quia maiores architecto velit nemo recusandae ducimus sequi! Hic rerum cumque consequuntur sit! Blanditiis explicabo, minus harum! Nesciunt modi fugiat architecto eum laboriosam doloribus dolorem adipisci alias, maiores expedita necessitatibus eos soluta officia hic corrupti reprehenderit accusamus nihil cumque iure facilis labore, mollitia delectus!

X Закрыть