Category: jQuery

Creating smooth Scroll within a page by clicking an anchor link. // document ready { $(function() { $(‘a[href^=”#”]’).click(function() { $(‘html,body’).animate({scrollTop:$(this.hash).offset().top}, 200); return false; }); }); // }

We can make an event with jquery when we take our mouse over any element. We need to get an class, id or any unique identification of element to perform better result. In the same time when we move our mouse from certain div we can bind that event too with some sort of jquery… Continue reading Jquery onmouseover and onmouseout event with animate

Jquery animate back to top will provide an easy way to the user to scroll or animate back to top. HTML Markup for jquery animate back to top Following is the html markup. Copy and paste it in to your html document where you want it to appear. Add the required css style of your… Continue reading Jquery animate back to top

In this tutorial I am going to show you how to create a third level navigation with responsive that supports up to cross devices. With an increased mobility now a days it is very important to make your website compatible across all devices. The most but atleast one of the difficult phase while making a… Continue reading Third level navigation with responsive

In this post you will learn how to add class active on page refresh jquery only. Sometimes in a dynamic page we have only one single page for menu markup. Its not possible to add class “active” in a HTML method. There are lots of ways to do this. PHP does it well. But in… Continue reading Add class active on page refresh jquery

Parallax image scroll effect with simple jquery code Its very easy with jquery to make a image scroll with parallax. Copy the below jquery code to get parallax image scroll effect. jQuery(document).ready(function(){ // Cache the Window object $window = jQuery(window); // $(‘div[data-type=”background”]’).each(function(){ var $bgobj = jQuery(“.element_class”); // assigning the object jQuery(window).scroll(function() { // Scroll the… Continue reading Parallax image scroll

Bootstrap slider sliding images on mouseover Twitter bootstrap is a great resources for a front end developers. It includes all most necessary plugins to make an website interactive. At the same time if we talk about the bootstrap carousel, its one of the finest plugin to create a slider either for a content sliding or… Continue reading bootstrap slider sliding images on mouseover

Jquery UI autocomplete with API request is one of the recent thing I have done. I am going to share what I have done. In order to start with Jquery UI autocomplete with API request we will use jqueryUI plugin. autoComplete: function(input,apiUrl,selectCallback,renderCallback){ $(input).autocomplete({ minLength: 3, delay: 300, // this is in milliseconds json: true, source:function(request,response){… Continue reading Jquery UI autocomplete with API request

The technique behind showing a gif loader before page loads completely is very easy. Basically what it is doing ? It is first displayed as a normal div but with the condition of jquery it will hide when the browser is completely loads. Similarly it will add a class to website container that makes it… Continue reading Gif loader before page loads completely