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

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...
1 5 7 next
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: