Сообщения

Показаны сообщения с ярлыком "JavaScript для верстальщика"

JavaScript для верстальщика. Шпаргалка

Изображение
Скрипты, о которых шла речь в курсе, чтобы были под рукой 1. Подключение скриптов <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title> </head> <body>     <script src="js/jquery-3.2.1.min.js"></script>     <script src="js/custom.js"></script> </body> </html> 2. Начало работы в среде  jQuery:  $(document).ready(function(){     // здесь код }); или : $(function(){     // здесь код }); 3. С обытие клик и меняем текст для проверки: $ (".js-get-started").on("click", function(){         $ (this).text("Test");     })   или $ (".js-get-started").click(function(){         $ (this).text("Test");     }) 4. Отмена события по умолчанию   e...

JavaScript для верстальщикаУрок 14. Показать/Скрыть текст

Изображение
Учимся открывать и скрывать блок текста спрятанный под ссылкой с надписью Read more. При клике по ссылке, текст должен появиться, а надпись смениться на Hide. При повторном клике - текст скрывается, надпись меняется на прежнюю. В разметке скрытый текст находится внутри спана с классом hidden и css-свойством .hidden {     display: none; } Ссылке Read more добавляем класс js-read-more , скрытому тексту класс js-block-content . Отслеживаем клики по ссылкам с классом .js-read-more $(".js-read-more").on("click", function(event) {     }); Отменяем событие по умолчанию event.preventDefault(); Чтобы контент отобразился при нажатии на ссылку, убираем у блога с контентом класс hidden $(".js-blog-content").removeClass("hidden"); Сразу обнаруживаются два недостатка. Открывается весь скрытый контент всех блоков. И при повторном нажатии на ссылку контент не скрывается. Для решения первого недостатка нужно связать контент и ссылку, ...

JavaScript для верстальщика. Урок 13. Еще методы

Изображение
Доступ к ближайшему родителю элемента: var parent = $(".element").parent(); В скобках можно указать класс родителя var parent = $(".element").parent(".class"); Доступ ко всем родителям var parents = $(".element").parents(); Доступ к потомкам $("#js-nav").children("a"); Как по мне, следующий селектор выполняет точно такую же выборку $("#js-nav > a"); Поиск внутри элемента $("#js-nav").find("a");

JavaScript для верстальщика. Урок 12. Улучшение модального окна-2

Изображение
В этом уроке познакомимся с новыми методами, познакомимся с циклом и научимся центрировать элементы через js-код. В данном случае для размещения модального окна по центру мы используем абсолютное позиционирование, свойство left: 50% , и отрицательный margin-left = -150px ; равный половине ширины модального окна, которая составляет 300 px. Предположим, что модального окна или любого другого элемента нам неизвестна, или она непостоянная, или у нас есть несколько однотипных элементов разной ширины. Получаем ширину модального окна с классом js-modal : $(".js-modal").width(); $(".js-modal").innerWidth(); Первый метод  width() получает ширину элемента без паддингов и бордеров, второй - innerWidth() - вместе с ними. Он нам и нужен. Присвоим этот код переменной modalWidth и разделим результат на два, так как нам нужна половина ширины модального окна. var modalWidth = $(this).innerWidth() / 2; Дальше, как по мне, нужно было бы его умножить на минус еди...

JavaScript для верстальщика. Урок 11. Улучшение модального окна

Изображение
Добавление элемента на страницу возможно не только через html, но и через js. Покажем как это реализуется на примере оверлея, который появляется при открытии модального окна. Код оверлея в html разметке:  <div class = "overlay" id = "js-overlay"></div> Оверлей находится внутри тега body Код добавления элемента через js $(body).append("<div class = 'overlay' id = 'js-overlay'></div>"); Особенностью является то, что если в  js используются двойные кавычки, кавычки в коде элемента нужно изменить на одинарные. Метод append() добавляет элемент в конц тега, метод prepend() - в начало тега. При добавлении модального окна мы уже задействовали тег body , добавляя ему класс при помощи метода addClass Сейчас для этого же элемента нам нужно добавить ещё один метод. Можно не писать его каждый раз заново, а писать цепочку методов через точку $("body").append("<div class='overlay' id=...

JavaScript для верстальщика. Урок 10. Всплывающие подсказки

Изображение
Рассмотрим как в js выглядит событие hover , возникающее при наведении курсора на какой-то элемент. Чтобы при наведении курсора на какой-то элемент появлялась всплывающая подсказка с текстом, блок с этой подсказкой должен присутствовать в вёрстке, скрытый при помощи css-свойства display:none; . Вообще говоря, изменение свойств при наведении - стандартная возможность css. Пишем .class:hover { ... } и можем менять свойства как нам угодно. Но иногда возникает ситуация, когда курсор навели на один элемент, а свойства должны измениться у другого. Как это реализовать. Всплывающий блок с подсказкой имеет класс js-popup и уникальный id="popup-1" . У ссылки, при наведении на которую должен появляться этот попап, указываем свойство href="#popup-1" и класс js-popup -hover Событие наведение: $(".js-popup -hover ").hover(function(){ }) Создаём две переменные. Первая var $this = $(this); Это просто хорошая практика, чтобы не предлагать каждый р...

JavaScript для верстальщика. Урок 09. Создание аккордеона 2

Изображение
Продолжение предыдущей темы в котором рассматривается вариант,где блоки с контентом не лежат непосредственно под блоком с заголовком. Тогда, чтобы объяснить скрипту, какой блок нужно открыть при клике по данному заголовку используем уже известный по предыдущим урокам приём, когда блоку с контентом присваиваем уникальный id, а потом его же указываем в атрибуте href заголовка. Код выглядит следующим образом $(".js-faq-title").on("click", function(e) {         e.preventDefault();         var $this = $(this),             answerId = $this.attr("href");         if( !$this.hasClass("active") ) {             $(".js-faq-content").slideUp();             $(".js-faq-title").removeClass("active");      ...

JavaScript для верстальщика. Урок 08. Создание аккордеона

Изображение
Аккордеон это блок из контента и заголовков. Контент скрыт и появляется только по клику по соответствующему заголовку. Разметка - несколько блоков вида:  <div class="faq-item">     <a href="#" class="faq-title">Заголовок</a>     <div class="faq-content"><p>Текст</p></div> </div> Текст по умолчанию скрыт. Для этого в css прописываем .faq-content {     display: none; } Блокам faq-title и faq-content добавляем классы js-faq-title и js-faq-content Пишем функцию для отлавливания кликов по блокам с классом  js-faq-title : $ (". js-faq-title").on("click", function(){         })   Отменяем событие по умолчанию event.preventDefault();   Пробуем использовать функцию fadeIn() $(". js-faq-content ").fadeIn(); Теперь при клике по любому заголовку открывается контент всех блоков. Это не совсем то, что требуется . Так как в ра...

JavaScript для верстальщика. Урок 07. Создание модального окна

Изображение
Задача - создать функцию появления и исчезновения всплывающего модального окна по клику. Для этого смотрим раздел Effects http://api.jquery.com/category/effects/ Нас интересуют два эффекта:  .fadeIn() и .fadeOut() - соответственно, появление и исчезновение элемента. Кроме модального окна будет появляться и исчезать полупрозрачный оверлей, полоса прокрутки и, в итоге, мы сделаем так, чтобы код работал для разных модальных окон, которые могут быть на странице. Модальному окну присваиваем класс js-modal , так как модальных окон может быть много и логику для всех лучше прописать одну. И добавляем id = "js-modal-login" , чтобы отличить от других модальных окон. Этот же id прописываем в атрибуте href   ссылки, при клике по которой окно должно появляться. Для этой ссылки также прописываем класс js-show-modal . Класс, а не id, опять же потому, что подобных ссылок, при клике по которым должны открываться модальные окна, на странице может быть несколько.  Модальное окно д...