Бесплатные обучающие уроки

Эта рубрика целиком и полностью посвящена урокам на разные темы. Здесь содержаться статьи по компьютерной грамотности, уроки создания сайтов на HTML, CSS, PHP, CMS Wordpress и других, программировании на Javascript, работе в редакторе Adobe Photoshop и других программах, поисковой оптимизации и многих других.

Добавить страницу в закладки браузера на jQuery

bookmark

Приветствую вас, дорогие друзья! Я тоже интересовался этим вопросом, как добавить страницу в закладки браузера с помощью jQuery или Javascript. И выяснилось, что на данном этапе развития веб-технологий, это сделать невозможно. Нельзя просто так взять и начать управлять браузером пользователя. Но мы можем подтолкнуть или мотивировать на то, чтобы он сам добавил страницу вашего сайта в закладки. И сейчас разберем несколько способов.

Первый и самый простой в исполнении, это при клике по ссылке или кнопке показать всплывающий alert с текстом-предложением добавить страницу в закладки. Делается это очень просто:

HTML

1
<span class="selector">Добавить в закладки</span>

jQuery

1
2
3
4
5
$(function(){
  $('.selector').click(function(){
    alert('Нажмите сочетание клавиш Ctrl + D');
  })
});

К сожалению мы не можем изменить внешний вид стандартного сообщения браузера, но можем создать свое кастомное модальное окно и сделать его каким угодно. И это второй способ. Для начала создадим его и оформим в CSS.

HTML

1
2
<div class="modal-offer">Нажмите сочетание клавиш Ctrl + D<span>&times;</span></div>
<a class="bookmark" href="#">Добавить в закладки</a>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.modal-offer {
    width: 250px;
    height: 100px;
    position: fixed;
    top: -160px;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: linear-gradient(to right, #ccc, #fdf, #ccc);
    padding: 10px;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 10px 14px 0;
}
.modal-offer span { /* Крестик закрытия окошка */
    position: absolute;
    top: -6px;
    right: 6px;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
}

Обратите внимание, что position обязательно нужно указывать fixed, иначе при прокрутке страницы сообщение никто не увидит. Добавим код-обработчик.

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
 $('.bookmark').click(function(){
  $('.modal-offer').animate({
    top: 10
   });
})
$('.modal-offer span').click(function(){
  $('.modal-offer').animate({
    top: '-160px'
    });
  })
});

И еще один вариант, который вы можете наблюдать в конце каждой страницы моего блога, это подмена текста по клику. тут все элементарно.

HTML

<span class="selector">Добавить в закладки браузера</span>

jQuery

1
2
3
$('.selector').click(function(){
    $(this).html('<b>Нажмите сочетание клавиш Ctrl + D</b>').css('color', 'red');
 })

Все примеры на одной странице
Демо

Теперь вы знаете как добавить страницу в закладки браузера с применением библиотеки jQuery. Все ли вам было понятно в данном материале?

Адаптируем меню под мобильные устройства

Адаптивное меню для сайта

Всем привет! В предыдущей статье я показывал как сделать мобильное меню для сайта. Теперь пришло время выяснить как адаптировать обычное горизонтальное меню под маленькие разрешения экрана. В частности для планшетов и смартфонов. Помогут нам в этом CSS3 и медиа-запросы.

Демо

Итак, давайте представим, что у нас уже есть меню и нам нужно, чтобы оно было адаптированным. А пока, при уменьшении окна браузера, верстка начинает разъезжаться, что приводит в ужас моего внутреннего эстета.

Для начала нужно определить точку (ширину экрана), при достижении которой наше меню будет меняться на мобильное. Можно сразу установить max-width: 768px (именно такое разрешение имеют большинство  популярных планшетов), но в моем случае смотрится довольно неплохо, поэтому постараемся вручную найти значение, при котором наш шаблон будет «ломаться». И это место находится на 593px. Теперь нужно написать CSS код для меню, которое мы собираемся адаптировать.

Но для начала нужно определиться, где оно будет располагаться, всплывать слева, справа или сверху. Будет логично, если оно будет появляться справа. Так и запишем. В HTML пропишем иконку гамбургера, overlay (затемнение фона) и крестик закрытия меню.

1
2
3
4
5
6
7
8
9
10
<ul class="mobile">
 <span>+</span>
  <li>О нас</li>
  <li>Услуги</li>
  <li>Цены</li>
  <li>Отзывы</li>
  <li>Контакты</li>
 </ul>	
 <span class="hamb"></span>
<span class="overlay"></span>
1
2
3
4
}
.mobile span, .hamb{
 display: none;
}

