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

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

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

Теперь подробнее о скрипте. Он работает на основе 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 Добавил: Андрей Ковальчук

Как изменять стрелки в input number, как задать свои стили

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

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

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

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

Сам скрипт имеет следующий вид, его подключать надо ниже библиотеки в коде.
<script>
jQuery(document).ready(function($){
    jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
    jQuery('.quantity').each(function() {
      var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = input.attr('max');
 
      btnUp.click(function() {
        var oldValue = parseFloat(input.val());
        if (oldValue >= max) {
          var newVal = oldValue;
        } else {
          var newVal = oldValue + 1;
        }
        spinner.find("input").val(newVal);
        spinner.find("input").trigger("change");
      });
 
      btnDown.click(function() {
        var oldValue = parseFloat(input.val());
        if (oldValue <= min) {
          var newVal = oldValue;
        } else {
          var newVal = oldValue - 1;
        }
        spinner.find("input").val(newVal);
        spinner.find("input").trigger("change");
      });
 
    });
});
</script>

Суть скрипта в том, что он добавляет после числового поля блок - quantity-nav, с двумя дочерними блоками quantity-button, которым так же присвоены свои классы - quantity-up и quantity-down. Это будущие две кнопки + и -, что соответственно будут увеличивать и уменьшать числовое значение в поле.

После добавления блока с кнопками для поля, скрипт отслеживает нажатия на кнопки сравнивает с значением в поле и если значение нужно сменить - уменьшить и увеличить, то меняет его. Все просто, кто знаком с jQuery, разберется без проблем.

Само числовое поле, которое есть у вас при верстке нужно обернуть в родительский блок с классом - quantity (Вы можете менять названия классов на свои, но не забывайте менять их в скрипте и в стилях, чтобы все соответствовало!). Выглядеть, это должно примерно так:
<div class="quantity">
  <input type="number" min="1" max="9" step="1" value="1">
</div>

Значения и настройки поля у вас будут свои, но суть понятна. Для корректного отображения - добавляете стили. Примерный набор такой:
.quantity {
  position: relative;
  text-align:center;
  display:inline-block;
}
 
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}
 
input[type=number]
{
  -moz-appearance: textfield;
}
 
.quantity input {
  width: 45px;
  height: 42px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  border: 1px solid #eee;
}
 
.quantity input:focus {
  outline: 0;
}
 
.quantity-nav {
  float: left;
  position: relative;
  height: 42px;
}
 
.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 20px;
  text-align: center;
  color: #333;
  font-size: 13px;
  line-height: 1.7;
  transform: translateX(-100%);
  user-select: none;
  font-weight:bold;
}
 
.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
}
 
.quantity-button.quantity-down {
  position: absolute;
  bottom: -1px;
  height: 50%;
}

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

Добавлено: 04 Мая 2021 07:27:01 Добавил: Андрей Ковальчук

Как подгружать 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 Добавил: Андрей Ковальчук

Кнопки прокрутки страницы вверх и вниз jQuery

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

Это просто html код блока с двумя ссылками

<div class="scroll_panel">
    <a href="#" id="scroll_top"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg></span></a>
    <a href="#" id="scroll_bottom"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></span></a>
</div>

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

Вот готовые стили, как в примере:
.scroll_panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 90px;
    transition: background 0.2s ease;
}
.scroll_panel:hover {
    background: #eee; 
}
 
  
.scroll_panel svg {
fill:#f00;
}
 
#scroll_top {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    transition: background 0.2s ease;
}
#scroll_top span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    top: 50px;
}
#scroll_top:hover {
    background: #ddd;   
}
 
#scroll_bottom {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    transition: background 0.2s ease;
}
 
#scroll_bottom span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    bottom: 20px;
}
#scroll_bottom:hover {
    background: #ddd; 
}

