Featured
-
Creating Horizontal Menu Bar Using Html and CSS
Hello readers, If you want to create a horizonta
by nitish.rawat -
Custom checkbox using jquery
Hello Reader ! Here is an example how to make
by mukul.kant -
How to make Sticky navigation
Hello Readers ! Below is an example of sticky n
by mukul.kant -
Smoke Font Animation
Hello Friends, The following codes below is an an
by kushal.kant -
How to Make A Simple DropDown in HTML With The Help of Jquery and CSS
You Can Use Below Code to Make A Simple Drop D
by indresh.kumar
Tags
WebStorage in HTML5
WebStorage in HTML5:
It is an alternative to cookies and it is better than cookies. With the help of localstorage we can store data locally inside user browser. It is more secure as compared to cookies. It can be modified easily using&nb...
How to use HTML5 download attribute
HTML5 provides download attribute that can be used in place of PHP-driven file download scripts. In this article, you will come to know about this new attribute of html5.
One Attribute, Two Functions
download attribute sets a file download na...
Dropdown with Multiple checkbox select with jQuery
jQuery multiselect list with checkbox is used for making selection among the choices that user want to select. There are various pulgin used for converting simple dropdown list to multiple select dropdown with checkbox. It cant includes checkbox ...
Jquery .map() method
Jquery .map( callback ) method is used to project the contents that is used in the array and then map this object with the new set of array, It is able to create a new array for calling every elements. It provides function once for each set of an...
Adding Effects using queue() Method
Queue() method is used in jQuery to returns a number of animations to be performed on the elements in the jQuery object. This method is used for the continuous looping of a jquery element. It returns the effect which is used in the queue. While q...
Looping Over Objects using $.each() Method
Hello Readers!
Here I am going to explaining you about the $.each() method used in jquery.
The jquery function $.each() is a traversing method which loops through both arrays and objects. The length property of the arrays as an index is used fo...
Jquery Filtering Methods
The jquery filtering methods is used for the purpose for specifying the criteria, Those elements didn't matched with the criteria it will illuminate from the selection while the matched elements will be returned.
It has multiple methods like...
How to set minimun height and width of cropbox in Cropper Jquery Plugin
Setting minimun height and width of cropbox:-
Hello Readers!
In this blog I am going to explain you minheight and minwidth of a cropbox, which is used in the Cropper Jquery Plugin for selecting an image to crop, By default this Cropbox size...
Explaination of Cropper Jquery Plugin
What is Cropper jquery?
Cropper jquery plugin is lightweight, simple, easy, effortless cropping plugin that helps to crop images in runtime using Cropper jquery, it help to get a cropped image along with several tools that adds different effec...
Custom checkbox bus seat ui, 3type checkbox reserved Seat, Select Seat & empty Seat
Customizing checkbox using Pure Css
The checkbox you see below is nothing but the label and its input that is hidden or making its opacity to "zero" reason for doing this is, it has very less CSS styling property that will not satisf...
contenteditable attribute in html5
contenteditable attribute is a new feature added to HTML5. By the terminology, we understand that this attribute is used to specify that whether the contents of an element are editable or not. This attribute was designed and implemented by Micros...
Lazy Load jQuery Spinner
Lazy load jquery spinner is used for the delays loading of images used on the web page. It improves the page load time, by using this plugin user can see the custom effects and data attributes, It is a fast, easy and lightweight script used for l...
Explaination of Jquery Methods: remove , fadeIn, fadeOut and fadeToggle
In this blog I am going to explain you about very simple concept of Jquery Methods, a little bit Html and Css that is used for decoration the model and for explaining these methods in a more beautiful manner. A user can design the boxes as accord...
jQuery methods to select elements by hierarchy
Selecting elements in a hierarchy is very useful when the HTML is very nested and the unique id or class is not associated with every element. In such a cases, we first select that element that has some unique id or class and then move to the des...
jQuery - Methods to select elements by attributes
There are many times while selecting any element we do not have its class or ID, so in that case we have to take the help of various attributes to select the element. Suppose we have the following HTML
<div>
<a target="ma...
custom scrollbar using jQuery UI
A scrollbar is a communication method or gadget in which nonstop content, pictures, or some other substance can be looked in a foreordained heading (up, down, left, or right) on a PC showcase, window, or viewport so that the majority of the subst...
Animation in jquery
Animation in jquery is used for creative designing and give an amazing view to the user. A wide range of effects is possible using jquery animate function, here I am showing you a simple line of code example that will provide to a text and div, n...
Disabling Button click action using jquery and Html
Disabling Button click action and Enabling when checkbox is checked:
We can disable button click action easily using Html and can enable it using jQuery.
Html code to disable a button:
<h1 class="redeem-head">Redeem Portfolio<...
Bootstrap Tooltip Plugin
The Tooltip plugin is used to show the details of an element when the user will hover on that element. It will show a small pop-up in the specified position to the element.
You have to use data-toggle="tooltip" attribute and a title in the ele...
How to disappear a div with explode effect using Jquery
Hello Reader if you want to hide or disappear a div then you can do it by exlpode effect. This will driven by Jquery.
First create a blank html file name is exlodeeffect.html and its code will go like this:-
<html lang="en">
&...
JQuery - eq( index ) Method
JQuery have DOM filter methods which we can use to filter out elements from a list of DOM elements.
It provides DOM traversal methods to help us select elements in a document randomly as well as in sequential method.
DOM Traversal Methods...
Custom select box
Hello Friends,
If you are looking to create a custom select box, you can use below HTML and CSS code I have provided.
Below an example of custom select box.
HTML -
<div class="wrapper">
<input id="textfield" type="te...
Progress bar
A Progress bar indicates the current percentage for completeness of an operation or process.
jQueryUI provides an easy-to-use progress bar widget that we can use to let users know the percent of completeness of an operation. jQueryUI provides...
How to Create Custom Jquery Tabs
Hello Reader's
In this article I will guide you how to create custom responsive tabs without use of any Jquery plugin.
This will surely make your web page faster because its not an plugin. Its an simple custom Jquery HTML & css.
Copy and p...
How to remove a HTML element using Jquery
Hello reader's,
Below is the example to Remove the HTML element using Jquery
If you having trouble with such issues, then use the below code.
Here is the HTML
<p>Write your text here.</p>
<p>Write your text here.<...
Simple Parallax Effect with smooth scrolling Jquery
Hello reader's,
Below is the example for Simple Parallax Effect with smooth scrolling Jquery
If you having trouble with such issues, the use the below code.
Here is the HTML of Scroll trigger
<div class="carousel-indicators">
...
Add or Remove Class by Using Jquery
Hello Guys
The below example will guide you to add or remove class by using jquery.
So if you are stuck in such case follow the below code.
Here is the HTML Code
<nav>
<ul>
<li><a href="javascript:v...
Ajax Upload Files With the HTML5 FormData
If you are making a Ajax request to submit a form that include files then HTML5 FormData is the solution for that. You can also used jQuery form for upload files using Ajax request.
First, we need to add jQuery code to submit function which is...
Switch list/grid view using jQuery
Hi all,
Below is an example of switching between list and grid view using jQuery.
$( document ).ready(function() {
$('.show-list').click(function(){
$('.wrapper').addClass('list-mode');
});
$('.hide-list').c...
How to make simple Overlay popup ?
Hello readers!
Here is Example of Overlay popup. It is very simple and responsive.
Hope it will helps you somewhere.
Html:-
<div class="container-popup"></div>
<div class="popup">
<span id="close">...
How to Create Accordion
Hello All,
If you want to make an accordion, this code will help you to make a dynamic accordion using HTML, CSS and Jquery.
An accordion is a stacked list of items. Each item can be "expanded" or "stretched" to reveal the content associated...
Custom checkbox using jquery
Hello Reader !
Here is an example how to make a custom check box using simple script and css.
Script
$(document).ready(function(){
$('label').click(function(){
$(this).toggleClass('checkedN');
});
});
css
.checkedN {ba...
How to make Sticky navigation
Hello Readers !
Below is an example of sticky navigation with simple script which is compatible with internet explorer.
You can use this script for sticky header or sticky footer.
I hope it will be helpful for you.
Script:-
$(docume...
Example of Parallax Scrolling
Hello Readers !
Here is an example of parallax scrolling with simple script and it is also compatible with internet explorer.
Parallax Scrolling :-
The parallax scrolling web design is in trend, Its shows the background moving at a slow...
Example of parallax
Hello Readers !
Here is an example of parallax with simple script and it is also compatible with internet explorer.
Script :-
<script type="text/javascript">
$(document).ready(function() {
$(window).bind('scroll',funct...
Make a div align center using jquery
Hello Readers !
Here is an example, how to make a div always center align using jquery. You can do this using css but this method will work with positions (absolute, fixed etc) and it is also compatible with internet explorer.
<script>...
How to Make A Simple DropDown in HTML With The Help of Jquery and CSS
You Can Use Below Code to Make A Simple Drop Down In HTML With The Help Of Jquery And CSS
***Jquery***
<script>
$(function(){
$('.DropDown > ul > li').on('click', function(){
$('.DropDown ul ul').slideUp();
...
How to create a Sticky Menu bar with CSS and Jquery
In this example, we will create a simple webpage that consists of the header, the navigation and the content.
<div class="wrapper">
<div class="header">
Header
</div>
<div class="nav">
...
Adding tooltip on a div using built-in ellipsis
Here is a way of adding tooltip on a div using built-in ellipsis
$('.mydiv')
.bind('mouseenter', function () {
var $this = $(this);
if (this.offsetWidth < this.scrollWidth && !$this.attr('title'))
$this.at...
