Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

How to implement load more dynamic results functionality using jQuery, Ajax Php and Database?

To display or load more results, whether it is commenting on a blog website, like or images on social media or products on eCommerce website the best UX pattern for this is either pagination, a Load more button or infinite scrolling. In this tuto...

Using TouchSwipe plugin in jQuery

If you want to swipe on touch devices like iPad, iPhone, Android device etc there is a jQuery plugin that can be used for this purpose. It can read any single or multiple finger swipes on touch device and mouse 'drags' on the desktop brow...

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...

How to use jQuery Lazy Load Plugin

In this article you will learn about lazy loading plug-in from jQuery. It first loads your web page then request is sent to load the images of that page. By using Lazy load plug-in you can decrease time for loading the page and also it can incre...

webui-popover plugin in jQuery

It is a plugin with jQuery which can be used to show popover . It can work with bootstrap but it can be used without bootstrap. It requires jquery1.7+ It supports browsers IE8+, Chrome, Safari, firefox, Opera. These are the features of this p...

jQuery CDN

CDN is Content Delivery Network which is fundamentally an extensive conveyed arrangement of servers which sent in various server centers over the web. It helps in reducing load time of a page by offering documents at a higher data trans...

Scroll Fixed Header in jQuery

In this article, you will learn how to fix the header all the time while scrolling your website page. There are different jQuery plugin available for this purpose but we will use a simple jQuery based solution to make a header fixed on the top of...

DataTables: Table plug-in for jQuery

DataTables is a jQuery plug-in designed for creating flexible HTML tables. It has following features: * It provides Instant search, Pagination and multi-column ordering * It has Supports for any data source like DOM, Javascript, Ajax and s...

How to add class (active) on specific li on user click with jQuery

Mostly every website contains a navigation menu so it's constantly great to make it so the guests or client on the website knows on which page or part of the website he is on. This can be proficient by including a "dynamic class" or...

Appending and Removing Div using jQuery

Append and Remove Method: We can use append method to add a div using jQuery and using remove method we can easily delete added div. Append Syntax: $(selector).append(content,function(index,html)) Remove Syntax: $(selector).rem...

Displaying div on radio check using jQuery

Hiding/Showing div on checking radio: We can easily hide or display a div by checking the radiobox options using jQuery. We can do this by checking radio options attribute and according to attribute we can hide or show a div. Example: ...

jQuery Effects methods

Hello Readers, jQuery provides a simple way to apply wonderful effects in your application. jQuery effects methods are very amazing and easy to implement with minimum configuration. So in today's post, we will discuss the jQuery effects me...

Full Calendar Implementation

1- Place the JS files in js directory. fullcalendar.min.js jquery.min.js moment.min.js   2- Place CSS files in CSS folder. fullcalendar.css fullcalendar.print.css   3- Paste the bellow javascript code i...

Jcrop image croping

1- Place JS and CSS files under head tag. jquery.min.js jquery.Jcrop.js main.css demos.css jquery.Jcrop.css   2- Also copy and paste bellow piece of javascript code under head tag. <script type="text/javascript"...

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 ...

Select only one element of checkbox at a time using jquery

Many times we need to select only one element at a time in checkbox because mostly in checkbox is used for multiple data selection. This blog illustrate how we can select only one element of checkbox at a time using jquery.   See the below...

Tabbed Content Area with CSS and jQuery

In this blog I build tabbed contents using CSS and jQuery, Tabbed content is a beautiful way of displaying the content in the precise and concise manner. This structure could be possible using the unordered list that act as a tabbed in a row and ...

How to change the background color of even elements in the list?

We can change the background color of the members of the list using filter() function in jQuery. Note: The filter() function matches each element with the supplied selector and  creates a subset of the matching elements. Let us under...

Chaning accordion icons using JQuery or CSS

In this blog i will explain how to change the accordion icon. I have used two methods here: Using Jquery Using CSS Here is the boostrap accordion html : <div class="panel-group" id="accordion" role="tablist" aria-multisele...

jQuery queue() Method

queue() Method: Queue method is used to display the queue of functions waiting to be get executed on selected html element. In a queue there can be one or more functions waiting to execute on selected html element. We can also manipulate the q...

Different way of writing multiple click functions

jQuery make it possible to interact with user by adding events to the web page, It includes many Events Methods like hide(), bind(), blur(), change(), click() and dbclick(). Here in this blog I just want to create one "click" function t...

Google URL shortener API with Javascript

Hello Readers, goo.gl  service at Google URL shortener API takes long URLs and squeezes them into less characters to make a small link so that can be easily share on social media and email to friends. This API is free with a daily limit o...

Shortened URL with Bitly API and jQuery