Последнее что нужно сделать - добавить скрипт jQuery, который и будет переносить нас в начало или конец страницы.
<script>
$(function(){
    $('#scroll_top').click(function(){
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
     
    $('#scroll_bottom').click(function(){
        $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
        return false;
    });
});
</script>

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


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

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

Как создать бургер меню с выезжающей панелью на чистом CSS

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

Первое что понадобится - добавить html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню - это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.

В нужное вам место на сайте добавьте html следующий код:

<div class="burger-menu">
    <input id="menu-toggle" type="checkbox" />
    <label class="menu-btn" for="menu-toggle">
      <span></span>
    </label>
 
    <ul class="menubox">
            <li><a class="menu-item" href="#">Home</a></li>
            <li><a class="menu-item" href="#">About us</a></li>
            <li><a class="menu-item" href="#">Blog</a></li>
            <li><a class="menu-item" href="#">Articles</a></li>
            <li><a class="menu-item" href="#">Contacts</a></li>
    </ul>
  </div>

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

Сначала идет главный блок-контейнер с классомburger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
Далее идет чекбокс с ID - menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
Далее идет label с классом -menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
После идет наше основное меню в виде ul списка с классом - menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру - делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.
Как вы поняли, суть способа в том, что у нас есть скрытое меню за пределами страницы и обычный чекбокс, стилизованный под бургер меню. Когда мы нажимаем на чекбокс, мы задаем новые параметры для нашей скрытой панели/блока который появляется сбоку. В примере он выезжает слева, можете поменять и сделать справа.

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

Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.
.menu-btn{
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right:0;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}
 
.menu-btn > span,
.menu-btn > span::before,
.menu-btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: .25s;
}
.menu-btn > span::before {
  content: '';
  top: -8px;
}
.menu-btn > span::after {
  content: '';
  top: 8px;
}

Далее задаем стили для нашего меню, то бишь ul списку.
.menubox{
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  transition-duration: .25s;
}

left: -100%; - в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.

Ну и мои стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны
.menu-item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu-item:hover {
  background-color: #CFD8DC;
}

Теперь скрываем стандартный чекбокс в виде галочки
#menu-toggle{
  opacity: 0;
}

Задаем правила, что делать с нашим бургер меню, и самим меню, когда происходит активирование чекбокса, то есть когда вы жмете по нему и по label. Одну полоску мы поворачиваем, а две нижние поднимаем вверх и тоже поворачиваем и в результате из трех полосок получаем крестик. Так же делаем видимым наш скрытый блок с пунктами меню.
#menu-toggle:checked ~ .menu-btn > span{
  transform: rotate(45deg);
}
#menu-toggle:checked ~ .menu-btn > span::before{
  top: 0;
  transform: rotate(0);
}
#menu-toggle:checked ~ .menu-btn > span::after{
  top: 0;
  transform: rotate(90deg);
}
#menu-toggle:checked ~ .menubox{
  visibility: visible;
  left: 0;
}

В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы - left: 0;. Если хотите справа, то просто смените на right: 0;.

Ну и весь код целиком, если вы не копировали по порядку, предыдущие отрезки.
.menu-btn{
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right:0;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}
 
.menu-btn > span,
.menu-btn > span::before,
.menu-btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: .25s;
}
.menu-btn > span::before {
  content: '';
  top: -8px;
}
.menu-btn > span::after {
  content: '';
  top: 8px;
}
 
.menubox{
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  transition-duration: .25s;
}
 
.menu-item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu-item:hover {
  background-color: #CFD8DC;
}
 
 
#menu-toggle{
  opacity: 0;
}
 
#menu-toggle:checked ~ .menu-btn > span{
  transform: rotate(45deg);
}
#menu-toggle:checked ~ .menu-btn > span::before{
  top: 0;
  transform: rotate(0);
}
#menu-toggle:checked ~ .menu-btn > span::after{
  top: 0;
  transform: rotate(90deg);
}
#menu-toggle:checked ~ .menubox{
  visibility: visible;
  left: 0;
}

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

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

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

Как сделать адаптивное видео YouTube на сайте

Если вы размещали код YouTube у себя на сайте то заметили что видео выводится с помощью тега iframe. Обычно код видео имеет примерно такой вид:

<iframe width="560" height="315" src="https://www.youtube.com/embed/TdRllKvKi9k" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Даже по коду видно что по-умолчанию для видео уже заданы размеры плеера. Изначально размеры такие - 560 пикселей ширина и 315 пикселей высота. На большом экране и при нормальной ширине вашего сайта, такой размер вполне допустимый, но если ширина экрана устройства 420 пикселей? Результат - плеер вылазит за границы видимой части и сайт выглядит криво и неправильно. Как же решить данную задачу?

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

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

Для начала. вам нужно будет разместить код внутри блока. Также блоку присвоим любой класс, например - frame_blc.
<div class="frame_blc">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Y421bWMelqE" frameborder="0" allowfullscreen></iframe>
</div>

