jQuery

How to Write the Simplest Stepper Script

In this article, we’ll go over the development of a simple stepper script. A stepper is a script that switches between screens/slides by clicking next or previous buttons. The definition may not be ideal, but the example should clearly demonstrate what it is and how it's used.

Personally, I’ve used similar implementations in a few of my past projects. So I thought — why not build a proper boilerplate for future use and publish it here as a blog article?

Including the Libraries

We’ll need:

Bootstrap — to easily style buttons and fonts
Font Awesome — to use three icons (arrow back, up, and forward)
Animate.css — for simple animations (though you can use plain CSS if you prefer)
jQuery — yes, it's time to move away from it and catch events with pure JS, but for now, let’s stick with it 🙂

Here’s how it looks:

<link rel="stylesheet" href="../library/bootstrap-4/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../library/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../library/animate.css/animate.min.css">
<script src="../library/jquery/dist/jquery.min.js"></script>

2018-12-29 Pavel Web CommentsNo Comments

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 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 update part of the content in Yii2 using JavaScripit and Pjax

The first thing we need to do is include "Pjax" itself:

use yiiwidgetsPjax;

Next, wrap the desired content in the Pjax widget. For example:

<?php Pjax::begin([ 'id' => 'pjaxContent'
]); ?>

Content here

<?php Pjax::end(); ?>

2017-08-30 Pavel Yii2 CommentsNo Comments

How to set default parameters for a widget in Yii2

To set default parameters for a widget in Yii2, you need to use the dependency injection container.

Example with DatePicker:

Yii::$container -> set('yiijuiDatePicker', [
	'language' => 'en-US',
]);

The first parameter in set is the class name, and the second is the array of parameters to configure. This way, we can preconfigure our widget properly from the start.

2017-08-30 Pavel Yii2 CommentsNo Comments