Featured
-
How Regression Testing Detects Integral Errors In Business Processes
Humans are forever changing and evolving and so to
by kristina.rigina -
Get Display Banner Advertising Opportunity on FindNerd Platform
“Do you have a product or service that nee
by manoj.rawat -
Android O Released with Top 7 New Features for App Developers
Android was founded by Andy Rubin, Rich Miner, Nic
by sudhanshu.tripathi -
Top 5 Features That Make Laravel the Best PHP Framework for Development
Laravel is a free open source Web Framework of PHP
by abhishek.tiwari.458 -
Objective C or Swift - Which Technology to Learn for iOS Development?
Swift programming language is completely based on
by siddharth.sindhi
Tags
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...
Kendo UI : Creating a data grid
This series would be introducing simple examples of the widget along with the problems and the solutions that were used during execution of a project.
Kendo UI is a set library extended from Jquery developed and managed by Telerik.com.
It h...
How to Add/Remove multiple classes in Jquery
If you want to remove mutiple classes on click of a button:
HTML:
<div class="container">
<span class="class1 class2 class3"></span>
<button id="clear" type="button"></button>
</div>
JS:
$("#cl...
How to trigger an event using Javascript "addEventListener()" method.
Hello Readers,
Their are many ways in javascript and jquery where we can trigger an event using Id or Class. Here's the example of how we can trigger the event using "addEventListener()" method.
Let's suppose we have have button having id="...
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">...
Remove current label or input field in jquery
Hello,
I am writing the code through which we can remove particular label or input field on the click of delete button.It is mostly used when we have three or more forms user interface in our page.
To execute the piece of code please add j...
Making use of selectize.js for rich user experience
Ever needed something like tagging in your project if yes then we have the latest and most optimised jQuery based library which helps you in tagging, contact lists, country selectors, and so on.
The goal of this library is to provide with an e...
Things to know in javascript and jQuery
Difference Between this and $(this)?
They both refer to same element. This is used traditional sense but we add $ sign in jquery. When we use $(this), it become a jquery object.
Comparision between bind(), live() and delegate()?
Bind() and liv...
Jquery Animation
Jquery animate() method is used to animate any element in the web page. It allow us to create custom animations.The syntax for this:
$(selector).animate({params},speed,callback);
The parameters of animate() mehod are:
The params parameter de...
Jquery and WebMethods for AJAX calls
What is jQuery?
jQuery is a lightweight,JavaScript library (write less, do more). The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code ...
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 add list dynamically
This is very simple way to add list dynamically using jquery. In this first you have to give Id to select tag then add the script.
<html>
<select id="memoryCategories">
<option>Categories</option>
</select&...
Creating CSV from HTML using jQuery
In one of the project, I needed to create the CSV file from the html using jQuery.
To make this possible, I created the below code to convert the html into csv file using jQuery.
<script type="text/javascript" src="jquery.min.js"><...
Dynamic horizontal scroller
Hello All,
The following code will help you to make dynamic horizontal scroller. This means that on adding content or images the width of the container automatically increases using jquery.
If anyone wants to make horizontal scroller which is i...
How to export data to csv using javascript and jquery
Sometimes you face the problem to export the data into csv file using clientside platform. In this case you can use javascript and jquery.
Below is the code to find out the solution:
Javascript Code:
$(document).ready(function () {
...
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();
...
auto-fill drop-down options on basis of previous seclection
Following example illustrate filling state (province) drop-down on basis of country.
Drop-down HTML
<select id="countryDropBox">
<option value="">--Select Country--</option>
<option value="1">India</option...
jqGrid with asp.net MVC
To bind jqGrid with asp.net MVC please see below steps.
step 1: Download latest jqGrid from
http://olex.openlogic.com/packages/jqgrid/
http://www.trirand.com/blog/?page_id=6
step 2: Add downloaded folder into your project's Script fo...
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">
...
Method eq() in jquery
Description:
The eq ( index ) method reduces the set of matched elements to a single element or we can say that
find the element that matches or equals the index provided.
Syntax:
Here is the simple syntax to use this method:
selector.eq ( i...
How To Create A Simple Animation With The Help Of Jquery
Simple Animations With The Help Of Jquery
You can slide elements or any content of HTML and even stop animations in mid-sequence. To slide elements up or down.
$("#Element").slideDown("fast", function() {
// For slide down
...
What Are The Use Of after() and before() Methods In JQuery
**Use Of after() and before() Methods In JQuery**
The jQuery after() method inserts content AFTER the selected HTML elements.
And
The jQuery before() method inserts content BEFORE the selected HTML elements.
**Example**
$("p").after("S...
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...
Check file-size using jQuery without uploading file
A simple code snippet for checking the file-size of a file before uploading it. It will not only help to save time but also network resource as we can implement the file check at the initial point only.
The current code allows the user to sel...
Making Custom Select Box Using JQuery
While designing an HTML form, a lot of time there is a requirement of custom form elements. Below is a tutorial on how to create some nice custom select box with CSS and jQuery.
<div class="selectBox">
<div c...
Changing the Behavior of a Dialog Box with Effects
The options used when creating the dialog box can be modified by the dialog ("option", param, value) method. The param parameter is the name of the option, while the value corresponds to its new value.
lets change the effect for the opening and ...
Finding the Dimensions of an Element
You want to determine the space occupied by an element.
The width and height methods can be applied to any element, and they are useful for
determining the computed width or height of an element. However, they fall short if
you need to deter...
Finding the Dimensions of the Window and Document
You want to get the width and height of the window and document in pixels.
jQuerys width and height methods provide easy access to the basic dimensions of the window or document:
$(function() {
alert('Window height:'+jQuery(window).height(...
Preventing child element from firing on click of Parent element
Suppose, we have this html where div element have 2 child p elements and 1 child anchor element.
<div>
<p> I am para one</p>
<p> I am para two</p>
<a href="http:nowheretogo.com">I am a link<...
Adding and Removing Select Options
A drop-down box for colors and want to add new colors to it, as well as remove options from it.
<label for="colors">Colors</label>
<select id="colors" multiple="multiple">
<option>Black</options>
<option>...
Adding data to jqxtree dynimacally on click of nodes of a tree using AJAX call
There might be a case where user wants to add data to jqxtree on click of each individual node. Below is the code which help us to achieve the above
functionality where user can get data from JSON file or database on click of each individual tre...
Disabling All Effects
Your user or web application may require that all animations are disabled, but the effect of revealing information or scrolling (or whichever animation type) may still be required. jQuery has a way to disable all animations from one access point...
Delete a row from list on a click of a button
If you want to delete a particular list (li) from the listing, you can easily do this with the following code.
$('#demo ul li[rel="'+id2+'"]').remove();
<div is="demo ">
<ul>
<li rel="id1">This is just a demo....
Append tag using jQuery
If you want to append HTML in pre-defined HTML :
$("#detail").append('<div class="demo"><p class="modify">He has all the ability and a perfect attitude.</p></div>')
Forming Valid Query Strings in jQuery
The jQuery serialize()
method turns the form values into a valid querystring, as such you can simply append to the string:
firstName=Maurizio&lastName=Tarchini
Useful, right?
Lets take an example:
<p><em></em>...
Selecting a text field with name using JQuery
JQuery has loads of selectors that can be used to select an HTML Element from a page.
One of the common scenario with development for even a simple case of validation requires to check for input fields and to do so we can use a selector that s...
