Bootstrap меню, выпадающее при наведении

Bootstrap имеет компонент меню, благодаря которому можно быстро реализовать навигацию по сайту. Но шаблонное меню имеет недостаток: на десктопной версии меню раскрывается только при клике по родительскому пункту. На мобильной версии так и должно быть — нажал на родительский пункт — меню раскрылось. Однако, как сделать, чтобы меню раскрывалось при наведении? В этом поможет замечательный скрипт, реализован он на jQuery:

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

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

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

И теперь, наконец таки, получается нормальное меню.

Форма сбора денег на сайт

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

Оказывается механизм установки формы от яндекс (яндекс.деньги — сейчас самая популярное средство оплаты) весьма прост. Регистрируем яндекс кошелек, проходим верификацию и выбираем в левом меню пункт «Как собирают деньги». Там в конструкторе форм выбираем подходящий вариант и поучаем код вида

Просто устанавливаем это код в нужное место на сайте и все,  ждем поступлений от меценатов.

Идеальный .htaccess

Скорость работы сайта определяется по тесту скорости от https://developers.google.com/speed/pagespeed/insights/?hl=ru Залогом быстрой работы сайт являются прописанные в файле .htaccess настройки работы веб сервера. Именно в нем настраивается кэширование контента браузером и его длительность,  сжатие данных при передаче между сервером и клиентом, редиректы и прочие важные настройки. Сложно написать эти директивы самому, так как они написаны на синтаксисе конфигурационных файлов сервера Apache, который хорошо знают специалисты, работающие именно с серверным оборудованием(технические специалисты хостинга). Поэтому для себя храню  «идеальный» вариант данного файла, который можно брать как дефолтный и по необходимости подстраивать под себя.

Ссылка на идеальный .htaccess

 

Форма обратной связи — не приходит почта на gmail

При отправке формы обратной связи с лендингов пользуюсь стандартным php скриптом:

Все было нормально, почта при отправке формы всегда моментально приходила, все устраивало. Но вот в одном из случаев, когда почта для доставки писем была @gmail.com письма не приходили. Весьма странно. Ранее были отправки на почту яндекса и майл.ру, поэтому сразу стало понятно, что загвоздка в самом почтовом сервере от google. Очевидно, что ему что-то не нравится.

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

все стало работать.

Сделать текущий пункт меню активным.

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

Этот скрипт надо разместить перед закрывающимся body, после того как подключен скрипт jquery.

Как часто google проверяет robots.txt

На одном из сайтов создал robots.txt и запретил в нем поисковым роботам индексировать информацию.  Делается это весьма просто с помощью строчки

И с чистой совестью стал дальше проверять работу сайта. Однако, тест проверки сайта на мобильность показал, что доступа к сайту нет, так как подобное прописано в роботс. Хорошо, разрешил индексирование сайта, прописав:

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

Узнать ширину экрана js

Иногда необходимо в зависимости от разрешения экрана прятать/показывать элементы страницы. В bootstrap для этого есть соответствующие классы, вроде hidden-xs, visible-md и т.д. Но что, если необходимо этот элемент прятать/показывать в зависимости от действий пользователя. В таком случае помогут следующие условия:

То есть в одном свойстве хранится ширина, а в другом высота экрана.

Кнопки СТАРТ и СТОП для video

Стояла задача вставить на сайт видео с помощью тега <video> фоном.  Сам файл видео находится на хостинге. Также необходимо было, чтобы пользователь сам мог запустить и остановить видео. По умолчанию видео стоит на месте и показывает черны экран. Чтобы черного экрана не было необходимо указать аттрибут poster.

Далее добавил иконки, которым задал id указанные в скрипте

 

 

Как подключить wow к сайту

Для создания красивых эффектов при загрузке сайта и переходе между секциями используют скрипт WOW.js в связке со стилями animate.css. В <head> необходимо подключить стили:

Перед закрывающимся тегом <body> необходимо вставить

Для работы WOW необходимо, чтобы был подключен jQuery. Теперь к анимируемым элементам необходимо добавить классы wow и класс эффекта анимации. Но просто добавить их недостаточно, необходимо в скриптах запустить инициализацию

Теперь все должно работать.

Админ панель на лендинг

Необходимо, чтобы заказчик сам менял данные на лендинге. Подходящих скриптов найти не удалось. Нашел только сервис edit-content.com/sites. Это именно сервис, а не скрипт. В настройках сервиса настраивается  доступ к сайту по фтп и можно производить редактирование заранее размеченных (с помощью класса editable) областей. Данный сервис бесплатный, так я прочитал в одной статье. Но спустя две недели использования пришло письмо, ваш тестовый период заканчивается, платите деньги. Для одного сайта -10$ в месяц. За бугром это может и копейки, по у нас — это деньги.

Стал искать дальше и нашел. На хостинге hostland.ru есть очень удобный файловый менеджер, а в нем — WYSIWYG редакторы.  Не могу сказать, чтобы они работали идеально, но для моих задач вполне подошел CKEditor. Он позволяет менять тексты, ссылки, картинки, таблицы — именно то, что и было нужно.

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