Код адаптивного меню

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@media(max-width: 593px){
	.mobile{
		width: 250px;
		height: 100vh;
		background: #333;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: -250px;
		padding: 15px;
		font-size: 25px;
		z-index: 2;
		color: #fff;
 
	}
 
	.mobile li{
		margin-bottom: 20px;
	}
	.mobile li:last-child{
		margin-bottom: 0px;
	}
	.mobile span{
		display: block;
		position: absolute;
		top: -5px;
		right: 10px;
		font-size: 40px;
		transform: rotate(45deg);
		color: #fff;
	}
	.hamb{
	display: block;
	font-size: 35px;
}

Проверяем на адаптив. Вроде не плохо. Теперь осталось добавить совсем немного jQuery, чтобы окончательно оживить наше меню. Код будет примерно таким же, как в прошлом уроке.  Итоговый результат смотрите на демо страничке.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
  $('.hamb').click(function(){
    $('.mobile').animate({
	right: 0
    });
$(this).hide();
 $('.overlay').fadeIn();
});
$('.mobile span, .overlay').click(function(){
  $('.mobile').animate({
	right: -250
  });
$('.hamb').show();
$('.overlay').fadeOut();
});
});

На этом все. В завершении проверяем страницу через адаптиватор. Пишите в комментариях свои мысли по этому поводу.

Делаем мобильное меню для сайта на CSS и jQuery

Мобильное меню для сайта

Привет, друзья. Сейчас будем разбираться с тем, как сделать мобильное меню на сайте. Использовать будем такие технологии, как HTML, CSS и jQuery. Прошу обратить внимание, что меню для мобильный устройств мы будем делать с нуля. Так что если вы хотите получить информацию про адаптацию, то она появится здесь немного позже.

Демо

Будем делать выезжающее (боковое) мобильное меню и появляться оно будет справа по клику на иконку гамбургер и вместе с тем весь контент будет смещаться влево на ширину нашего меню. Итак, давайте набросаем шаблон.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span class="span"></span>
  <div class="menu">
    <span class="close">+</span>
      <ul>
	<li>Пункт меню1</li>
	<li>Пункт меню2</li>
	<li>Пункт меню3</li>
	<li>Пункт меню4</li>
	<li>Пункт меню5</li>
       </ul>
  </div>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>	
</div>

Заготовка для нашего выдвижного мобильного меню готова. Давайте сделаем иконку (она же кнопка) гамбургер. У нее класс span.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.span {
    position: absolute;
    display: inline-block;
    width: 2.25em;
    height: 0.8em;
    border-top: 0.2em solid #fff;
    border-bottom: 0.2em solid #fff;
    top: 0px;
    right: 10px;
    cursor: pointer;
    transition: .5s
}
 
.span:before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #fff;
}

Выглядит оно вот так:
Меню гамбургер для сайта
На очереди оформление мобильного меню. Сделаем его максимально простым, но в то же время рабочим. В нем же разместим крестик, нажав на который будем его прятать.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menu{
  width: 200px;
  height: auto;
  background: #756755;
  position: fixed;
  top: 0;
  right: -200px;
}
span.close{
  font-size: 30px;
  color: #ccc;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}

По умолчанию его не видно, оно смещено вправо за пределы видимости на 200px. Теперь самое интересное — скрипт мобильного меню, который позволяет волшебству случиться.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function(){			
 $('.span').click(function(){
  $(this).css('opacity', '0');
  $('.menu').animate({
   right: 0
});
  $('body').animate({
   right: 200
 });
});
$('span.close').click(function(){
 $('.span').css('opacity', '1');
 $('.menu').animate({
  right: '-200px'
});
 $('body').animate({
   right: 0
 });
});
});

Теперь по порядку. По нажатию на иконку происходит следующее:

Иконка становится полностью прозрачной -> меню выезжает справа -> тело сайта смещается влево. По нажатию на крестик — все то же самое, только наоборот. Надеюсь у вас получилось. Если не работает, пишите в комментариях, попробуем разобраться вместе.

Таким образом можно самостоятельно реализовать подобное меню на сайте WordPress, Joomla, Битрикс и любых других систем управления. В принципе, ничего сложного, если у вас есть минимальные навыки JS. Во всяком случае попробуйте, для практики будет полезно.

Полет товара в корзину на jQuery

Полет товара в корзину на jQuery

Привет всем! Сегодня у нас на разборе очень классный эффект на jQuery, который очень эффектно смотрится на интернет-магазинах. Не знаю как правильно он называется, но назовем его — анимированный полет товара в корзину. Много раз видел такую штуку на различных сайтах и думал, что для реализации такой фичи нужна специальная библиотека и что все очень сложно. Но на самом деле не очень. Средний уровень JS. У меня получилось совершенно случайно. На досуге изучал jQuery анимацию и вышло нечто похожее, осталось только немного допилить. И вот, что в итоге получилось:

Демо

Так выглядит разметка на странице примера:

1
2
3
4
5
6
<div class="image_block">
 <img src="sell.png" alt="Покупка" class="block" width="100"/>
</div>
<input type="button" value="Добавить в корзину"/>
<img src="trash.png" alt="trash" class="img"/>
<div class="block-2">Товар добавлен! <span>+</span></div>

