Закрытие элемента при клику за его пределами

Чаще всего при создании модальных окон внутри них делают кнопку для их закрытия, например обычный крестик. Такой вариант отличный и его отбрасывать не стоит, можно даже в паре с ним использовать и метод с данной статьи.

О том как сделать подобные окна, подробно мы останавливаться не будем.

Теперь подробнее о скрипте. Он работает на основе jQuery,поэтому, мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

После библиотеки нужно подключить наш скрипт. Метод подключения, тоже можете взять со статьи упомянутой выше. Выглядит скрипт так:
$(document).mouseup(function (e){
var modalctr = $("#modal_cinw_ctnr");
var modal = $(".modal_cinw");
if (!modal.is(e.target) && modal.has(e.target).length === 0){
modalctr.hide();
}
});

Скрипт имеет важные параметры, настройка которых нужна для корректной работы скрипта.

$(document).mouseup(function (e){ - эта строка определяет, что скрипт будет работать когда отпущена любая из стандартных клавиш мыши.
var modalctr = $("#modal_cinw_ctnr"); - создаем переменную. В данном случаи это родительский контейнер окна. В примере это затемненная область поверх сайта. Иногда такой области нет, все зависит от типа вашего окна или другого элемента который вы хотите скрыть по клику вне его области. #modal_cinw_ctnr - это айди нашего родительского контейнера. Меняйте на свой нужный.
var modal = $(".modal_cinw"); - создаем вторую переменную. Как раз эта переменная и является нашим окном, нажимая вне его области и будет скрываться именно оно. .modal_cinw - класс нашего окна. Вы можете менять на айди или класс, вашего элемента, что нужно скрыть.
if (!modal.is(e.target) && modal.has(e.target).length === 0){ - в этой строке мы определяем был ли совершен клик по нашему главному элементу, то бишь по окну или нет, а также по его дочерних элементах, что размещены внутри. Если это не они, то переходим далее.
modalctr.hide(); - скрываем наш родительский контейнер, первую переменную - modalctr. То бишь нажимая вне окна, мы скрываем область, что затемняет сайт, внутри которой и лежит окно. Если у вас нет родителя, а нужно скрыть просто элемент из переменной modal. То есть строка будет иметь такой вид - modal.hide();
Далее, просто закрываем скобки.
Если вы настроите все правильно то результат не заставит себя ждать.

Добавлено: 27 Июня 2021 07:52:39 Добавил: Андрей Ковальчук

Как показать скрыть часть пунктов из списка

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

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

Первым шагом в создании такого свернутого списка, будет добавление HTML кода со списком на страницу, если у вас ее нет, если у вас уже есть свой список, то адаптируйте его согласно этому.

<ul class="list">
<li>Пункт номер раз</li>
<li>Пункт номер два</li>
<li>Пункт номер три</li>
<li>Пункт номер четыре</li>
<li>Пункт номер пять</li>
<li>Пункт номер шесть</li>
<li>Пункт номер семь</li>
<li>Пункт номер восемь</li>
<li>Пункт номер девять</li>
<li>Пункт номер десять</li>
</ul>
<div class="show_hide_list">Смотреть все</div>

Тут все просто. Задаем список и присваиваем ему класс list. Можете указать свой, только в скрипте тоже надо будет указать свой новый класс. Так же, обязательно. нужно добавить кнопку, в нашем случаи это просто блок, с классом show_hide_list.

Второй шаг, добавляем стили для нашего списка и кнопки:
ul.list li:nth-child(n+6){display:none;}
.show_hide_list{cursor:pointer;display:inline-block;text-align:center;padding:10px;background:#fc0;}

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

Теперь мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Следующий шаг, подключение уже самого скрипта, который будет осуществлять показ, скрытие пунктов из списка. Его нужно подключить после библиотеки, которую мы подключали выше. Можете воспользоваться той же инструкцией с подсказками как это сделать правильно.
jQuery(document).ready(function($){
if($('ul.list').find('li').length > 5){
$('.show_hide_list').click(function(){
$('ul.list li:nth-child(n+6)').slideToggle('');
$(this).toggleClass('opnd_g');
if($(this).hasClass('opnd_g')){
$(this).html('Скрыть');}
else {$(this).html('Смотреть все');}
});
}else{$('.show_hide_list').hide();}
});

Давайте разберем скрипт построчно, что бы понять как он работает. Начнем со второй строки, потому как в первой просто объявляем, что скрипт будет выполняться только тогда, когда загружен весь HTML и построен DOM, а в последней, просто закрываем функцию.

if($('ul.list').find('li').length > 5){ - Задаем условие. Если у нашего списка, что имеет класс - .list имеются пункты li и их количество больше пяти.
$('.show_hide_list').click(function(){ - Запускаем функцию, которая сработает, если мы нажмем на элемент страницы с классом show_hide_list, то бишь на нашу кнопку, что расположена после списка.
$('ul.list li:nth-child(n+6)').slideToggle(''); - После нажатия показываем пункты с шестого и до последнего. Если вы поменяли количество в стилях, то меняйте и здесь соответственно.
$(this).toggleClass('opnd_g'); - Добавляем нашей кнопке после нажатия класс opnd_g.
if($(this).hasClass('opnd_g')){ - Создаем условие, что если наша кнопка имеет класс opnd_g, то...
$(this).html('Скрыть');} - То меняем текст в кнопке - Смотреть все на Скрыть.
else {$(this).html('Смотреть все');} - Или, если после нажатия на кнопку класса opnd_g нет, то меняем текст на кнопке снова на Смотреть все.
}); - Просто заканчиваем наше условие по нажатию на кнопку.
}else{$('.show_hide_list').hide();} - а это противоположное действие изначальному условию со второй строки, которое задавало действие если пунктов больше 5. То бишь, если пунктов меньше пяти, кнопка Смотреть все - будет скрыта полностью, чтобы не вводить в заблуждение посетителей сайта.

UPD: 11.12.2019

Если у вас несколько списков на одной странице и нужно, чтобы открывался только тот на кнопку под которым нажали, замените 4 строку в скрипте.

Кнопка должна быть сразу под списком! Иначе способ не сработает.

// ЗАМЕНИТЬ ЭТО
$('ul.list li:nth-child(n+6)').slideToggle('');
// НА ЭТО
$(this).prev().children('li:nth-child(n+6)').slideToggle('');

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

Добавлено: 06 Июня 2021 04:35:41 Добавил: Андрей Ковальчук

Как изменить или отключить чекбокс — Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев

В связи с тем, что сейчас все больше и больше стран принимает законы об обработке персональных данных, то как и в других системах управления сайта, так и WordPress появляются изменения, чтобы не нарушать дынные законы. Чекбокс о запросе сохранения имя и email, как раз таки, одно из таких изменений. Он работает по следующему принципу - когда посетитель сайта активирует чекбокс и дает свое согласие на хранение своих данных в браузере, в следующий раз, когда он будет находится на страницах того сайта где он его активировал, его персональные данные - имя и email автоматически заполнятся в полях.

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

Для начала рассмотрим вариант с полным отключением чекбокса. Для этого вам нужно добавить в файл функций вашей темы - functions.php, небольшую функцию. Если вы не ориентируетесь в функциях этого файла, то добавляете в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.

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


/* ОТКЛЮЧАЕМ ЧЕКБОКС */
function comment_hide_checkcdpr( $fields ) {
    unset( $fields['cookies'] );
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_hide_checkcdpr' );

Тут все просто, особо разбирать нечего, каких-то настроек нет. Далее разберем вариант, когда чекбокс надо оставить, но подпись к нему изменить. Как и с первым кодом, добавляйте данную функцию туда же.
/* МЕНЯЕТ ТЕКСТ ЧЕКБОКСА */
function comment_change_checkcdpr( $fields ) {
    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" />' .
    '<label for="wp-comment-cookies-consent">Сохранить имя и email.</label></p>';
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_change_checkcdpr' );

В 2 и 3 строке сам чекбокс и label к нему. Как раз содержимое label, вам и нужно менять. В данном примере стандартная надпись заменена на Сохранить имя и email. Кстати, данный код можно добавить на сайт, если у вас нет чекбокса и вы хотите его иметь.

Еще как бонус, хочу предложить вариант данного кода с дополнительной функцией, проверки сохранял ли данный пользователь ранее данные. Если сохранял - чекбокс будет отмечен. По сути это тот же код, только с маленькими правками.
/* МЕНЯЕТ ТЕКСТ ЧЕКБОКСА И ДЕЛАЕМ ЧЕКБОКС АКТИВНЫМ, ЕСЛИ РАНЕЕ СОХРАНЯЛИСЬ ДАННЫЕ */
function comment_change_checkcdpr( $fields ){
    $user_ca = wp_get_current_commenter();
    $checked = empty( $user_ca['comment_author_email'] ) ? '' : ' checked="checked"';
    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $checked . ' />' .
    '<label for="wp-comment-cookies-consent">Сохранить имя и email.</label></p>';
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_change_checkcdpr' );

Давайте рассмотрим, какие изменения добавлены в этой версии функции.

Во второй строке создаем переменную $user_ca и задаем ей значение - wp_get_current_commenter() .wp_get_current_commenter() - это функция, которая получает имя, почту, URL сайта текущего комментатора из куков.
В третей строке создаем еще одну переменную - $checked и ее значение, это проверка сохраненные ли у данного комментатора в браузере имя и почта к вашему сайту. Если это так, то чекбоксу прописывается параметр checked="checked". То бишь, комментатору который уже давал согласие, не нужно вновь отмечать чекбокс.
Последнее, это выводим нашу переменную $checked в 4 строке в параметрах самого чекбокса.
Вот и весь материал. Он простенький и справляется с задачей. Теперь вы сможете загружать менять или отключать данный чекбокс с проверкой на сохранение персональных данных. Надеюсь, данный материал помог вам.

Добавлено: 28 Мая 2021 07:20:10 Добавил: Андрей Ковальчук

Эффект lightbox для галерей, скрипт увеличения изображений для галерей лендингов

На системах управления сайтом, так званых CMS, той же WordPress можно установить плагин, но на самописных страницах так не сделать. Поэтому данная библиотека вам может помочь. Вся библиотека это 2 файла, сам скрипт и стили CSS. Все это - baguetteBox, Страница baguetteBox на GitHub

Чтобы применить такой эффект лайтбокса для своих нужно сделать несколько шагов. Для начала убедиться, подключена ли к вашей странице библиотека jQuery. Если нет, то это нужно сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Далее, сразу после библиотеки подключаем скрипт нашего lightbox для галерей. Он есть в архиве, который вы скачали, это файл - baguette.js. Его подключить можете тоже по инструкции из статьи упомянутой выше.

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

//В ЯВА СРЕДУ
baguetteBox.run('.gallery');
 
//В HTML СРЕДУ
<script>
jQuery(function($){
baguetteBox.run('.gallery');
});
</script>

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

<ul class="gallery">
<li><a href="images/11.jpg"><img alt="Галерея" src="images/1.jpg"></a></li>
<li><a href="images/22.jpg"><img alt="Галерея" src="images/2.jpg"></a></li>
<li><a href="images/33.jpg"><img alt="Галерея" src="images/3.jpg"></a></li>
</ul>

Внутри списка размещаете ссылки внутри которых изображения. Задумка такая: изображение в теге img - это миниатюра, маленькая картинка, а уже в самой ссылке указан путь к большому изображению. То бишь в нашем примере изображение 1.jpg - это миниатюра, а 11.jpg это полное.

Ну и чтобы все это работало, остался последний шаг - подключение стилей нашей библиотеки лайтбокса. В скачанном вами архиве - это файл baguette.css. Подключите его к своему сайту или скопируйте стили и перенесите в свой файл стилей. Пример подключения:

<link href="baguette.css" type="text/css" rel="stylesheet">

Не забудьте указать свой путь к файлу, если он лежит не в корне, а в какой-то папке


Вот и все. Если сделали правильно, то все должно работать. Данный скрипт имеет некоторые настройки, если вы хотите задать их, чтобы настроить эффект увеличения для просмотра галереи.

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

baguetteBox.run('.gallery', {
    //СЮДА ОПЦИИ
});

У скрипта есть следующие опции, укажу основные, ознакомится всеми можно на странице самого скрипта на GitHub (Ссылка указана в начале статьи).

buttons: false, - По умолчанию true. Этот параметр отключает показ кнопок для перелистывания изображений, например, если вы хотите, чтобы показывались только по одному.
fullScreen: true, - По умолчанию false. Этот параметр включает показ галереи в полно экранном режиме. Поверх браузера.
noScrollbars: true, - По умолчанию false. Этот параметр отключает показ скролбара, полосы прокрутки на сайте, во время просмотра изображений.
animation: 'fadeIn', - По умолчанию slideIn. Этот параметр задает вид анимации перелистывании изображений.
async: true, - По умолчанию false. Этот параметр включает асинхронную подгрузку файлов.
Если их применять, то инициализация будет такой. Разделите параметры запятой, не забудьте!

baguetteBox.run('.gallery', {
animation: 'fadeIn',
noScrollbars: true,
buttons: false,
});

Сложного с этим скриптом не вижу ничего. Если руки растут правильно, то справитесь без проблем, к тому же на GitHub есть информация, которую тоже можно и нужно использовать.

Добавлено: 16 Мая 2021 10:20:41 Добавил: Андрей Ковальчук

Скопировать содержимое блока в буфер обмена при нажатии

По сути вам надо сделать следующие шаги. Для начала нужно добавить нужному элементу класс - text_copy_link. Можно любой, но тогда нужно будет указать тот клас в скрипте, о котором немного позже.

Так же надо добавить на страницу блок с сообщением об успешном копировании. Это блок с классом - copy_link_mess. Текст внутри можете менять на любой. Пример того что надо добавить выглядит так:

<div class="text_copy_link">Текст или [shortcode] который скопируется</div>
<div class="copy_link_mess">Скопировано в буфер обмена</div>

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

Пример стилей выглядит так:
.copy_link_mess{
line-height:40px;
border-radius:5px;
background:#1DA1F2;
color:#fff;
position:fixed;
padding:0 15px;
z-index:99;
bottom:30px;
left:50%;
margin-left:-120px;
display:none;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 15px;
}

Теперь очередь пришла к самому важному - jQuery скрипт, что будет выполнять всю работу. Но, перед его добавлением, нужно убедится, что к вашему сайту подключена библиотека jQuery. Если нет, то это нужно сделать.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Дважды подключать тоже не нужно. Можете сначала сделать следующий шаг и если не будет работать, то тогда вернуться к библиотеке


И вот теперь, уже после библиотеки, можно подключить скрипт. Скопируйте его и добавьте в нужное место. Шапка или подвал сайта. Так же можно прямо на страницу после блока с сообщением об успешном копировании, если скрипт нужен только на одной странице.

Выглядит скрипт так:
<script>
jQuery(document).ready(function($){
$('.text_copy_link').click(function() {
var $text_copy = $(this);
var $temp = $("<input>");
$("body").append($temp);
$temp.val($text_copy.text()).select();
document.execCommand("copy");
$temp.remove();
$('.copy_link_mess').fadeIn(400);
setTimeout(function(){$('.copy_link_mess').fadeOut(400);},5000);
});
});
</script>

Скрипт простенький и работает следующим образом:

1. В второй строке указываем класс элемента по клику на который будет выполнятся скрипт - text_copy_link. Как я и говорил класс может быть любой, главное, чтобы у элемента и в скрипте он совпадал.
2. Во третей строке задаем переменную - $text_copy. Это наш блок по которому мы кликнули.
3. В четвертой строке создаем переменную - $temp. Это просто поле, в котором будем хранить содержимое, то что скопировали.
4. В пятой строке после тега body выводим наше поле.
5. Далее в шестой строке, нашему полю ввода присваиваем содержимое и выделяем текст нашего элемента, по которому кликнули.
6. В седьмой строке копируем в буфер то что выделеноdocument.execCommand("copy");
7. Восьмая строка - удаление нашего поля ввода, что мы создали временно и добавили после body
В принципе, это основная часть скрипта, именно она выполняет копирование. Следующие две строки - это вывод нашего блока с сообщением об успешном копировании. Если вам не нужно это то следующие две строки не нужны, так же не нужен и сам блок сс сообщением. если же нужен, то:
1. $('.copy_link_mess').fadeIn(400); - Показываем блок с классом - copy_link_mess.
2. setTimeout(function(){$('.copy_link_mess').fadeOut(400);},5000); - прячем наш блок через 5 секунд. 5000 - это и есть 5 сек, просто указано в миллисекундах. Можете поменять на свое.
Далее закрываем скобки и все готово. Теперь можно проверить работу проделанной работы. Если вы все сделали правильно и не допустили ошибок то все должно работать.

Добавлено: 24 Апреля 2021 07:25:19 Добавил: Андрей Ковальчук

Как подгружать iframe с задержкой

Недавно, вновь столкнулся с задачей, когда обратился заказчик и попросил подсказать как загрузить iframe через 5 секунд после загрузки сайта. На примере ниже, вы можете посмотреть как загружается ролик с сервиса Youtube, который тоже подключен через iframe.

Работает все это, следующим образом. Сначала вам нужно добавить сам скрипт. Это обычный JavaScript, который нужно добавить к себе на сайт. Добавлять его можно куда угодно, если вы разбираетесь в верстке и понимаете, что подразумевает под собой фраза - куда угодно.

<script>
window.onload = function(){
    setTimeout(function(){
    document.getElementById('my_ifrm').src = 'https://www.youtube.com/embed/LXb3EKWsInQ';
    },5000);
};
</script>

Так же, вы должны, само собой, добавить сам iframe на сайт ,если он добавлен, то ему надо добавить ID. В данном примере - это my_ifrm.

Допустим, вам надо тоже загрузить с задержкой ролик с ютуба. Вы получаете стандартный код от Youtube и выглядит он примерно так:
<iframe width="560" height="315" src="https://www.youtube.com/embed/LXb3EKWsInQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Вам нужно сначала добавить нужный айди для iframe, а так же указать его в скрипте и изъять ссылку с iframe и добавить ее опять же в скрипт. Готовый iframe получится примерно таким:
<iframe width="560" height="315" id="my_ifrm" src=""  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Как видите у нас изменилось это - id="my_ifrm" src="". По желанию можете удалить размеры iframe, если задаете их через CSS, а так же другие, лишние параметры Youtube или самого iframe, если знаете для чего они.

Вернемся к самому скрипту. В третей его строке как раз и указан айди нашего iframe и ссылка, которую мы изъяли ранее.
document.getElementById('my_ifrm').src = 'https://www.youtube.com/embed/LXb3EKWsInQ';

В предпоследней строке есть значение 5000 - это 5 секунд в миллисекундах. Это именно то время, после которого будет загружен наш iframe.

Есть еще этот скрипт только уже в версии jQuery. По сути все тож, только для его работы нужно подключить библиотеку jQuery. Она может быть уже подключена, если нет, то это нужно сделать. Можете воспользоваться статей статьей, упомянутой выше о том как подключить скрипт.

Подключение выглядит так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Сам скрипт имеет следующий вид:
<script>
jQuery(document).ready(function($){
var src   = "https://www.youtube.com/embed/LXb3EKWsInQ"; 
$(function(){
  setTimeout(function(){
    $('#my_ifrm').attr('src',src)
  }, 5000);
});
});
</script>

В скрипте указываете ссылку, как и в предыдущем. Айди элемента, так же можно класс или селектор. Ну и само собой время, задержки перед загрузкой.

Вот и весь скрипт. Он простенький и справляется с задачей. Теперь вы сможете загружать iframe с задержкой.

Добавлено: 15 Апреля 2021 07:21:44 Добавил: Андрей Ковальчук

Как добавить в свою форму отправки писем reCAPTCHA v3

Что же такое reCAPTCHA v3? Это скрытая капча от Google. Ее суть в том, что не надо больше ставить галочки, для того чтобы отправить письмо. Она просто проверяет как вы ведете себя на странице, похожи ли ваши действия на человека, а не робота и как вы просматриваете страницы, через обычный браузер или с использованием каких-то плагинов, скрытых сетей и тд.

Я перебрал много вариантов и описаний решений, для реализации того, что мне нужно. Сам же Google подробных инструкций не дает. Там общая инструкция по которой ничего не понятною.

Первое что вам нужно сделать, это авторизоваться на сервисе reCAPTCHA и получить ключи для нужного вам сайта. Инструкцию по этому делать смысла нет, их сотни, да там и так все интуитивно понятно. Если вы имеете свою PHP форму, написанную своими руками, то думаю, такая простая вещь, как получение ключей, для вас не проблема. Вам понадобятся - ключ сайта и секретный ключ. Еще раз повторюсь, вам надо ключи для reCAPTCHA v3, именно третяя версия, не вторая, та что с галочкой, а именно невидимая reCAPTCHA v3.

Теперь самая тяжелая часть - код. Для начала нужно подключить API JavaScript для reCAPTCHA. Данная строка в коде должна быть ниже библиотеки jQuery. Если нет, то это нужно сделать.

<script async src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY_HERE"></script>

YOUR_SITE_KEY_HERE - нужно заменить на ваш ключ сайта, что вы получили. Не перепутайте с секретным ключом, его показывать на фронтенде нельзя, только ключ сайта!

Следующим шагом нужно добавить скрытое поле к вашей форме отправки письма на PHP. Его надо добавить перед кнопкой отправки формы.
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

После этого надо вызывать grecaptcha.execute, которая будет генерировать токен и передавать данные с формы уже на сторону сервера, где будет сверка с секретным ключом.
<script>
jQuery(document).ready(function() {
grecaptcha.ready(function () {
   grecaptcha.execute('YOUR_SITE_KEY_HERE', { action: 'contact' }).then(function (token) {
      var recaptchaResponse = document.getElementById('recaptchaResponse');
      recaptchaResponse.value = token;
       
      // СЮДА НАДО ДОБАВИТЬ ВАШУ AJAX ОТПРАВКУ ДАННЫХ
       
   });
});
});
</script>

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

YOUR_SITE_KEY_HERE - опять как и выше, нужно заменить на ваш ключ сайта, не секретный, только ключ сайта! После комментария - "сюда надо добавить вашу Ajax отправку данных" или вместо него, вы должны добавить свой код Ajax отправку данных. Ниже я приведу пример, его нельзя использовать в своем коде, это просто пример!
//НЕ ДОБАВЛЯЙТЕ ЭТОТ КОД - ЭТО ПРОСТО ПРИМЕР!
   jQuery.ajax({
        url: "ajax_form.php",
        type:"POST",
        dataType: "html",
        data: jQuery("#ajax_form").serialize(),
        success: function(response) { 
             alert("Mail send!");
        },
        error: function(response) {
            alert("Error");
        }
    });

Больше ничего менять вам в скрипте не нужно. Оставьте все как есть. Далее переходим к следующему шагу.

Последний шаг - это проверка на стороне сервера, то бишь код нужно добавлять в ваш файл PHP, в котором у вас mail() функция отправки письма. Вам нужно открыть его и переделать. Данный код нужно разместить в самом начале файла перед вашим кодом.
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_SECRET_KEY_HERE';
$recaptcha_response = $_POST['recaptcha_response'];
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
if ($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == 'contact') {
 
//ТУТ КОД ВАШЕЙ ОТПРАВКИ ЕСЛИ ВСЕ ОК
 
} 
    else
{
//ТУТ КОД, ЕСЛИ ОТПРАВКА НЕВОЗМОЖНА
}

После того как разместили, вам нужно заменить во второй строке - YOUR_SECRET_KEY_HERE, уже на СЕКРЕТНЫЙ КЛЮЧ.

Так же, вам нужно ваш старый код перенести внутрь данного. Точнее, сразу после комментария - "тут код вашей отправки если все ок". Думаю, логика понятна. Сначала идет проверка не спам, робот ли отправил форму, а уже потом идет ваша отправка письма на почту.

Сам код простой и если вы хоть немного знакомы с PHP, то поймете его логику. Сначала задаем переменную, где подключается API от Google для проверки. После переменная где вы задаете секретный ключ, третья переменная - данные с нашего скрытого поля, которое мы добавляли перед кнопкой отправки. После идет две строки где мы получаем данные, чтобы использовать их в сравнении.

Самим сравнением - if, мы проверяем соответствует ли все параметры для отправки. У нас три параметра - успешность отправленных с формы, оценка отправки и то что мы передали событие action == 'contact'. В третьем шаге, когда мы добавляли скрипт, там вы можете увидеть что в нем есть параметр, где мы задаем такое же название события. Это нужно, если у вас будет несколько форм для которых нужно создавать разные события.

Еще в коде есть последние 4 строки. Это условие, что делать, если проверку по капче форма не прошла. Если у вас проверка идет через скрипт на стороне сайта, а не в РНР, то можете ничего туда не добавлять. Если же вы разбираетесь в коде, то сможете добавить туда вывод сообщения об ошибке.

В самом начале я сказал, что данный материал требует от вас определенных знаний. Я не могу вам 1 в 1 расписать как сделать правильно вам, потому как каждая форма уникальна и требует своих действий по внедрению в нее reCAPTCHA v3. Данный метод я лично применяю на сайтах где требуется подключение капчи, потому уверен в его работоспособности.

Добавлено: 21 Марта 2021 10:05:50 Добавил: Андрей Ковальчук

Как добавить в свою форму отправки писем reCAPTCHA v3

Что же такое reCAPTCHA v3? Это скрытая капча от Google. Ее суть в том, что не надо больше ставить галочки, для того чтобы отправить письмо. Она просто проверяет как вы ведете себя на странице, похожи ли ваши действия на человека, а не робота и как вы просматриваете страницы, через обычный браузер или с использованием каких-то плагинов, скрытых сетей и тд.

Я перебрал много вариантов и описаний решений, для реализации того, что мне нужно. Сам же Google подробных инструкций не дает. Там общая инструкция по которой ничего не понятною.

Первое что вам нужно сделать, это авторизоваться на сервисе reCAPTCHA и получить ключи для нужного вам сайта. Инструкцию по этому делать смысла нет, их сотни, да там и так все интуитивно понятно. Если вы имеете свою PHP форму, написанную своими руками, то думаю, такая простая вещь, как получение ключей, для вас не проблема. Вам понадобятся - ключ сайта и секретный ключ. Еще раз повторюсь, вам надо ключи для reCAPTCHA v3, именно третяя версия, не вторая, та что с галочкой, а именно невидимая reCAPTCHA v3.

Как добавить в свою форму отправки писем reCAPTCHA v3

Теперь самая тяжелая часть - код. Для начала нужно подключить API JavaScript для reCAPTCHA. Данная строка в коде должна быть ниже библиотеки jQuery. Если нет, то это нужно сделать.

<script async src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY_HERE"></script>

YOUR_SITE_KEY_HERE - нужно заменить на ваш ключ сайта, что вы получили. Не перепутайте с секретным ключом, его показывать на фронтенде нельзя, только ключ сайта!

Следующим шагом нужно добавить скрытое поле к вашей форме отправки письма на PHP. Его надо добавить перед кнопкой отправки формы.
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

После этого надо вызывать grecaptcha.execute, которая будет генерировать токен и передавать данные с формы уже на сторону сервера, где будет сверка с секретным ключом.
jQuery(document).ready(function() {
grecaptcha.ready(function () {
   grecaptcha.execute('YOUR_SITE_KEY_HERE', { action: 'contact' }).then(function (token) {
      var recaptchaResponse = document.getElementById('recaptchaResponse');
      recaptchaResponse.value = token;
       
      // СЮДА НАДО ДОБАВИТЬ ВАШУ AJAX ОТПРАВКУ ДАННЫХ
       
   });
});
});

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

YOUR_SITE_KEY_HERE - опять как и выше, нужно заменить на ваш ключ сайта, не секретный, только ключ сайта! После комментария - "сюда надо добавить вашу Ajax отправку данных" или вместо него, вы должны добавить свой код Ajax отправку данных. Ниже я приведу пример, его нельзя использовать в своем коде, это просто пример!
//НЕ ДОБАВЛЯЙТЕ ЭТОТ КОД - ЭТО ПРОСТО ПРИМЕР!
   jQuery.ajax({
        url: "ajax_form.php",
        type:"POST",
        dataType: "html",
        data: jQuery("#ajax_form").serialize(),
        success: function(response) { 
             alert("Mail send!");
        },
        error: function(response) {
            alert("Error");
        }
    });

Больше ничего менять вам в скрипте не нужно. Оставьте все как есть. Далее переходим к следующему шагу.

Последний шаг - это проверка на стороне сервера, то бишь код нужно добавлять в ваш файл PHP, в котором у вас mail() функция отправки письма. Вам нужно открыть его и переделать. Данный код нужно разместить в самом начале файла перед вашим кодом.
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_SECRET_KEY_HERE';
$recaptcha_response = $_POST['recaptcha_response'];
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
if ($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == 'contact') {
 
//ТУТ КОД ВАШЕЙ ОТПРАВКИ ЕСЛИ ВСЕ ОК
 
} 
    else
{
//ТУТ КОД, ЕСЛИ ОТПРАВКА НЕВОЗМОЖНА
}

После того как разместили, вам нужно заменить во второй строке - YOUR_SECRET_KEY_HERE, уже на СЕКРЕТНЫЙ КЛЮЧ.

Так же, вам нужно ваш старый код перенести внутрь данного. Точнее, сразу после комментария - "тут код вашей отправки если все ок". Думаю, логика понятна. Сначала идет проверка не спам, робот ли отправил форму, а уже потом идет ваша отправка письма на почту.

Сам код простой и если вы хоть немного знакомы с PHP, то поймете его логику. Сначала задаем переменную, где подключается API от Google для проверки. После переменная где вы задаете секретный ключ, третья переменная - данные с нашего скрытого поля, которое мы добавляли перед кнопкой отправки. После идет две строки где мы получаем данные, чтобы использовать их в сравнении.

Самим сравнением - if, мы проверяем соответствует ли все параметры для отправки. У нас три параметра - успешность отправленных с формы, оценка отправки и то что мы передали событие action == 'contact'. В третьем шаге, когда мы добавляли скрипт, там вы можете увидеть что в нем есть параметр, где мы задаем такое же название события. Это нужно, если у вас будет несколько форм для которых нужно создавать разные события.

Еще в коде есть последние 4 строки. Это условие, что делать, если проверку по капче форма не прошла. Если у вас проверка идет через скрипт на стороне сайта, а не в РНР, то можете ничего туда не добавлять. Если же вы разбираетесь в коде, то сможете добавить туда вывод сообщения об ошибке.

В самом начале я сказал, что данный материал требует от вас определенных знаний. Я не могу вам 1 в 1 расписать как сделать правильно вам, потому как каждая форма уникальна и требует своих действий по внедрению в нее reCAPTCHA v3. Данный метод я лично применяю на сайтах где требуется подключение капчи, потому уверен в его работоспособности.

Добавлено: 12 Марта 2021 10:47:26 Добавил: Андрей Ковальчук

Скрипт что определяет мобильное устройство

Сегодня, хочу показать вам jQuery скрипт, который будет определять открыт ли сайт на мобильном устройстве или на десктопе. Если вы занимаетесь версткой то знаете что такое адаптивная верстка, отображение контента на десктопе и на мобильном устройстве, что дизайн сайта, а в следствии и его верстка должны рассчитываться так, чтобы сайт отображался корректно и на компьютерах,ноутбуках и на мобильных устройствах.

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

Именно для этого существует скрипт, который и помогает решить подобные задачи. Носит название он - Current Device. Суть данного скрипта в том, что он добавляет на страницу классы, в зависимости от того, на каком устройстве просматривается сайт. Можете перейти на страницу с примером и посмотреть как это работает.

В примере можете протестировать страницу файрбагом. Выбрать разные устройства. Чтобы добавлялся соответственный класс, нужно перезагружать страницу. Как видно на странице примера список классов, что могут быть добавлены. Соответствующий класс присваивается тегу <html>.

На странице примера указаны следующие параметры и классы к ним, давайте их разберем.

Тип устройства - классы данной категории присваиваются в зависимости от устройства на котором открыт сайт:
.mobile - класс что присваивается, если страница открыта на мобильном устройстве.
.tablet - класс что присваивается, если страница открыта на планшете.
.desktop - класс что присваивается, если страница открыта на персональном компьютере.
Положение устройства - классы этой категории присваиваются в зависимости от положения, ориентации устройства. То есть, экран устройства в горизонтальном или вертикальном положении.
.portrait - класс что присваивается, если устройство имеет вертикальную ориентацию.
.landscape - класс что присваивается, если устройство имеет горизонтальную ориентацию.

Операционная система - классы данной категории присваиваются в зависимости от того какая операционная система установлена на устройстве. Данные классы пригодятся если важно отображать разные элементы для устройств с разной ОС.
.ios, .iphone, .ipad, .ipod, .android, .blackberry, .macos, .windows, .fxos, .meego, .television - классы с названием операционных систем, что и будут присвоены.
В моей практике, данный скрипт выручал меня несколько раз ,в основном благодаря классам .mobile и .desktop. Скорее всего и вам именно они и понадобятся. Как и говорил в начале статьи, данные классы не для CSS, хотя и там можно их использовать. Эти классы скорее для скриптов, когда нужно заставить работать скрипт, только при наличии класса на странице. Примерная функция выглядит так:

$('.mobile .block').click(function(){
//СЮДА КОД ФУНКЦИИ ДЛЯ МОБИЛЬНОГО УСТРОЙСТВА
});

В данном случаи функция сработает если вы нажали на элемент с классом .block на мобильном устройстве. Для ПК такая функция будет аналогична, но с классом .desktop.
$('.desktop .block').click(function(){
//СЮДА КОД ФУНКЦИИ ДЛЯ КОМПЬЮТЕРА
});

Таким образом можете применять работу разных скриптов в зависимости от устройства. Сам скрипт можете скопировать с файла current-device.js и добавить в свои файлы или подключить отдельно. Как это лучше сделать, можете прочитать в статье Как и где подключить скрипт?.

На этом все, спасибо за внимание.

Добавлено: 28 Сентября 2020 19:38:57 Добавил: Андрей Ковальчук

Закрытие элемента при клику за его пределами

Чаще всего при создании модальных окон внутри них делают кнопку для их закрытия, например обычный крестик. Такой вариант отличный и его отбрасывать не стоит, можно даже в паре с ним использовать и метод с данной статьи.

О том как сделать подобные окна, подробно мы останавливаться не будем. На моем сайте есть много статей на подобные темы.

Теперь подробнее о скрипте. Он работает на основе jQuery,поэтому, мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

После библиотеки нужно подключить наш скрипт.
Выглядит скрипт так:
$(document).mouseup(function (e){
var modalctr = $("#modal_cinw_ctnr");
var modal = $(".modal_cinw");
if (!modal.is(e.target) && modal.has(e.target).length === 0){
modalctr.hide();
}
});

Скрипт имеет важные параметры, настройка которых нужна для корректной работы скрипта.

$(document).mouseup(function (e){ - эта строка определяет, что скрипт будет работать когда отпущена любая из стандартных клавиш мыши.

var modalctr = $("#modal_cinw_ctnr"); - создаем переменную. В данном случаи это родительский контейнер окна. В примере это затемненная область поверх сайта. Иногда такой области нет, все зависит от типа вашего окна или другого элемента который вы хотите скрыть по клику вне его области.
#modal_cinw_ctnr - это айди нашего родительского контейнера. Меняйте на свой нужный.

var modal = $(".modal_cinw"); - создаем вторую переменную. Как раз эта переменная и является нашим окном, нажимая вне его области и будет скрываться именно оно. .modal_cinw - класс нашего окна. Вы можете менять на айди или класс, вашего элемента, что нужно скрыть.

if (!modal.is(e.target) && modal.has(e.target).length === 0){ - в этой строке мы определяем был ли совершен клик по нашему главному элементу, то бишь по окну или нет, а также по его дочерних элементах, что размещены внутри. Если это не они, то переходим далее.

modalctr.hide();
- скрываем наш родительский контейнер, первую переменную - modalctr. То бишь нажимая вне окна, мы скрываем область, что затемняет сайт, внутри которой и лежит окно. Если у вас нет родителя, а нужно скрыть просто элемент из переменной modal. То есть строка будет иметь такой вид - modal.hide();
Далее, просто закрываем скобки.
Если вы настроите все правильно то результат не заставит себя ждать.

На этом все, спасибо за внимание.

Добавлено: 19 Июня 2019 14:04:48 Добавил: Андрей Ковальчук

Ссылка дня

Пример кода, выбирающего страницу этого дня. Завтра будет показана другая страница.

<html>
<head>
<script language="JavaScript">
function GetTodaysURL()
{
  var locationlist = new URLList
  (
        "1.html",         // Monday
        "2.html",         // Tuesday
        "3.html",
        "4.html",
        "5.html",
        "6.html",
        "7.html"          // Sunday
  );

  now = new Date();
  num = now.getDay();
  if (num == 0) num = 7;

  location.href = locationlist.list[num-1];
}

function URLList ()
{
  var argv = URLList.arguments;
  var argc = argv.length;
  this.list = new Object();
  for (var i = 0; i < argc; i++)
  this.list[i] = argv[i];
  this.count = argc;
  return this;
}
</script>
</head>
<body>
Пример кода, выбирающего
<a href="javascript:GetTodaysURL()">
страницу этого дня</a>.
Завтра будет показана другая страница.
</body>
</html>

Добавлено: 15 Июня 2019 07:04:51 Добавил: Андрей Ковальчук

Проложить маршрут на Яндекс.Картах с помощью API

Пример отображения на карте маршрута от Белорусского вокзала до Лефортово:

ymaps.route(['Москва, Белорусский вокзал', 'Москва, Лефортово'], {mapStateAutoApply:true}).then(
  function(route) {
    map.geoObjects.add(route);
    alert('Длина маршрута = ' + route.getHumanLength());
  },
  function(error) {
    alert('Невозможно построить маршрут');
  }
);

Написанное актуально для
Яндекс.Карты API 2

Добавлено: 30 Июля 2018 08:21:48 Добавил: Андрей Ковальчук

Автоматическое масштабирование и центрирование гугло-карты для показа всех маркеров

Дано — гугло-карта с неизвестным количеством маркеров.

Задача — автоматически смасштабировать и отцентрировать карту таким образом, чтобы было видно все маркеры.

Решение — использовать класс LatLngBounds, позволяющий определять область на карте:

// Создаём карту
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
 
// Маркеры
var markers = [
    ['Маркер 1', 45.21465, 65.14896],
    ['Маркер 2', 65.14896, 45.21465],
    // ...
];
 
// Область показа маркеров
var markersBounds = new google.maps.LatLngBounds();
 
for (var i = 0; i < markers.length; i++) {
    var markerPosition = new google.maps.LatLng(markers[i][1], markers[i][2]);
 
    // Добавляем координаты маркера в область
    markersBounds.extend(markerPosition);
 
    // Создаём маркер
    var marker = new google.maps.Marker({
        position: markerPosition,
        map: map,   
        title: markers[i][0],
    }); 
}
 
// Центрируем и масштабируем карту

map.setCenter(markersBounds.getCenter(), map.fitBounds(markersBounds));
Написанное актуально для
Google Maps API 3

Добавлено: 30 Июля 2018 08:15:13 Добавил: Андрей Ковальчук

Хранение массивов в localStorage

Пример хранения в переменной localStorage.foo массива из трёх элементов:

// запись
foo = ['bar1', 'bar2', 'bar3'];
localStorage.foo = JSON.stringify(foo);
 
// чтение
foo = localStorage.foo ? JSON.parse(localStorage.foo) : [];

Добавлено: 29 Июля 2018 22:46:54 Добавил: Андрей Ковальчук

Как подключить javascript файл из своего js скрипта

Пример подключения скрипта http://example.com/script.js:

Native javascript

var script = document.createElement('script');
script.src = 'http://example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(script);
alert('script loaded');

jQuery:

$.getScript('http://example.com/script.js', function(){
  alert('script loaded');
});

Добавлено: 29 Июля 2018 22:22:25 Добавил: Андрей Ковальчук