Блог веб разработчика

23.02.201822.02.2020

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

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

$address = "test@gmail.com";
$mes = "Тема: Заказ обратного звонка!\nТелефон: $phone\nИмя: $name\nСообщение(необязательно): $info";
$sub='Заказ'; 
$email='Заказ <my-post@gmail.com>'; // от кого
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");

$address = "test@gmail.com";

$mes = "Тема: Заказ обратного звонка!\nТелефон: $phone\nИмя: $name\nСообщение(необязательно): $info";

$sub='Заказ';

$email='Заказ <my-post@gmail.com>'; // от кого

$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");

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

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

$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8");

1	$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8");

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

21.02.2018

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

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

<script>
	$(function () {
		$('a').each(function () {
			var location = window.location.href;
			var link = this.href;
			if(location == link) {
				$(this).addClass('active');
			}
		});
	});
</script>

$(function () {

$('a').each(function () {

var location = window.location.href;

var link = this.href;

if(location == link) {

$(this).addClass('active');

}

});

</script>

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

18.02.201822.02.2020

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

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

User-agent: *
Disallow: /

1 2	User-agent: * Disallow: /

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

User-agent: *
Disallow:

1 2	User-agent: * Disallow:

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

17.02.2018

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

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

if(document.body.clientWidth < 992) {
}
if(document.body.clientHeight < 992) {
}

if(document.body.clientWidth < 992) {

}

if(document.body.clientHeight < 992) {

}

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

16.02.2018

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

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

 <video id="videoPlayer" loop poster="assets/img/poster.jpg">

1	<video id="videoPlayer" loop poster="assets/img/poster.jpg">

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

var play;
play=document.getElementById("play");
play.onclick = function() { $("#videoPlayer")[0].play(); }
var pause;
pause=document.getElementById("pause");
pause.onclick = function() { $("#videoPlayer")[0].pause(); }

var play;

play=document.getElementById("play");

play.onclick = function() { $("#videoPlayer")[0].play(); }

var pause;

pause=document.getElementById("pause");

pause.onclick = function() { $("#videoPlayer")[0].pause(); }

16.02.2018

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

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

<link href="css/animate.css" rel="stylesheet">

1	<link href="css/animate.css" rel="stylesheet">

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

<script src="js/wow.min.js"></script>

1	<script src="js/wow.min.js"></script>

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

new WOW().init();

1	new WOW().init();

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

10.02.201818.02.2020

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

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

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

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

09.02.2018

Добавить шрифты в css

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

@font-face {
  font-family: 'AvenirNextCyr-Bold';
  src: url('../fonts/AvenirNextCyr-Bold.eot');
  src: url('../fonts/AvenirNextCyr-Bold.eot#iefix') format('embedded-opentype'), url('../fonts/AvenirNextCyr-Bold.woff') format('woff'), url('../fonts/AvenirNextCyr-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {

font-family: 'AvenirNextCyr-Bold';

src: url('../fonts/AvenirNextCyr-Bold.eot');

src: url('../fonts/AvenirNextCyr-Bold.eot#iefix') format('embedded-opentype'), url('../fonts/AvenirNextCyr-Bold.woff') format('woff'), url('../fonts/AvenirNextCyr-Bold.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

09.02.201809.02.2018

Увеличить изображение при наведении

Необходимо, чтобы при наведении мыши на картинку, она увеличивалась. Сделать это можно с помощью следующего css кода:

img:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform:scale(1.1) ;
  -o-transform: scale(1.1);
  transform:scale(1.1) ;
}

img:hover{

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-ms-transform:scale(1.1) ;

-o-transform: scale(1.1);

transform:scale(1.1) ;

}

07.02.201807.02.2018

Где брать шаблоны оформления элементов сайта

Очень часто заказчик хочет чтобы его сайт выглядел красиво и эффектно и при этом сам не знает как. В таком случае можно посмотреть примеры оформления на следующем сайте: atuin.ru/blog/

Там можно найти красивое и нестандартное оформление:

Списков
Таблиц
Иконок
Видео
И многое другое

Скопировать код в верстку очень просто, html код добавляется на страницу, а css свойства дописываются в файл стилей.