.image_block — Обертка для блока с товаром
.block — Сам товар
button — Кнопка добавления товара в корзину
.img — Корзина магазина
.block-2 — Всплывающий блок, появляющийся после добавления товара в корзину

CSS код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.block{
    position: absolute;
    top: 50%;
    left: 0;
}
.img{
    position: absolute;
    right: 0;
    top: 0;
}
.block-2 {
    width: 400px;
    height: 100px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 5px;
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 12px 12px -9px #333;
    text-align: center;
    font-family: sans-serif;
    opacity: 0;
}
.block-2 span{
	position: absolute;
	right: 5px;
	top: 0px;
	cursor: pointer;
	transform: rotate(45deg);
	font-size: 20px;
}	
 
input[type="button"] {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #2196F3;
    color: #fff;
    box-shadow: 0 4px 5px -2px #363636;
    cursor: pointer;
    outline: none;
}

И самое интересное в jQuery коде, который магическим образом делает красивый полет товара в корзину:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
  $('input:button').click(function(){
    $('.block').clone()  
       .css({'position' : 'absolute', 'z-index' : '100'})  
           .appendTo(".image_block").animate({
		top: $(".img").offset()['top'],
		left: $(".img").offset()['left'],
		opacity: 0,
		width: 40
	},1500, function(){
	  $(this).remove();
	  $('.block-2').show().animate({
	     top: 200,
	     opacity: 1
	});
setTimeout(function(){
  $('.block-2').fadeOut(500)
}, 2000);
});
$('.block-2 span').click(function(){
 $('.block-2').fadeOut(300);
});			
});			
});

2 строка — Запускаем функцию по клику на кнопке
3 строка — клонируем товар
4 — задаем начальные css свойства для нашего клона
5 — вставляем клон в блок .image_block
6, 7 — перемещение товара в корзину, предварительно получив ее координаты
8 — убавляем прозрачность до нуля в конце полета
9 — убавляем ширину
10 — время анимации 1.5 секунды

Дальше идет call back функция, которая запускает появление всплывающего окна, его закрытие через 2 секунды, а так же закрытие по клику на крестик в правом верхнем углу. Эти функции необязательные, их можно не применять. Вот таким образом делается полет товара в корзину. Надеюсь вам было понятно. Если остались вопросы, готов ответить на них в комментариях.
Скачайте пример для более подробного исследования.

СКАЧАТЬ

jQuery событие при прокрутке до определенного элемента (футера)

событие прокрутки страницы jquery

Привет, друзья. В этой статье мы с вами разберем jQuery событие при прокрутке страницы до определенного элемента. Если говорить другими словами, то jQuery скролл до элемента. В этом примере мы вызовем событие, когда страница будет прокручена до футера. Тогда будем выводить небольшое всплывающее окно с плавным появлением. А так же будем закрывать его по клику. Что в него поместить, решайте сами, вариантов масса. Вот как это выглядит:

Демо

Начнем, пожалуй с HTML разметки и здесь нет ничего необычного. Все довольно просто и понятно. Большое полотно текста, внизу футер и блок с кнопкой, который будет появляться. Вот код блока:

1
2
3
4
5
6
7
8
9
10
<html>
 <body>
 Здесь много контента...
  <div id="block">
    Какой-то текст.
    <input type="button" class="but" value="Закрыть"/>
  </div>
  <div id="footer">Footer</div>
 </body>
</html>

Теперь займемся оформлением нашего скрытого блока и его кнопки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#block{
	display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	color: #fff;
	background: #4CAF50;
	padding: 10px;
	border-radius: 5px;
	width: 200px;
	box-shadow: 0 13px 20px -5px #3a3a3a;
	font-family: Arial;
	text-align: center;
}
.btn{
    background: #FF9800;
    border: 2px solid #795548;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 10px;
    margin-top: 10px;
    font-weight: bold;
}

Теперь займемся непосредственно, что называется jQuery scroll to element. Все-таки английский язык для разработчика необходим. Стандартно подключаем jQuery. Я сделаю это через CDN, так как это будет самая актуальная версия.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

А затем сам код скрипта, который и будет творить магию на странице:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){   
    var $element = $('.footer');
    let counter = 0;
$(window).scroll(function() {
  var scroll = $(window).scrollTop() + $(window).height();
  //Если скролл до конца елемента
  //var offset = $element.offset().top + $element.height();
  //Если скролл до начала елемента
  var offset = $element.offset().top
 
  if (scroll > offset && counter == 0) {
    $('#block').fadeIn(500);
    counter = 1;
  }
});
$('.btn').click(function(){
	$('#block').slideUp();
});
 
   });

По умолчанию событие срабатывает, как только начало элемента, в данном случае футера, появляется в зоне видимости, но можно поменять значение, раскомментировав 7 строку и тогда функция сработает, когда прокрутка дойдет до конца элемента.

Вот таким хитрым способом можно показывать посетителям сайта ваше уникальное предложение и добавив в метрике цели, отслеживать его конверсию.