Теперь, нужно добавить универсальные стили, которые и будут адаптировать размер плеера YouTube.
.frame_blc{
  overflow:hidden;
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
}
.frame_blc iframe {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

По сути мы делаем адаптивным наш родительский блок, а сам плеер делаем с абсолютным позиционированием и растягиваем на всю ширину и высоту относительно родителя. Для блока основным параметром, на который следует обратить внимание, является - padding-bottom:56.25%. Он задает высоту родительского блока для плеера у которого видеоролик имеет соотношения сторон 16:9. Если Ваш видеоролик имеет соотношения 4:3, то параметр будет - padding-bottom:75%.

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

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

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

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

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

Теперь подробнее о скрипте. Он работает на основе 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 Добавил: Андрей Ковальчук

Прижать футер к низу страницы

Наверное самый распространённый способ прижатия футера к низу страницы:

Необходимая разметка:

<body>
    <div class="wrapper">
        Шапка
        Контент
        Колонки
        <div class="footer-push"></div>
    </div>
    <div class="footer">
        Подвал
    </div>
</body>

CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -100px 0; /* отрицательный нижний отступ на высоту футера */
    padding: 0;
}
.footer-push, .footer {
    height: 100px;
    margin: 0;
    padding: 0;
}

Работает во всех браузерах.

Единственное момент — у body, врапера и футера нельзя указывать положительные верхний или нижний margin/padding. Сделать это можно для вложенных элементов.

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

Разделы и абзацы

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

Но, в отличие от большинства процессоров, HTML и XHTML явным образом применяют теги раздела <div>, абзаца <p> и конца строки
для управления выравниванием и потоком текста. Возврат каретки1, хотяи очень полезный для удобства чтения, обычно игнорируется броузером, и авторы должны применять тег
, чтобы явно указать конец
строки. Тег <p>, который также вызывает переход на следующую строку, несет в себе дополнительный смысл помимо возврата каретки.

Тег <div> несколько отличается от тегов <p> и
. Включенный впервые в стандарт HTML 3.2, он был задуман, чтобы служить простым средством организации текста и разбивать документ на отдельные куски. В силу смысловой неопределенности этого тега он оставался непопулярным. Но последние нововведения (атрибуты выравнивания и стилей, а также атрибут id для организации ссылок и автоматической обработки) позволяют теперь яснее помечать отдельные фрагменты документа, придавая им особый характер, равно как и управлять их внешним видом. Эти возможности придали тегу <div> новый смысл и стимулировали его использование.

Присваивая атрибутам id и class имена в разных секциях документа, разграниченных тегами <div id=name class=name> (так поступают и с другими тегами, например с <p>), вы не только помечаете их для последующего обращения к ним при помощи гиперссылок или для автоматической обработки и поддержки (в частности, составления списка библиографических данных по разделам), но можете также определить явно различающиеся стили для этих частей документа. К примеру, можно ввести класс разделов, содержащих аннотацию к документу (скажем, <div class=abstract>), другой класс – для основного текста, третий – для заключения и четвертый – для библиографии (<div class=biblio>).

Затем каждому классу может быть присвоен собственный способ отображения как на уровне документа, так и с помощью внешней присоединенной таблицы стилей: аннотация выводится с отступом и курсивом (скажем, div.abstract {left-margin: +0.5in; font-style: italic}); основной текст – выровненным по левому краю прямым шрифтом; заключение – так же, как аннотация; библиография – с применением автоматической нумерации и подходящим образом отформатированная.

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

Как открывать перетащенные файлы с помощью HTML5

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

Зачем открывать локальные файлы через JavaScript?
Загрузка файлов через обычные HTML формы очень неудобна. Люди часто используют его допустим при передаче нескольких мегобайт фотографий со своей камеры на сервер. Если предположить что они знают местоположение фотографий, то загрузка может занять несколько минут, но это только если все будет хорошо и форматы и разамеры будут подходящими, а что если нет? До сих пор разработчикам приходилось пологаться на Flash или другие плагины для обеспечение удобства. Предварительная обработка с помощю Javascript‘a имеет ряд преимуществ:

Локальная обработка файлов происходит на много быстрей.
Файлы могут быть проанализированны, чтобы убедиться, что они в правильном формате и ниже, орпеделенного размера.
Такие файлы как картинки могут быть просмотренны перед загрузкой.
Можно обрезать или изменить размер изображения перед загрузкой с помощю canvas.
Объект FileReader.
FileReader является частью W3C File API и предостовляет четыре метода для асинхронной загрузки данных из ссылки к объекту File.

