Блог о WordPress, Yii, jQuery, JavaScript и CSS — Советы и примеры кода

В этом уроке рассмотрим, как самостоятельно реализовать дружественные СЕО табы на flex и jQuery.
Наш код будет разделен на три части.

HTML код

Первое. HTML код без которого никуда:

<div class="tabs" data-tabs="name">
	<ul class="tab-items">
		<li class="tab__item active" data-tab-item="tab-item-1">
			Вкладка 1
		</li>
		<li class="tab__item" data-tab-item="tab-item-2">
			Вкладка 2
		</li>
		<li class="tab__item" data-tab-item="tab-item-3">
			Вкладка 3
		</li>
	</ul>

	<div class="tab-contents">
		<div class="tab__content active" data-tab-content="tab-item-1">
			Содержимое вкладки 1
		</div>
		<div class="tab__content" data-tab-content="tab-item-2">
			Содержимое вкладки 2
		</div>
		<div class="tab__content" data-tab-content="tab-item-3">
			Содержимое вкладки 3
		</div>
	</div>
</div>

грубо говоря, наш код состоит из трех частей:

Обертки для табов, с названием одной группы. Это задано в дата-свойстве «data-tabs».
В наших табах (или вкладках). Где у каждой вкладки есть свое название, определенное в свойстве «data-tab-item». Название данного свойства должно совпадать с одним из названий свойств «data-tab-content» в блоках хранящих содержимое вкладок (табов).
Содержимое табов, обернутое в класс «tab-contents». Каждое содержимое таба имеет свойство «data-tab-content», и должно совпадать с одним из свойств вкладок «data-tab-item». Данные свойства служат для сопоставления того, какой таб, какое содержимое должен отображать.

2018-12-24 Pavel Web КомментарииКомментариев нет

Как сделать автоматически расширяемое поле на чистом CSS3

Все доброго времени и хорошего настроения.

Т.к. в последнее время мне пришлось податься в верстку, то некоторые статьи будут посвящены HTML5, CSS3, Flexbox и прочим подобным вещам. Знающим программистам данные уроки могут показаться достаточно простыми. Но возможно, вы все же сможете почерпнуть для себя что-то новенькое а может быть найдете более простое решение тому чем пользуетесь на данный момент.

2018-12-15 Pavel Web КомментарииКомментариев нет

Как сделать гамбургер кнопку на HTML и CSS

В данной статье рассмотрим простейший пример реализации анимированный кнопки-гамбургер (hamburger).

Похожие кнопки вы наверняка встречали в сайтах с мобильной адаптацией. В bootstrap 3/4 версии так же можно найти такую кнопку.

2018-12-09 Pavel Web КомментарииКомментариев нет

Как определить IP пользователя в PHP

В данной статье рассмотрим одну из распространенных задач в программировании на PHP. А именно, как в php определить ip пользователя.

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

function user_ip()
{
	if(getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"),"unknown"))
	{
		return getenv("HTTP_CLIENT_IP");
	}
	else if(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))
	{
		return getenv("HTTP_X_FORWARDED_FOR");
	}
	else if(getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown"))
	{
		return getenv("REMOTE_ADDR");
	}
	else if(!empty($_SERVER['REMOTE_ADDR']) && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))
	{
		return $_SERVER['REMOTE_ADDR'];
	}
	
	return NULL;
}

2018-04-23 Pavel PHP КомментарииКомментариев нет

Как добавить иконку на задний фон input в Bootstrap

Рассмотрим добавления иконок в элемент input, на примере реализации формы обратного звонка.

Код формы заказа обратного звонка:

<form class="text-center">
	
<div class="h2">Заказать звонок</div>


	
<div class="form-group form-group-lg inner-addon">
		<i class="glyphicon glyphicon-user"></i>
		<input type="text" class="form-control" placeholder="Ваше имя">
	</div>

	
<div class="form-group form-group-lg inner-addon">
		<i class="glyphicon glyphicon-earphone"></i>
		<input type="text" class="form-control" placeholder="Ваш телефон">
	</div>

	
<div class="form-group">
		<button type="submit" class="btn btn-lg btn-primary">Заказать звонок</button>
	</div>

</form>

2018-03-17 Pavel Bootstrap КомментарииКомментариев нет