Blog on WordPress, Yii, jQuery, JavaScript and CSS

How to make tabs with flexbox and jQuery

In this tutorial, we’ll go over how to create SEO-friendly tabs using flex and jQuery.
Our code will be divided into three parts.

HTML Code

First, the HTML code — the foundation we start with:

<div class="tabs" data-tabs="name"> 
<ul class="tab-items"> 
<li class="tab__item active" data-tab-item="tab-item-1"> 
Tab 1 
</li> 
<li class="tab__item" data-tab-item="tab-item-2"> 
Tab 2 
</li> 
<li class="tab__item" data-tab-item="tab-item-3"> 
Tab 3 
</li> 
</ul> 

<div class="tab-contents"> 
<div class="tab__content active" data-tab-content="tab-item-1"> 
Contents of Tab 1 
</div> 
<div class="tab__content" data-tab-content="tab-item-2"> 
Contents of Tab 2 
</div> 
<div class="tab__content" data-tab-content="tab-item-3">
Tab content 3
</div>
</div>
</div>

Roughly speaking, our code consists of three sections:

A wrapper for the tab group, defined by the data attribute data-tabs.
The tabs themselves. Each tab has its own identifier defined by data-tab-item. This value must match one of the data-tab-content attributes in the content blocks.
The tab content blocks, wrapped in a container with the class tab-contents. Each content block has a data-tab-content attribute, which must match one of the tab item values. These attributes are used to map which tab displays which content.

2018-12-24 Pavel Web CommentsNo Comments

How to Make an Auto-Expanding Field in Pure CSS3

Greetings and good mood to everyone.

Since I’ve recently had to dive into front-end development, some of the upcoming posts will be dedicated to HTML5, CSS3, Flexbox, and related topics. For experienced developers, these lessons may seem quite basic. However, you still might discover something new — or perhaps a simpler way to achieve something you’re already doing.

2018-12-15 Pavel Web CommentsNo Comments

How to make a hamburger button in HTML and CSS

In this article, we’ll look at a very simple example of implementing an animated hamburger button.

You’ve probably seen similar buttons on websites with mobile layouts. Such a button can also be found in Bootstrap versions 3 and 4.

2018-12-09 Pavel Web CommentsNo Comments

How to determine user IP in PHP

In this article, we’ll look at one of the common tasks in PHP programming — specifically, how to determine the user's IP address in PHP.

If I’m not working with a framework (such as Yii), I use one of the ready-made solutions in the form of the following function:

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 CommentsNo Comments

How to add an icon to the input background in Bootstrap

Let’s look at how to add icons to an input element, using the example of implementing a callback request form.

Callback request form code:

<form class="text-center">

<div class="h2">Request a call</div>



<div class="form-group form-group-lg inner-addon"> 
<i class="glyphicon glyphicon-user"></i> 
<input type="text" class="form-control" placeholder="Your name"> 
</div>


<div class="form-group form-group-lg inner-addon"> 
<i class="glyphicon glyphicon-earphone"></i> 
<input type="text" class="form-control" placeholder="Your phone"> 
</div>


<div class="form-group"> 
<button type="submit" class="btn btn-lg btn-primary">Request a call</button> 
</div>

</form>

2018-03-17 Pavel Bootstrap CommentsNo Comments