.readAsText(File f, [кодировка]) – считывает файл как строку. По умолчанию в кодировке UTF-8, но можно передать и другой формат.
.readAsDataURL(File f) – как закодированный URL.
.readAsBinaryString(File f) – как двоичный код.
.readAsArrayBuffer(File f) – как объект ArrayBuffer.

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

Асинхронное открытие файлов с помощю Javascipt.
Вот наша исхлдная функция ParseFile() в который предаются выбранные или перетащенные на элемент #filedrag файлы.

function ParseFile(file) {

        Output(
                "<p>Информация о файле: <strong>" + file.name +
                "</strong> тип: <strong>" + file.type +
                "</strong> размер: <strong>" + file.size +
                "</strong> байт</p>"
        );

}

После обновления статуса, мы проверяем является ли переданный файл текстовым (text/plain, text/html, text/css, и т.д.), загружаем его используя метод FileReader.readAsText() и выводим результат:
// выводим текст
if (file.type.indexOf("text") == 0) {
        var reader = new FileReader();
        reader.onload = function(e) {
                Output(
                        "<p><strong>" + file.name + ":</strong></p><pre>" +
                        e.target.result.replace(/</g, "<").replace(/>/g, ">") +
                        "</pre>"
                );
        }
        reader.readAsText(file);
}

Точно также мы можем проверить, если у нас файл является картинкой (image/jpeg, image/gif, image/png и т.д.) загрузить его как data URL используя метод FileReader.readAsDataURL() и передать это все дело как src атрибут для элемента img:
// выводим картинку
if (file.type.indexOf("image") == 0) {
        var reader = new FileReader();
        reader.onload = function(e) {
                Output(
                        "<p><strong>" + file.name + ":</strong><br />" +
                        '<img src="' + e.target.result + '" /></p>'
                );
        }
        reader.readAsDataURL(file);
}

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

Выделение заглавных букв

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

HTML

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

Только не повторяйте букву после span‘a

CSS

Пришло время для написания CSS стилей, но для начала условимся что наш параграф имеет размер шрифта 14 пикселей, и высоту строки в 18 пикселей.
1.Сдвинем нашу первую букву влево, что бы весь текст параграфа обтекал его

span.initialcap{
    float: left;
}

2. Применим к нему размер шрифта 40 пикселей и высоту строки в 35 пикселей, чтобы буква отличалась от остального текста.
span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px;
}

3. Ну и применим к нашей букве шрифт Serif, синий цвет и добавим маленькое пространство справа.
span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px; 
 
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #2583ad; /* синий */
    padding-right: 5px;
}

Автоматизация

Ну а теперь последний этап урока автоматизация всего того что мы делали с помощью конечно же PHP. Вы же не будете каждый раз вручную прописывать span с классом. Эта функция поможет этого не делать:
function wpguy_initial_cap($content){
 
    $searchfor = '/>(<a [^>]+>)?([^<s])/';
 
    $replacewith = '>$1<span class="initialcap">$2</span>';
 
    $content = preg_replace($searchfor, $replacewith, $content, 1);
 
    return $content;
}

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

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

Теги <ins> и <del>

Теги <ins> и <del> позволяют авторам выделять те части содержимого тела документа, которые они намереваются в него вставить или удалить из текущей редакции. HTML 4/XHTML-совместимые браузеры отображают содержимое тегов <ins> или <del> специальным образом,
чтобы читатели могли быстро обнаруживать изменения в документе.

Функция: Определяют вставленное и удаленное содержимое документа
Атрибуты: cite, class, datetime, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title
Закрывающий тег: </ins> и </del>; присутствуют обязательно
Содержит: body_content (содержимое тела)
Может содержаться в: body_content (содержимое тела)

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

Тег <body>

В HTML 4 и XHTML тег располагает множеством атрибутов, управляющих цветом и фоном документа. Различные броузеры имеют расширения этого тега для достижения еще большего контроля над внешним видом отображения.

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

Поскольку положение тегов и легко прогнозируется браузером, они могут быть безболезненно опущены в HTML-документе, но не в XHTML-документе. Однако так же, как теги <html> и <head>, теги и облегчают чтение и удобны для поддержки исходного документа, поэтому мы рекомендуем их применять.

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

Функция: Определяет тело документа
Атрибуты: alink, background, bgcolor, bgproperties, class, dir, id, lang, leftmargin, link, onBlur, onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onUnload, style, text, title, topmargin, vlink
Закрывающий тег: ; в HTML может опускаться
Содержит: body_content (содержимое тела)
Может содержаться в: html_tag (тег <html>)

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