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
Sample application using JQuery, Spring MVC @RequestBody and JSON together
See the below steps to create sample application using JQuery, Spring MVC @RequestBody and JSON :
1- Define dependency for Spring, JSON in pom.xml as below:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/...
How to Create a Responsive Image Slider in jQuery
By using jquery image slider plugin we can create Responsive Image slider .In below example, I am using rslider plugin.
Step-1. Link files
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
&l...
What is the difference between '@' and '=' in directive scope
'@' is used to send the property from parentScope to isolatedScope. By transfer, you are not able to change the property of parentScope that is being pass. It is called one-way binding.
If the binding property is a primitive type, like interpo...
How to check wether the checkbox is selected or not using jquery
"How to check wether the checkbox is selected or not using jquery"
While working in a project, I got stuck in the following issue.
This is the code I am using:
<input type="radio" name="optionsRadiosbillingmethod" id="optionsRadios1-b...
Error [jquery.form] terminating; zero elements found by selector jquery ajax image upload
If you are getting error while using the ajax uploading for an image and using jquery form.js script and getting the issue "[jquery.form] terminating; zero elements found by selector" .
Then for resolving this issue you have to avoid the neste...
Fetching JSON using angular JS
The controller defines a dependency to the $scope and the $http module. An HTTP GET request to the countries.json end point is carried out with the get method. It returns a $promise object with a success and an error method. Once successful, the ...
How to use upload files with JQuery
Here is the example for *How to use upload files with JQuery. *
If you having trouble with such issues, then use the below code.
Here is the HTML
<div class="flie-btn clearfix">
<input class="fileinput" type="file" name="d...
how to bind click event on dynamically created elements
Below is the example for how to bind click event on dynamically created elements.
If you having trouble with such issues, then use the below code.
Here is the HTML
<a href="#" class="button">Button</a>
<div class="lis...
Trigger function in JQuery
Trigger function has an interesting concept as it is used to execute all handlers and behaviors attached to the matched elements for the given event type.
For example, If I want to have a click event on a button without clicking, we can use this...
How to add mouseleave, mouseenter and click event using jQuery
Hello,
I want to change the image when entering and leaving mouse to it. But the image should stay there when clicked. I have an image attribute source that is replaced on mouse enter and mouse leave event. But image is also changing after ...
Ajax call using Javascript and JQuery
Ajax :
It is s process of getting or reteriving the content without refreshing the whole page.
We can do this using javascript and JQuery.
There are different method for ajax call in javascript and jquery.
Javascript :
<script...
Difference between attr() and prop() in JQuery
Many of us uses JQuery.attr() and JQuery.prop() and get the same result, as there is a small difference between the two.
Lets discuss it one by one.
JQuery.attr() :
It generates the value of an attribute for the first element in the set of m...
Select multiple elements with same ID using JQuery
ID's in HTML are generally used as unique identifiers for the elements present in the DOM but it is not a compulsion to have only one element with a unique ID, which means you can have multiple elements with the same ID.
JQuery selector $("#id...
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.<...
How to Get height width or element using Jquery
Hello reader's,
Below is the example for Getting height width or element using Jquery
If you having trouble with such issues, then use the below code to resolve such issues.
Here is the HTML
<button id="dummy-height">Get div Heigh...
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">
...
Jquery Chaining
Jquery Chaining:
Till now we know that Jquery statements are executed line by line i.e one line after the another, but there is a technique that allows executing multiple Jquery commands in a single line just one after ...
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...
jQuery Filtering
jQuery Filtering:
When we have to select a specific element out of various given elements filtering is required.
In Jquery there are some filtering methods divided into two groups:
1. Methods that s...
How to hide particular div with just one click?
Hi,
you want a condition in which the particular div, para or any other tag need to be disappear with just a single click see my code written in jquery as simplest.
<script>
$(document).ready(function(){
$("p").click(function()...
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...
