Category Archives: Web Development Tutorials

jQuery scroll animation images

jQuery animate elements as in view (on scroll) plug-in

The jQuery-scroll-animate is a light-weight plug-in that is used to animate the elements in the view. That means, as the user scrolls down to the page, you may animate different elements as they appear on screen of the user. The section with animation may contain different elements like simple paragraphs, tables, forms etc.

Bootstrap table drag drop style

Rearrange Bootstrap table columns by drag and drop

The drag-n-drop-table-columns is a jQuery based plug-in for rearranging the table columns of the Bootstrap tables.

This is a simple plug-in, only 4Kb size that enables the visitors to re-arrange the table columns by drag and drop.

Bootstrap navbar left

Create fixed and Smooth Scroll Bootstrap 4 navbar by jQuery

For creating a top fixed navbar based on Bootstrap 4 that scrolls smoothly, you may use the bootstrap4-fixed-navbar plug-in for that. It is a jQuery based plug-in which is only 3K size. The minified version can be even less.

Bootstrap slider labels

7 styles of Simple and Range Bootstrap Sliders Using jQuery/JavaScript

By using the bootstrap-slider plug-in, jQuery based, you may create the simple or range slider with different styles in web pages. Easily integrate this into the forms for taking user’s input by way of sliding for selecting the value.

For example, selecting the age group, income range, salary expectation etc.

4 Demos of Bootstrap Tabs with Different Styles and Placements

In this core Bootstrap tabs tutorial, I showed how to create simple tabs for presenting the information. The tutorial included simple demos as well.

In this post, I am going to share an awesome plug-in for creating the tabs in Bootstrap with extended options. By using the bootstrap-tabs-x plug-in (jQuery based), you may place the tabs in different direction like top, bottom, left or right.

jQuery Multi-select Dropdown with Checkbox and Searching: 3 Demos

By using the fSelect plug-in, you may create the simple or option group based select dropdowns that allow selecting one or more options. Each option in the dropdown has a checkbox with it while the selected value is also displayed on top.

Bootstrap date range datepicker

3 Demos of Bootstrap datepicker with jQuery

By using the bootstrap-datepicker plug-in, you may create a simple date picker that opens up as the input text field is selected or a component date picker that displays the calendar with text field focus as well as an icon ahead of it.

jQuery lightbox

4 Demos of jQuery lightbox plug-in for images, inline content and videos

The VenoBox is a jQuery based plug-in for creating the responsive modal windows for various type pf content. You may use it for presenting the images, Google maps, inline content and videos from different sources like YouTube and Vimeo.

The lightbox is fully responsive, so adjusts to the user’s screen nicely.

jQuery accordion style

A jQuery Accordion Plug-in with Bootstrap: 2 Demos

The jquery-accordion is a tiny plug-in for creating the FAQs or Question/Answer style accordion in your web pages. As the main panel opens after user’s click or tap on smart phones, the panel body may contain multiple questions and their respective answers.

jQuery pie chart

3 Demos of jQuery Line, Bar, Pie and Donut charts with SVG

The peity is a simple, light-weight useful jQuery plug-in for creating the charts into your web pages. It converts content or data in a specified element into required charts that includes line, bar, donuts and pie charts.

You may specify the type of chart as initiating the plug-in via JavaScript.