Hello Readers,   Bitly API is a way to shrink  long URLs so that we can share it on social media. For example on twitter we can't share long URL so it is a very easy way to shorten long URLs. The most important thing is no ser...

How to create Dynamic Content load on click using JQuery?

Hello reader In this blog! I am going to tell you how to create Dynamic Content Load using jQuery. Generally, we see the content loader on many websites and on some registration form when we click on the next step button after completed the...

Theme Changing Application

Hello Readers! In this blog we will be creating an application through which we can change the theme of a device. For an example we can consider a mobile theme application. In mobile, when we select particular theme the settings changes according...

Learn how to create a comment with word limit using jQuery

Hii,  In this blog, I am going to share an example in which i have created a comment box using few html tags like input box and text area and i have used jquery to set the word limit and to count the number of characters typed. Go through ...

Accessing JSON object in JavaScript

JSON is used to read data from a web server, also it is used to display the data in a web page. In this blog we will be accessing the values of JSON object with the help of the jquery's getJSON() method. GetJSON() method is used to load the J...

Trigger() method in jQuery

Trigger() method: It is used to trigger an event for selected element and also trigger default behaviour of an event for the selected html element. It works similar to the triggerHandler() method, but triggerHandler() does not trigger default ...

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...

Display content on the basis of drop down value selected without using id concept

Hello Reader! Usually, when we are asked to get the contents to be displayed as per the value selected from the drop down we use to get it done with the concept of id. Consider a scenario where the list contains more than 10 items, than generatin...

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...

Creating Slideable Grid Using JQuery

Hello readers , Today in my blog I have tried to create Slideable Grid with the help of jQuery .   As we all add columns to our web pages either for dividing the data as per the screen size so that the content would not get overlapped ...

Change Event in jQuery

Change Event: Change event triggers when value of an element changes. It works only for form fields (<input>,<textarea> and <select> elements). In case of select menu,checkboxes, and radio buttons change event occurs wh...

Jquery Arrays: Creation and Manipulation

jQuery.makeArray() is used to transforms any array like object to JavaScript Array. This function is useful for making an element into a array list. Here in this line of code i used one div for explaining the box, in which the data of LI can be d...

use of one() method in jQuery

one() method: One() method is used to attach events to selected elements and also used to specify a function when the event occurs. It is similar to on() and bind() method but the events attached using one() method executes only once for each ...

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 nextAll() Method

The jQuery nextAll() method gives back all next sibling components of the  component which we have selected. By using nextAll() method we can select  all the  next siblings of the component which we have selected and then w...

is() method in jQuery

is() method: It is used to filter html elements by checking with selectorElement. It returns true if there is minimum one match from the given selectorElement or some other argument provided. Syntax: $(selector).is(selectorElement,func...

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...

on() method in jQuery

on() method: On() method is used to attach events to selected elements and also used to specify a function when the event occurs. It is similar to bind method but on() method also attach event handler to elements generated using script while b...

Hover() method in jQuery

Hover() method: This method is used to perform some changes on mouse over and mouse out for html elements. It requires two parameters which are as follows: over −This function triggers when the mouse is moved over a matched element...

Create Moving Marker Functionality on Google Map with jQuery and HTML

How to move markers on a google map api without clicking on any object ? The above can be achieved with simple logic . ie update the marker position after a particular time ( Let say 1 second in our example ) The following HTML and jquery c...

jQuery next() Method

The jQuery next() method gives back the next sibling components of the  component which we have selected. By using next() method we can select  the  next siblings of the component which we have selected and then we can use ...

Jquery Chaining

jQuery - Chaining  In general terms, An associated adaptable arrangement of metal connections utilized for affixing or securing items and pulling or supporting burdens is known as chaining.  In Jquery, Chaining mean...

Live() method in jQuery

live() method: Live method is used to attach events to selected elements and also used to specify a function when the event occurs. It is similar to bind method but live method also attach event handler to elements generated using script while...

jQuery siblings() method

The jQuery siblings() method gives back all siblings components of the  component which we have selected. By using sibling() method we can select all the siblings of the component which we have selected and then we can use them. Syntax...

How to create to-do list using jQuery?

In this blog, I am going to explain how to make a simple to-do list with the help of jQuery. The to-do list which we are going to create will contain an input box and an add button, so when we put our task to the input box and click the add butto...

eq() filtering in Jquery

It helps in reducing the set matched of elements in a form of the index. It is a zero based indexing. By zero-based indexing we mean that the indexing begins from zero. First, an element is indexed as zero and thus simultaneously indexing goes on...

Callback Function in jQuery

Callback Functions: It is used to prevent executing further code until earlier effects has not executed completely. As we know in jQuery effects takes time to complete and sometime next line code get executed while the earlier effects are stil...
prev 1 3 7
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: