JS

Простое модальное окно или поп ап (Pop Up)

Решение, как сделать простое всплывающее окно при помощи плагина Remodal на jQuery При нажатии на кнопку или ссылку, должно появится всплывающее окно с любым типом контента внутри (текст, фото, видео, веб-форма), при этом остальная часть экрана затемняется. Демонстрация 1 Скачиваем плагин Remodal по ссылке 2 Распаковываем архив, из папки /dist/ копируем remodal.min.js в шаблон сайта в папку /js/ 3 Копируем […]

При выборе select изменить текст в div на jQuery

При изменении значения в select, данные из value должны показываться в теге div Демонстрация 1 HTML <select id=”options”> <option value=”black”>Черный</option> <option value=”white”>Белый</option> <option value=”red”>Красный</option> </select> <div id=”result”>black</div> 2 JS $(function(){ $(‘#options’).change(function(){ color = $(‘#options :selected’).val(); document.getElementById(‘result’).innerHTML = color; }) });

Добавить GET параметр в адресную строку, без перезагрузки на jQuery

Решение, как изменить адресную строку браузера без перезагрузки, добавить переменную в конце URL в виде _GET параметра 1 HTML <select id=”options”> <option value=”?color=black”>Черный</option> <option value=”?color=white”>Белый</option> <option value=”?color=red”>Красный</option> </select> 2 JS $(function(){ $(‘#options’).change(function(){ color = $(‘#options :selected’).val(); history.pushState({}, ”, color); }) });

Подсветка синтаксиса для сайта

Решение, как сделать подсветку синтаксиса кода на сайте Если вам необходимо вывести исходный код на странице сайта красиво, с подсветкой синтаксиса и форматированием, то существует множество плагинов. Рассмотрим пример внедрения на плагине Google Code Prettify. Подробно о Google Code Prettify Темы для Google Code Prettify Между тегами <head>…</head> вставим строку подключения плагина: <script src=”https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js”></script> Чтобы вывести красиво оформленный код […]

Простая ajax форма отправки сообщения на E-mail

Решение, как отправить данные с вебформы на почту, без перезагрузки страницы, используя jQuery Подключить плагин jQuery: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> Скрипт отправки формы: $(“#wdh_form”).submit(function(e){ e.preventDefault(); $.ajax({ type: “POST”, url: “wdh_send_form.php”, data: $(“#wdh_form”).serialize(), success: function(data) { $(“#wdh_result_form”).html(data); } }); }); Форме присвоить ID: <form id=”wdh_form”> Блок для вывода результата формы: <div id=”wdh_result_form”></div> Создать PHP файл для отправки почты wdh_send_form.php: […]

Спойлер — как скрыть, показать текст на JavaScript

Решение, как спрятать текст под спойлер с помощью чистого JavaScript без jQuery и прочих плагинов. Демонстрация В любом месте странички размещаем код скрипта: <script> function Spoiler() { var ele = document.getElementById(“contentSpoiler”); var text = document.getElementById(“linkSpoiler”); if(ele.style.display == “block”) { ele.style.display = “none”; text.innerHTML = “Подробнее”; } else { ele.style.display = “block”; text.innerHTML = “Скрыть”; } […]

Проблема с загрузкой pagination в jCarousel

При загрузке jCarousel не всегда подгружаются все пункты нумерации слайдов. При такой конфигурации бывает, что не сразу подгружаются все пункты нумерации слайдов (pagination), приходится обновлять браузер со сбросом кеша, через Ctrl+F5: $(function(){ $(function() { // Конфигурация }); })(jQuery); Чтобы избежать эту проблему, следует пердыдущий код заменить на следующий: $(window).load(function(){ $(document).ready(function() { // Конфигурация }); })(jQuery);

Плавный скроллинг к началу страницы на jQuery

Решение, как сделать кнопку «Наверх» с плавным скроллингом к началу страницы на jQuery <a href=”#” class=”clicktop”>Наверх</a> <script> $(document).ready(function(){ $(‘.clicktop’).click(function () { $(‘body,html’).animate({ scrollTop: 0 }, 800); return false; }); }); </script>

Проверка заполнения полей формы на jQuery

Решение, как сделать проверку заполнения полей в форме при помощи jQuery плагина Пример простой формы обратной связи с использованием плагина проверки полей. Для этого понадобится плагин jquery.validate.js и библиотека jQuery. <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>Проверка заполнения полей формы с помощью jQuery</title> <script type=”text/javascript” src=”jquery-1.9.1.min.js”></script> <script type=”text/javascript” src=”jquery.validate.js”></script> <script> $(document).ready(function(){ $(“#demoForm”).validate(); }); $.validator.messages.required = “Заполните […]

Адаптивный виджет VK

Решение, как сделать виджет «Вконтакте» адаптивным или растянуть его на всю ширину экрана 100% <div class=”vk_widget”> <script type=”text/javascript” src=”//vk.com/js/api/openapi.js?144″></script> <!– VK Widget –> <div id=”vk_widget”> <div id=”vk_groups”></div> </div> <script> function VK_Widget_Init(){ document.getElementById(‘vk_groups’).innerHTML = “”; var vk_width = document.getElementById(‘vk_widget’).clientWidth; VK.Widgets.Group(“vk_groups”, {mode: 0, width: vk_width, height: “241”}, #ВАШ_ID#); }; window.addEventListener(‘load’, VK_Widget_Init, false); window.addEventListener(‘resize’, VK_Widget_Init, false); </script> </div>

Продолжая использовать веб- сайт beta-code.ru, вы даете согласие на обработку файлов cookie, пользовательских данных (сведения о местоположении; тип и версия ОС; тип и версия Браузера; тип устройства и разрешение его экрана; источник откуда пришел на сайт пользователь; с какого сайта или по какой рекламе; язык ОС и Браузера; какие страницы открывает и на какие кнопки нажимает пользователь; ip-адрес) в целях функционирования сайта, проведения ретаргетинга и проведения статистических исследований и обзоров. Если вы не хотите, чтобы указанные данные обрабатывались, покиньте сайт.

Принять