Добавить страницу в закладки браузера на 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. Во всяком случае попробуйте, для практики будет полезно.

Калькулятор процентов онлайн

Калькулятор процентов онлайн

Приветствую вас, друзья! Рад представить собственноручно созданный онлайн калькулятор процентов. С его помощью вы можете произвести расчет процентов. Он достаточно прост в использовании, но в то же время его функционала хватает для решения большинства задач, где нужно посчитать проценты. А вот и сам сервис.

Калькулятор процентов

Высчитать процент от суммы калькулятор онлайн

Рассчитать процент от суммы можно быстро и без заморочек. Вычесть или прибавить процент. Всего 4 варианта.

  • Найти процент от числа
  • Сколько процентов составляет число X от числа Y
  • Прибавить процент к числу
  • Вычесть процент от числа

Тот самый случай, когда лучше один раз увидеть,чем сто раз читать описание. Эта статья написана в основном для того, чтобы она хоть как-то появилась в поиске. И очень надеюсь. что делал я это не зря. Если вы зашли сюда из поисковой системы, оставьте пожалуйста комментарий и расскажите пользуетесь ли калькулятором процентов онлайн.

Полет товара в корзину на 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 секунды, а так же закрытие по клику на крестик в правом верхнем углу. Эти функции необязательные, их можно не применять. Вот таким образом делается полет товара в корзину. Надеюсь вам было понятно. Если остались вопросы, готов ответить на них в комментариях.
Скачайте пример для более подробного исследования.

СКАЧАТЬ