Блог про WordPress, Yii, jQuery, JavaScript та CSS — Поради й приклади коду

У цьому уроці розглянемо, як самостійно реалізувати дружні до SEO таби на 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-атрибуті «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 КоментаріНемає Коментарів

Як додати іконку на вхід заднього фону в 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 КоментаріНемає Коментарів