Various Technical Articles to learn JQuery with easy Examples

Element, ID and Class Selectors using JQuery with Example

Biswabhusan Panda — Thu, 29 Dec 2016 15:23:58 +0000

As you know Jquery is the advanced version of JavaScript. The library we use to implement Jquery is developed using pure JavaScript. Did you remember those days when Jquery in not introduced in Web Technology? During that period to do a Client-Side operation we depend upon JavaScript. Here if I will ask you to select an element from a HTML page using JavaScript, Then I know in replay you will show me those JS methods like GetElementByID or GetElementByName. Yes you are correct using these methods we can select HTML page element for Scripting.

The next generation of JavaScript, Jquery made simple the way to select an element from a HTML page. This technique in Jquery is called “Jquery Selectors”. Jquery Selectors are used to select HTML elements based on their name, id, classes, types, attributes and values of attributes. Looking into the structure of Document Object Model (DOM) Jquery Selectors are categories into 3 types.

The element Selector
#ID Selector
.Class Selector

Before Jump to discus more about the types of Jquery Selectors first let you know all selectors in Jquery start with a dollar sign followed by parentheses. Like $().

The element Selector

Element Selector in Jquery selects elements from a HTML document using the element name. For an example if in your HTML page there are 2 or more paragraphs you want to apply background-color for them, then this Selector is the best option. You can do like the below.

$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow");
});
});

#ID Selector

As you know in a HTML page elements ID is unique for each. During development we use ID to identify an element. The similar concept Jquery uses here. Using Jquery ID Selector you can select any single or unique element from a HTML page. To find an element with a specific ID, write a hash character, followed by the element ID as below.

$(document).ready(function(){
$("button").click(function(){
$("#myDiv").show();
});
});

Here myDiv is a Div declared inside the body tag of HTML.

.Class Selector

To maintain better look and feel CSS plays an Classical role over HTML. That’s why Class. A CSS Class is nothing but a block of Code which defines various styles for a HTML element. Let’s assume in my HTML page I have 10 div’s which are using same CSS Class. What the Customer wants is all those div’s with same Class name need to Fill red background Color. In such scenario Jquery Class Selectors are useful. To select an element from a HTML document Jquery Class Selector uses the Class name. To find an element with a specific Class, write a dot character, followed by the element CSS Class as below.

$(document).ready(function(){
$("button").click(function(){
$(".myDiv").hide();
});
});

Here myDiv is a Div declared inside the body tag of HTML.

Examples of jQuery Selectors

$(“*”) – Used to select all elements of a HTML page.

$(this) – Used to select the Current element.

$(“p.intro”) – Used to select all the paragraphs with Class name intro.

$(“p:first”) – Used to select only the first paragraph.

$(“[href]”) – Used to select all elements with an href attribute.

$(“a[target=’_blank’]”) – Used to select all elements with target attribute value equal to “_blank”.

$(“:button”) – Used to select all

Jquery AJAX Example for Load(), Get() and Post() methods

Biswabhusan Panda — Sun, 20 Nov 2016 15:33:58 +0000

AJAX stands for “Asynchronous JavaScript and XML”. AJAX technology helps for partial loading. Which improve the performance of a Web page. Example of few AJAX based web applications are YouTube, Gmail, Google Maps & Facebook tabs. If you are looking to implement AJAX using Jquery then you required to know Jquery inbuilt AJAX methods. Using these methods you can request HTML, JSON, XML & TEXT based Files data from a remote server. In below let us discuss more about the most frequently used jQuery AJAX example using Load(), Get() & Post() methods.

What is jQuery AJAX?

jQuery AJAX is a set of methods provided by the jQuery library to perform asynchronous HTTP (Ajax) requests. It abstracts the complexities of raw JavaScript AJAX calls, providing a simpler and more efficient way to interact with web servers. By leveraging jQuery AJAX, developers can fetch, send, and manipulate data without requiring a full page reload, leading to a smoother user experience.

Key Features of jQuery AJAX

1. Simplified Syntax – jQuery’s AJAX methods reduce the amount of code needed compared to vanilla JavaScript.

2. Cross-Browser Compatibility – Handles browser inconsistencies, ensuring consistent behavior across different platforms.

3. Support for Multiple Data Formats – Works with JSON, XML, HTML, and plain text.

4. Event Handling – Provides success, error, and completion callbacks for better control over requests.

5. Asynchronous and Synchronous Requests – Allows both async (default) and sync operations.

load() Method

Jquery AJAX Load() method is simple and powerful. It is easy to implement but using this method you can do much complex jobs easier. We use load method to fetch data from server and can bind those data to HTML elements. Syntax for load method is as below.

Syntax: $(selector).load(URL,data,callback);

Jquery AJAX load method accepts 3 parameters URL, data & callback. URL is nothing but the physical file path of the file you want to load. Rest 2 parameters are Optional. Data parameter comes with Key & Value pair. It passes through the request as querystring. Callback parameter is the name of a function which you want to execute after the load() method is completed.

Example:

$("#div").load("employee_details.txt");

employee_details.txt

AJAX using Jquery

This is sample text in a paragraph.

$.get() Method

As you know in client server architecture we use Get method to fetch data from the server. In Jquery $.get() method we use with HTTP GET request. Syntax for Jquery Get method is as below.

Syntax: $.get(URL,callback);

Jquery $.get() method accepts 2 parameters URL & Callback. URL is the file path from which you want to read the data. Callback is the parameter of a function name which you want to execute after the sucessful Call.

Example:

$("button").click(function(){
$.get("employee_details.asp", function(data, status) {
alert("Records: " + data + "\nStatus: " + status);
});
});

employee_details.asp

<%
response.write("This is some text from an external ASP file.")
%>

$.post() Method

Like Get method Post is one more useful method of Client Server architecture. Using Post method we send data to Server from Client. Syntax for Post method is as below.

Syntax: $.post(URL,data,callback);

Jquery $.post() method accepts 3 parameters URL, Data & Callback. URL is the server file to which file you want to post data from Client end. Rest 2 parameters are optional. Using data parameter you can send any data in key value pair while sending request to the server. The optional callback parameter is the name of a function to be executed if the request succeeds.

Example:

$("button").click(function(){
$.post("sample_post.asp",
{
empname: "Raghav",
city: "Washigton DC"
},
function(data, status){
alert("Records: " + data + "\nStatus: " + status);
});
});

sample_post.asp

<%
dim f_name, city
f_name = Request.Form("empname ")
city = Request.Form("city")
Response.Write("Dear " & f_name & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

Common Use Cases of jQuery AJAX

1. Form Submission Without Page Reload – Submit form data asynchronously and display a success/error message.

2. Dynamic Content Loading – Load partial HTML or data from a server on demand.

3. Autocomplete Suggestions – Fetch suggestions from a server as the user types.

4. Real-Time Data Updates – Poll the server periodically for new data (e.g., notifications).

5. API Integration – Communicate with RESTful APIs to fetch or modify data.

Best Practices for jQuery AJAX

1. Use HTTPS for Security – Always prefer secure connections to prevent data breaches.

2. Validate Input and Output – Sanitize data to avoid security vulnerabilities.

3. Handle Errors Gracefully – Provide user feedback if a request fails.

4. Optimize Performance – Minimize unnecessary requests and cache data when possible.

5. Use Asynchronous Mode – Avoid synchronous requests as they block the UI.

Limitations of jQuery AJAX

– Dependence on jQuery – Requires the jQuery library, increasing page load time.
– Not a Replacement for Modern APIs – Fetch API and Axios offer more modern alternatives.
– Limited to HTTP/HTTPS – Cannot handle WebSocket or other protocols.

Conclusion

jQuery AJAX simplifies asynchronous web communication, making it an essential tool for developers building dynamic web applications. By understanding its methods, handling responses effectively, and following best practices, developers can create seamless, interactive experiences.

The post Jquery AJAX Example for Load(), Get() and Post() methods appeared first on OneStop Shop.

Example of Simple Responsive Jquery Range Slider using Jquery UI

Biswabhusan Panda — Wed, 27 Jul 2016 17:04:19 +0000

Generally we use range slider during we decide a specific range of value to input the system. For an example in a shopping cart application if you want to find out all dress materials with in your budget ($100 to $300) in such case range slider is very useful. To develop a responsive range slider from scratch is a time consuming job. Looking into this Jquery UI provides in-built Jquery range slider. It’s very easy and less time consuming job to implement in your application.

Look at the demo app below. Here in my HTML page I have 2 div’s. One is displaying range slider selected values while other one is responsible for Jquery UI slider. To integrate Jquery UI in the below app I referred Jquery library, Jquery UI CSS & Jquery UI CDN links.

To implement range Slider

To implement range Slider I am applying Jquery UI in-built slider method to the div with id rangeSlider. To Configure my range Slider according to my inputs here I passed various parameters such as range, min, max & values. By declaring range: true I am telling Jquery UI slider to provide me a range based Control. Using min & max I am assigning the minimum and maximum value for the range Slider. Values are nothing but the initial range. Here my slider is showing range from 100 to 600 dollars. Initial during after page load by setting values to 200 to 400 I am showing the slider range in-between 200 to 400 dollars. For more API functions like Orientation or Slide you can refer http://api.jqueryui.com/slider/.

This Jquery range slider is designed by Jquery UI. It is completely browser compatible and supports all modern browsers. Even you don’t need to worry about it’s responsiveness. Independent of all devices this range slider works fine. To the run the below app just copy the codes to a notepad file. Save it as a html file & open in your browser. As in the below app we are referring CDN links make sure while running the app you are with internet connectivity.

Example.htm




Responsive Jquery range slider






Selected Range:

jQuery Range Slider Using jQuery UI

Range sliders are essential UI components that allow users to select a value or range of values within a specified minimum and maximum limit. They enhance user interaction by providing a visual and intuitive way to input data. jQuery UI, a popular library built on top of jQuery, provides a simple yet powerful way to implement range sliders with minimal coding.

Understanding jQuery UI Slider

The jQuery UI Slider widget converts a standard HTML element into an interactive slider. It supports single handles for selecting a single value or multiple handles for defining a range. The slider can be customized in terms of appearance, behavior, and functionality, making it suitable for various applications such as price filters, volume controls, and data visualization.

Key Features of jQuery UI Slider

1. Customizable Range – Define minimum and maximum values.
2. Single or Dual Handles – Choose between a single slider or a range slider.
3. Step Increments – Set predefined intervals for slider movement.
4. Smooth Animation – Enable or disable sliding animation.
5. Event Handling – Respond to user interactions like sliding, start, and stop.
6. Theming – Apply jQuery UI’s built-in themes or custom CSS.

Best Practices

1. Accessibility – Ensure keyboard navigation and ARIA attributes for screen readers.
2. Responsive Design – Adjust slider dimensions for different screen sizes.
3. Performance Optimization – Avoid heavy computations in event handlers.
4. Fallback Mechanism – Provide an alternative input method for non-JavaScript users.

Conclusion

The jQuery UI range slider is a flexible and user-friendly component that enhances web applications by providing an intuitive way to select values. With its extensive customization options and ease of implementation, it remains a preferred choice for developers. By following best practices and leveraging advanced features, you can create interactive sliders that improve user experience across various use cases. The ability to integrate smoothly with existing JavaScript code makes it a valuable tool in modern web development.

The post Example of Simple Responsive Jquery Range Slider using Jquery UI appeared first on OneStop Shop.

Simple responsive Jquery image Slider without using any plugin

Biswabhusan Panda — Mon, 04 Jul 2016 15:44:38 +0000

To display multiple images under a specific area generally we use controls like Carousel or Slider. It was noticed these Control majorly appears in main page. Here in the below app I am creating an easily configurable jQuery image Slider. To show you the demo here I am with 3 files index.htm, slider.js and main.css. Slider.js and main.css embedded in index.htm file. By simply copying the below files you can create your own free Jquery Slider.

The logic I implemented here is so simple. In my HTML page I have 2 div’s. One is for slider images and the other one I am using for Auto Slide Show. In my first div I have a ul element. Under this in each li I am loading images using simple image tag from HTML. To customize my Jquery image slider better here I added 2 anchor tags for next and previous actions.

To maintain a healthy look and feel I have few CSS classes in style.css file. As it is a simple jquery slider the main logic is inside the js file. In js file I am with 4 variables. IndivisualSlideWidth and IndivisualSlideHeight are storing li width and height. NumberOfSlides storing total number of images I want to show in Slider. In TotalWidthOfAllSlides I am calculating and storing the total width of UL element. During slide show I am hiding the total length and showing each slide independently. After this in my js file I have 2 functions moveSlideLeft() and moveSlideRight(). These function are responsible for slides movement. To configure auto slider option under on change event of autoOptionCheckbox I am calling the moveSlideRight() function. Here for interval between each slide I declared 5000 milliseconds.

Jquery image Slider Sample Code

jquery-slider.htm




Simple JQuery image Slider







JQuery image Slider

>>
<<





  



Auto Slider Option

slider.js

$(document).ready(function () {

/* The below two variables are defined for width and height of Slides */
var IndivisualSlideWidth = $('#jq_slider ul li').width();
var IndivisualSlideHeight = $('#jq_slider ul li').height();

/* The auto Slider Function */
$('#autoOptionCheckbox').change(function(){
/* Defining time in milliseconds for auto Slider option */
setInterval(function () {
/* Calling the Function to rotate Slides */
moveSlideRight();
}, 5000);
});

/* Counting the Number of Slides */
var NumberOfSlides = $('#jq_slider ul li').length;

/* Calculating all Slides width for UL element */
var TotalWidthOfAllSlides = NumberOfSlides * IndivisualSlideWidth;

/* Setting width and height for main div */
$('#jq_slider').css({ width: IndivisualSlideWidth, height: IndivisualSlideHeight });

$('#jq_slider ul').css({ width: TotalWidthOfAllSlides, marginLeft: - IndivisualSlideWidth });
$('#jq_slider ul li:last-child').prependTo('#jq_slider ul');

/* This Function is responsible for moving Slide to left */
function moveSlideLeft() {
$('#jq_slider ul').animate({
left: + IndivisualSlideWidth
}, 300, function () {
$('#jq_slider ul li:last-child').prependTo('#jq_slider ul');
$('#jq_slider ul').css('left', '');
});
};

/* This Function is responsible for moving Slide to right */
function moveSlideRight() {
$('#jq_slider ul').animate({
left: - IndivisualSlideWidth
}, 300, function () {
$('#jq_slider ul li:first-child').appendTo('#jq_slider ul');
$('#jq_slider ul').css('left', '');
});
};

/* Handling previous Click Funtionality */
$('a.go_prev').click(function () {
moveSlideLeft();
});

/* Handling next Click Funtionality */
$('a.go_next').click(function () {
moveSlideRight();
});
});

main.css

Using CSS style here I am applying style to my slider ul li elements plus adding hover effects.

html, body { margin: 0; padding: 0; font-family: 'Verdana'; background: #c8fcff; color: #000; }
h2 { text-align: center; }

#jq_slider { position: relative; overflow: hidden; border-radius: 6px; margin: 20px auto 0 auto; }

#jq_slider ul { position: relative; margin: 0; padding: 0; list-style: none; }
#jq_slider ul li { position: relative; display: block; width: 700px; height: 350px; text-align: center; float: left; margin: 0; padding: 0; }

a.go_prev, a.go_next { position: absolute; z-index: 999; top: 40%; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #FFF; text-decoration: none; opacity: 0.7; cursor: pointer; font-weight: normal; font-size: 16px; }
a.go_prev:hover, a.go_next:hover { opacity: 0.9; -webkit-transition: all 0.2s ease; }
a.go_prev { border-radius: 0 3px 3px 0; }
a.go_next { border-radius: 3px 0 0 3px; right: 0; }

.auto_slider { margin: 10px auto; position: relative; font-size: 16px; width: 180px; }

Images for Jquery Slider

The following 4 images are used in the above demo app. You can download and try.

Slide-A.jpg

Slide-B.jpg

Slide-C.jpg

Slide-D.jpg

The post Simple responsive Jquery image Slider without using any plugin appeared first on OneStop Shop.

Convert HEX to RGB & RGB to HEX Converter Jquery Functions

Nibedita Panda — Sun, 15 May 2016 17:09:12 +0000

Whether in Web or Desktop application during we design a Color Picker we required Color Converter functions. Basically in the world of web we use 2 types of Color Codes. They are RGB and Hexadecimal (HEX). In this demo for your reference let us share “Convert HEX to RGB” & “RGB to HEX Converter” Jquery Functions.

RGB

RGB Color model stands for Red, Green and Blue Colors. Generally if you will watch the back view of a Color TV there you can saw 3 rays from CRT. Which hits phosphors or dyes to display the Colors. In RGB color model 0 intensity gives the most darkest color & full intensity presents white. To generate colors like Yellow we controls intensity of 3 rays (RGB). Type of RGB Devices are TV, Computer, Video Cameras or Scanners.

Hexadecimal (HEX)

Hexadecimal Color Code is also Called base 16 or HEX. Hexadecimal uses 0 to 9 integer or A to F Character values. While writing a Hexadecimal Color code we start with #. Example of Hexadecimal Color Code for White Color is #FFFFFF. It can be present in another way #FFF. Hexadecimal commonly used to represent Computer memory.

Look at the below examples. Here I created 2 JQuery functions “RGB to HEX” and “HEX to RGB”. Inside the function RGB to HEX I am using regular expression.

RGB to HEX Converter Jquery Function

/* RGB to HEX using Regular Expression */
function rgbToHexadecimal(rgb_color){
rgb_color = rgb_color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb_color && rgb_color.length === 4) ? "#" +
("0" + parseInt(rgb_color[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb_color[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb_color[3],10).toString(16)).slice(-2) : '';
}

Convert HEX to RGB Jquery Function

function hexadecimalToRGB(hex_color)
{
var red_color = parseInt((onlyHex(hex_color)).substring(0,2),16), green_color = ((onlyHex(hex_color)).substring(2,4),16), blue_color = parseInt((onlyHex(hex_color)).substring(4,6),16)
return red_color + ',' + green_color + ',' + blue_color;
}

/* Supporting Function */
function onlyHex(hex_color) {return (hex_color.charAt(0)=="#") ? hex_color.substring(1,7):hex_color}

The post Convert HEX to RGB & RGB to HEX Converter Jquery Functions appeared first on OneStop Shop.

JQuery String Functions (Replace, Substr, IndexOf, lastIndexOf, Substring, …)

Nibedita Panda — Sun, 15 May 2016 08:04:48 +0000

Strings are a fundamental data type in programming, and manipulating them efficiently is crucial for web development. jQuery, a fast and concise JavaScript library, simplifies string operations by providing built-in methods and utilities. While jQuery itself does not introduce new string functions, it leverages JavaScript’s native string methods and enhances DOM manipulation, making string handling more intuitive. This article explores common string operations in jQuery, their applications, and best practices.

I remember those day when I am a fresher to programming. To complete my assignments related to string operations I always take help from Google. Sometime to find out a Syntax or Sometime for an Examples. In my view string operations are little bit confusing to freshers. During programming there are several possibilities to do with a string. Some of them are String Concatenation, Finding the position of a Character in a String, Split or retrieve few part of the String.

Let me explain a senario here where you need string operation. Assume from your database you are fetching product descriptions for each products in a HTML page. During this you don’t want to show whole the product description texts. As per the customer you need to show first 40 charecters from product description string. In this case you need to go for string operations using string functions like substr or substring to extract a part of the string.

List of JQuery String Functions

In this session for beginner of Jquery to make their journey easier I am explaining all the Jquery String Functions in details. The programming language I used here is Jquery. But keep remember theoretically fundamentals of String Operations are same for all languages. In implementation only Syntax’s are differ.

charAt(n)

In a String array to know the Character of a specific index we use charAt() function. Let’s take an example you have a string “THIS IS A TABLE.”. In this String if I want to know the Character of index 3 charAt() function can did that. Look the example below.

var myStr = "THIS IS A TABLE.";
var ch = myStr.charAt(3);

Output will be : S

charAt() function accepts integer value as the param & returns String Character. charAt(n) calculates index starting from 0.

String Function charCodeAt(n)

charCodeAt() works similarly like chatAt() function. The only difference is while charAt() returns Character of a specific index charCodeAt() returns Unicode of the Character. Look at the example below.

var myStr = "THIS IS A TABLE.";
var ch = myStr.charCodeAt(1);

Output will be : 72

72 is the Unicode for Capital H. charCodeAt() accepts integer as the param & returns Unicode value.

concat(string1, string2, .., stringN)

String Concatenation is a very common used String operation. Let’s take a case where in two variables you are getting name of a person. First Name & Last Name. In this case to display the whole name we required to do string Concatenation operation. Look at the example below.

var strFirstName = "Biswabhusan ";
var strLastName = "Panda";
var wlcmMsg = "You are welcome!";
var ch = strFirstName.concat(strLastName, " ", wlcmMsg);

Output will be : Biswabhusan Panda You are welcome!

Using Jquery concat() method (Originally derived from JavaScript ) you can concatenate n number of strings. This method accepts n number of strings as parameters. To apply this method choose the first string variable & then concatenate others.

fromCharCode(n1, n2, …, nX)

Refer to the method name fromCharCode() it Converts Unicode value to Character. This is a static method of String object. To use this method you can use String.fromCharCode(). Look at the example below.

var ch = String.fromCharCode(67);

Output will be : C

This function accepts n number of Unicode values.

String Function indexOf(searchvalue, [start])

indexOf() method returns the position of a specific value in a string. It return -1 if the value not found in string. While checking the value in string this method considers uppercase & lowercase characters. Using this method we can know whether a specific word exist in the string or not. Look at the example below.

var myStr="Hello, You are welcome to the my blog.";
var ch=myStr.indexOf("welcome");

Output will be : 14

indexOf() accepts 2 parameters. First parameter is the keyword you want to search in the string. Second parameter is from which index you want to search rest of the string. By default this is 0. 0 means you are searching the string from the beginning.

lastIndexOf(searchvalue, [start])

lastIndexOf() method work in similar fashion of indexOf() method. The only difference is it shows the searched value position at the last occurrence of the string. For an example if in a String “welcome” appears two times lastIndexOf() method returns the 2nd occurrence of welcome. If searched value not exist in the string it returns -1. This is case sensitive. Welcome is not equal to welcome. While returning the index it counts from the beginning of the string.

var myStr="This is Biswabhusan Panda, You can only Call Biswabhusan.";
var ch=myStr.lastIndexOf("Biswabhusan");

Output will be : 44

lastIndexOf() accepts 2 parameters like indexOf() method. First parameter is the keyword you want to search in the string. Second parameter is from which index you want to search rest of the string. By default this is 0. 0 means you are searching the string from the beginning.

substr(start, [length])

substr() string function used to retrieve part of a string. This function accepts 2 parameters start & length in integer value. Start says from which index you want the part of the string. Length is the number of characters you want from the start index. Let’s take an example. I have a string “My Car is blue.”. In this string if I am applying substr(2, 3) it will return Car.

var myStr="My Car is blue.";
var ch=myStr.substr(2, 3);

Output will be : Car

Popular String Function substring(from, [to])

substring() works similarly like substr(). But while substr() accepts Start & Length as the parameters substring() accepts From & To. From is the index from which you want your part of the string. To is the index upto which you want to retrieve in part of the string. Let’s take the same example as shown in substr. You can see the difference while substr(2, 3) return “Car” substring(2, 3) will return “C”.

var myStr="My Car is blue.";
var ch=myStr.substring(2, 3);

Output will be : C

toLowerCase()

toLowerCase() converts uppercase letters to lowercase. If in a string you have mix of upper & lower case letter this function will return that string in lowercase only.

var myStr="Biswabhusan";
var ch = myStr.toLowerCase();

Output will be : biswabhusan

toUpperCase()

toUpperCase() converts lowercase letters to uppercase. If in a string you have mix of upper & lower case letter this function will return that string in uppercase only.

var myStr="Biswabhusan";
var ch = myStr.toUpperCase();

Output will be : BISWABHUSAN

match(regexp)

match() function accepts regular expression & returns the matches as an Array Object. Look at the example below.

var myStr="The rain in SPAIN stays mainly in the plain";
var ch=myStr.match(/ain/g);

Output will be : ain, ain, ain

replace(searchvalue, newvalue)

replace() function is one more very useful function of string operation. In-case in a string if you want to replace some characters with another characters this function helps. It accepts 2 parameters. First parameter is the search value & second parameter is the replacement for search value. Look at the example below.

var myStr="This is an awesome Blog.";
var ch = myStr.replace("awesome ","interesting ");

Output will be : This is an interesting Blog.

search(searchvalue)

search() method help to search a specific value in a string. If search value exists in the string it returns the index or else if string doesn’t contain the value it returns -1.

var myStr = "Welcome to my Blog!";
var ch = myStr.search("my");

Output will be : 11

slice(start, [end])

slice() method extract part of the string in a new string. It accepts 2 parameters start & end. Depending upon start & end value it returns the new string.

var myStr = "Visit Jquery Blog!";
var n = myStr.slice(6, 12);

Output will be : Jquery

String Function split(separator, [limit])

split() method used to divide a string from a specific character. It returns sub-strings in array. Split method accepts 2 parameters. Separator & limit. In separator if you use empty char “” it will divide all characters individually as a sub-string. Limit is always an integer value which specifies the number of splits.

var myStr = "How are you doing today?";
var arr = myStr.split(" ",3);

Output will be : How,are,you

Best Practices

1. Use Native JavaScript Methods – jQuery does not replace JavaScript’s string functions.
2. Sanitize Inputs – Prevent XSS by escaping user-generated content.
3. Optimize Loops – Avoid excessive string operations in loops.
4. Leverage ES6 Features – Use template literals for cleaner code.

Conclusion

jQuery enhances string manipulation by simplifying DOM interactions, but it relies on JavaScript’s native string methods. Understanding these functions—such as `substring()`, `trim()`, and regex—enables efficient text processing in web applications. By combining jQuery’s DOM utilities with JavaScript’s string capabilities, developers can build dynamic, user-friendly interfaces. Mastering these techniques ensures robust and maintainable code for modern web development.

The post JQuery String Functions (Replace, Substr, IndexOf, lastIndexOf, Substring, …) appeared first on OneStop Shop.

How to Create your Own Jquery Custom plugin using $.fn?

Nibedita Panda — Sun, 15 May 2016 07:24:41 +0000

In programming reuse of codes is a best practice. If the similar functionality you are going to use several times in an application it is suggested to create a common function. Modular approach saves programmers time, easy to maintain, debug as well as help to improves performance of application. The above concept in JQuery is called Plugin. In this session let us explore How to Create your Own Jquery Custom plugin.

Example of Jquery Custom plugin

$.fn.bgcolor = function() {
this.css("background-color", "#00FF00");
};
 
$("div").bgcolor();

Refer to the above example here I created a function bgcolor. Inside this function I am updating background color. To implement this after selector you just need to put a dot & the method name. As a advice if you are looking to create your own plugin related to trigonometry calculations, first create a js file with suitable name & there using $.fn add your required functions one by one. This method saves time as well as easy to debug.

Chaining

During development sometimes we required to implement 5 to 6 methods for one selector. In this case return this; statement is useful. To make your plugin more friendly with real world it is better to add return this; statement at the end of your functionalities. Look at the example below to know how Chaining works in JQuery.

$.fn.bgcolor = function() {
this.css("background-color", "#00FF00");
return this;
};
 
$("div").bgcolor().addClass("updateBgColor");

Protecting the $ Alias

$ is a common used variable in JQuery. Some time it conflicts with other libraries. To avoid this while writing your own JQuery plugin keep remember to use like the following example.

(function ( $ ) { $.fn.bgcolor = function() {
this.css("background-color", "#00FF00");
return this;
}; }(jquery));

Minimizing repetition of $.fn in your Plugin

To improve performance of your own plugin it is better to reduce repetition of $.fn as much as you can. Let’s talk about the below example here from you can know how to avoid unwanted $.fn.

(function($) {
$.fn.whileTrue = function() {
// To Do stuffs while True.
};
$.fn.whileFlase = function() {
// To Do stuffs while False.
};
}(jquery));

Compare to above it is more better to use the following.

(function($) {
$.fn.WhileAction = function(action) {
if (action === "True") {
// To Do stuffs while True.
}
if (action === "False") {
// To Do stuffs while False.
}
};
}(jquery));

Use each() Method

While writing your own plugin if you want to do any manipulating with specific elements then prefer to use .each() to loop through the elements. Look at the example below.

$.fn.myPlugin = function() {
return this.each(function() {
// To Do something for each element here.
});
};

The post How to Create your Own Jquery Custom plugin using $.fn? appeared first on OneStop Shop.

JQuery Treeview example using HTML Ul li elements

Nibedita Panda — Sat, 14 May 2016 12:22:09 +0000

To display large number of data we prefer to use Treeview. Let’s take an example where we want to show all those countries & their respective states where we have our customers. In the below jQuery Treeview example I implemented the Same. This Treeview is simply created using Jquery. Using this Treeview you can show any level of data in hierarchy manner.

Jquery is an advanced programming language. For a Jquery professional it is very simple to create a Treeview. Look at the example below here I used only 5 to 6 lines of codes to create a Treeview. The logic I implemented here is so straight forward. In HTML I have ul & li elements which represents data for my Treeview. UL elements inside li elements are sub nodes. Using Jquery document.ready method initially I am tracking all the li elements & inside the li elements which ul elements length is greater than zero I am adding a class “node” for them.

Introduction to jQuery Treeview

A treeview is a hierarchical data structure that organizes elements in a parent-child relationship, resembling the branches of a tree. In web development, jQuery Treeview is a popular plugin that simplifies the creation and management of interactive tree structures. It allows users to expand, collapse, and navigate through nested items efficiently.

Key Features of jQuery Treeview

1. Dynamic Loading jQuery Treeview supports dynamic loading of nodes, enabling efficient handling of large datasets. Only the necessary nodes are loaded when expanded, reducing initial page load time.

2. Customizable Appearance Developers can easily customize the tree’s appearance using CSS. Icons, colors, and spacing can be adjusted to match the website’s design.

3. Interactive Controls Users can expand and collapse nodes with a single click, making navigation intuitive. Some implementations support drag-and-drop functionality for reordering nodes.

4. Ajax Support The plugin can fetch data asynchronously from a server using Ajax, ensuring seamless updates without full page reloads.

5. Event Handling jQuery Treeview provides event callbacks for actions like node selection, expansion, and collapse, allowing developers to trigger custom functions.

Then in the next loop I am detecting the li elements with class “node” and for their anchor tags click event binding toggle class “active”. To show the expand & collapsible feature smooth I used slideToggle with slow.

JQuery Treeview Example




JQuery Treeview example






Pakistan

Faisalabad
Karachi
Gujranwala


India

Odisha

Bhubaneswar
Cuttuck
Balasore

Balasore Golei
MPC College Road
FM University Road




West Bengal


Nepal

Kathmandu
Bharatpur

Treeview CSS Styles for Ul li elements

ul, #myUL { list-style-type: none; }
#myUL { margin: 0px; padding: 0px; }
.box { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.box::before { content: "\2610"; color: black; display: inline-block; margin-right: 7px; }
.check-box::before { content: "\2611"; color: lightblue; }
.nested { display: none; }
.active { display: block; }

Common Use Cases

1. File Browsers – Navigate directory structures.
2. Navigation Menus – Create multi-level dropdown menus.
3. Data Organization – Display hierarchical data like categories or organizational charts.

Best Practices

– Optimize Performance
– Use lazy loading for large trees.
– Ensure Accessibility – Add ARIA attributes for screen readers.
– Test Cross-Browser Compatibility – Verify functionality across browsers.

Conclusion

jQuery Treeview is a versatile tool for creating interactive, hierarchical structures in web applications. Its ease of customization, dynamic loading capabilities, and event-driven architecture make it a preferred choice for developers. By following best practices, you can implement efficient and user-friendly treeviews that enhance navigation and data organization. Whether for file browsers, menus, or data visualization, jQuery Treeview simplifies complex hierarchies with minimal code.

The post JQuery Treeview example using HTML Ul li elements appeared first on OneStop Shop.

Example of JQuery Slideshow using Images with Description

Nibedita Panda — Sat, 14 May 2016 10:13:22 +0000

Slideshow is very useful for fancy websites. Recently I worked for a Bollywood portal. There I have to show top 10 actresses of Bollywood with little description about them. I did this using JQuery. Here to show you the demo I used only 3 images (Image-A.png, Image-B.png & Image-C.png). Resolution for these images are 500 x 257. You can customize the below code as per your requirements. If you are changing size of images you just need to update related CSS classes.

Technically speaking to implement JQuery Slideshow is very easy. Refer to the below example after HTML & CSS i wrote a small Jquery function. In side the function I am tracking each slide & storing them to a temporary div. To move the slides I have the updatePosition() function which called in each 3 seconds using setInterval();

To show description with image in this demo I added one transBg.png image which will show you the transparent background over each slide. In HTML for each slide I have div with the class eachSlide. In side this I have image & one more div for description. To set margin for description here I used paragraph inside the description div. You can add any kind of HTML in this div as your description.

To run this example Copy the following code to a file jquery-slideshow.htm. Then save the below 4 images in the same folder & Run. Keep remember in this demo I used Jquery CDN link.

JQuery-Slideshow.htm



Example of JQuery Slideshow











From the heart beats of Millions, You are going to read about the Queen of Bollywood. The real name Katrina Turquotte...



From our recent study we found Sunny Leone as one of the most searched actress from Film Industry...



Priyanka Chopra is an Indian Celebrity. She was born on 18th July 1982 at Jamshedpur...

Images

transBg.png

Image-A.png

Image-B.png

Image-C.png

The post Example of JQuery Slideshow using Images with Description appeared first on OneStop Shop.

Simple Jquery Carousel without using any third-party plugin

Nibedita Panda — Sat, 14 May 2016 10:10:41 +0000

To display number of images with independent captions Carousel effect helps a great. Recently I worked for a shopping cart application which is used by more then 22 global costume manufactures of America. During I designed their landing page few Customers suggested me to use Carousel effects. They want to display their Fashion weeks top models with two lines of text in each slide. According to forward & backward button slides need to scroll horizontally. My Customers knows that I am an expert in Jquery. When I ask them can I use free plugins to implement Carousel? Simply they said “No, please design a Simple jQuery Carousel.”. I did that and presenting the same codes here. Only in place of images here I am using 14 slides with Alphabets to identify each. You can update them as per your requirements.

The logic I implemented in the below example is very simple & straight forward. To keep each slide independent here I used HTML ul & li elements. Total I have 14 slides named as A, B, C, …, M, N. Including this in body I have 2 more links Backward & Forward. Intention of these two links are when user will click on backward link it will show the slides available in left side & on click of forward button it will show the right side slides. After slide A slide N will show like a Circular Order.

To control width, height & color here I used CSS. Slide movement Logic is implemented in Jquery. On click of each link I am updating the CSS left property value for last item.

Simple-Jquery-Carousel.htm




Simple Jquery Carousel Slider





Backward
Forward


A
B
C
D
E
F
G
H
I
J
K
L
M
N

The post Simple Jquery Carousel without using any third-party plugin appeared first on OneStop Shop.

Example of Simple Accordion Jquery menu without using Jquery UI

Nibedita Panda — Sat, 14 May 2016 10:09:19 +0000

In some scenario we required to design expand & collapsible control using pure Jquery. Let’s assume the application for which we are going to design Accordion is not using Jquery UI. Jquery UI is having its own in-build Accordion function. Using this it is a line of code to implement accordion. In this example let me show you how to create an accordion Jquery menu without using jQuery UI library.

In the below example I have 4 div’s. Div id’s with header-A & header-B are the header tabs for my accordion. On click of this headers I need to show the body-A & body-B div’s respectively. Referring a Jquery CDN library here inside the document.ready() method initially I am hiding all the body div’s. Then on click of each header div I am checking whether the respective body div is visible or not. If the div is hidden then I am applying Jquery show method to display the relative body div. If the div is visible then I am hiding the respective body div. To make the accordion collapse & expand features smooth I used slow as a parameter to show() & hide() methods.

Accordion-Jquery.htm




Example of Simple Accordion Jquery menu





About our Company
Welcome to Vijayshanti Infotech. We are a group of highly experienced professionals working together to make your web better.
Service we Sale
We do provide Responsive Web Application Development, Fancy Web Designing, Graphics, High-end Search Engine Optimization & Digtal Marketing.

The post Example of Simple Accordion Jquery menu without using Jquery UI appeared first on OneStop Shop.

CSS based Jquery vertical menu with Submenu Example

Nibedita Panda — Sat, 14 May 2016 08:18:32 +0000

During web designing to make navigation better we do implement menu system. Generally there are two type of menu Horizontal menu & Vertical menu. Horizontal menu’s are place in header or footer while vertical menu can placed aside the content pan. In this example I designed a jquery vertical menu for my Corporate website. It has tabs like Home, About Us, Service, News & Career. This menu is designed using JQuery & CSS. You can easily configure it as per your requirements.

To design this menu I added UL element in HTML. All the tabs are place in side ul > li. Sub menu’s are places with nested ul element inside the corresponding li element. During click to expand sub-menus I used JQuery. To select ul & li elements I used CSS selector in JQuery. Using a toggle function I am adding & replacing the class ‘enable’. While the class enable is added to li element, sub-menu for that node is getting visible. Initial all sub-menu’s are hided.

To run this example, Copy the below file vertical.htm & open with your browser. Here I used JQuery CDN link. Make sure you are running this example in presence of internet. For off-line version please replace the JQuery CDN link with local reference.

jquery-vertical-menu.htm




Vertical Menu with Sub-Menu using JQuery & CSS






Home

About Us

Our Mission
Technology
Success Stories



Services

CMS
UI Designing
Logo Designing
WordPress
SEO Optimization


News
Career

The post CSS based Jquery vertical menu with Submenu Example appeared first on OneStop Shop.

How to Open JQuery Modal Popup with disabled Parent Window?

Biswabhusan Panda — Fri, 13 May 2016 18:14:16 +0000

Modal Window is like a Popup but During Modal Window parent window get disabled. Many times during Application development we required a modal window. Let’s take an example I want to draw table on click of a button. In this case when user will click on create table button I need to show a modal window where user will provide number of rows & columns. Depending upon these values I need to draw a HTML table. Jquery Modal Window is a client side functionality. It can be done using Advanced Jquery.

Look at the below example here I created a modal window using Jquery. In my page I have a link “Show Modal Winodw” on click of this I am calling a Jquery function tableDialog(). Table Dialog modal window has two buttons OK & Cancel. On click event of OK button I kept blank. On cancel button event I am closing the window.

Dialog is a Jquery UI method. To tblDialog div here I am applying Jquery dialog method. By passing width, resizable, buttons & autoOpen I am configuring my modal window. In side dialog by declaring modal: true I am showing the div (tblDialog) as a modal window else it will act like a popup. For default height of my modal window I added a css class to tblDialog div.

To run this program copy the below code into a notepad file. Save it as a html file. Before run the html file make sure you are with Internet Connectivity. Because here I used CDN link for Jquery & Jquery UI libraries.

JQuery Modal Window with disabled parent Window




How to Open JQuery Modal Popup?








Show Modal Window

This is a Sample Modal Window using Jquery.

The post How to Open JQuery Modal Popup with disabled Parent Window? appeared first on OneStop Shop.

Jquery function to Generate Random font Size & Color Anchor Tags

Biswabhusan Panda — Fri, 13 May 2016 18:11:54 +0000

While displaying many links together to make the panel more attractive we want to add text effects like random font size and colors to the anchor tags. Mannually it can be done by using Style sheet but it is more programmer friendly if we use programming technique to decorate the links. This practice help in reuse of codes.

In the below example I have many links inside a div with div id “links”. Using Jquery in document.ready() method I am locating all the links inside the div & applying random font size & color to each anchor tags. randomNumberGenerator() is js function which generates random number for font size in between the min & max values. To apply style over anchor tags I am using css() method from Jquery. Look at the example below.

To run this example Copy the code to a Notepad file & Save it as a html file. Here to refer Jquery library I used Jquery CDN link. While running this app be sure you are with Internet Connectivity.

Example to Generate Random font Size & Color




Tag like Anchor Tags using Random Font Size & Color





Health Tips, Beauty Tips, Celebrity, Kids, Recipes, Effective Tips, Our Blog, Women, How to, Skin Care Tips, Business, Career, Breast Care, Real Estate, Romance, SEO Tips, Loan, Makeup Tips, Couples Guide, High PR Backlinks, Home Remedy,
Hosting, Insurance, Interview Questions, Stories, Programming, Marketing, Personal Computer, Pregnancy

Here I am using very simple logics to achive the required functionalities. Colors is a Javascript array which contains verious colors as per the need. You can add n number of colors to this array. 2 variables are defiend for font size. minFontSize stores the most smaller font size while maxFontSize stores the largest. To generate random font size in-between min and max font size values here I wrote a js function randomNumberGenerator(min,max).

Next what more I did is using jquery find function I am finding all anchor tags inside the the div #links. Then inside the loop for each item I am applying font size and color.

Inside randomNumberGenerator function I am using math.floor and math.random methods to generate random number. To bring Jquery platform here I am using Jquery CDN link.

The post Jquery function to Generate Random font Size & Color Anchor Tags appeared first on OneStop Shop.

Jquery Email Validation using Regular Expression

Nibedita Panda — Fri, 13 May 2016 17:32:50 +0000

In internet Email ID acts like an identity token. Whether you do register for a Job site or Forum a valid Email ID is mandatory. During registration process there is a possibility that user can provide invalid Email ID. So to prevent spam we use Email Validation. In Web Technology Email validation can be done using both Client & Server side scripts. But if we will look into performance it is more better to use client resources to validate an email. As you know jquery is one of the most powerful Client-side scripting language. In this demo app I created a Jquery Email Validation using Regular Expression.

Look at the code below here in HTML body part I have a input box with a submit button. Onclick of submit button I am calling a jquery function validEmail($email) inside the jquery document.ready() method. This function accepts email id as a parameter. To verify the email id inside the validEmail() function I am using regular expression with jquery test method. You can do the same using jquery match method too.

To run the below example. Copy the Codes to a notepad file. Save it as a HTML file. Then Open it in your browser. Here to refer jquery library file I am using CDN link. Make sure while running this demo app you are with internet connectivity.

jquery-email-validation.htm




Jquery Email Validation using Regular Expression

The post Jquery Email Validation using Regular Expression appeared first on OneStop Shop.

One Div to an another Div drag and drop Jquery Example

Nibedita Panda — Fri, 13 May 2016 17:30:51 +0000

Drag n Drop is a user interface mechanism using which user can copy, reorder or deletion of items through the use of mouse. To drag you need to select the element then click and hold the element using your mouse pointer. Drag it to the container area and release the mouse button to drop the element inside.

Many times during application development to make our application much more user friendly we required to implement drag and drop facility. Whether the matter of Dashboard or Datagrid using drag and drop we can make to page more user friendly. Drag and Drop can be done using both server-side and client-side scripting. For high performance webpages or apps its wise to implement drag and drop using Client-side Scripting. This practice reduces network load.

JQuery is a Javascript library. To implement drag and drop using Javascript we must need to write some 40 to 50 lines of Code. While using JQuery in-built methods we can do the same in 5 to 6 lines of Code. In the below demo app I have two panels left panel & right panel. Left panel is a div which is called toolbar. Right panel is an another div called Container. What I need is from left pan toolbar I need to drag nodes to container area. While dragging I need to generate cloning for the draggable element over Container area. Look at this drag and drop Jquery example how I implemented the things using JQuery draggable method.

To run the below demo app copy the codes to a Notepad file. Save it as a HTML file. Then open the file in your browser.

Drag and Drop JQuery Example




Drag n Drop from a Div to an another Div using Jquery

In the above example I used CDN files for Jquery and Jquery UI library. Toolbar div contains an image as a node. Container is an another div where I need to drag the image. To make a clone here I used $(“#dragImage”).draggable({ helper: “clone” });. To drop the draggable node in container area for container area I used droppable method with drop event. In drop event I am appending the draggable image to container area using append method. JQuery draggable method supported by all the major web browsers like Google Chrome, Mozila Firefox and Safari.

One Div to an another Div using JQuery draggable() method

The JQuery draggable() method has 2 forms $(selector, context).draggable (options); and $(selector, context).draggable (“action”, [params]);. There 4 different options (addClass, axis, containment and opacity) you can use with this method. Similar to draggable method the droppable() method has also 2 forms $(selector, context).droppable (options), $(selector, context).droppable (“action”, params). There 3 different options (accept, addClass and disable) you can use with this method.

Othe API

From Product Gallery to your Mail Box drag and drop feature creates better user experience. This feature saves user time. For an example in your gmail while grouping some selected mail under a new label drag and drop feature works awesome. After JQuery we can implement drag and drop using other technologies like HTML5 and pure Javascript. Now HTML5 comes with drag n drop API. Look at the sample code.

The post One Div to an another Div drag and drop Jquery Example appeared first on OneStop Shop.

How to read JSON file data in JQuery? – GetJSON Example

Nibedita Panda — Fri, 13 May 2016 14:53:37 +0000

Compare to XML JSON is a lightweight & tag free data exchange format. JSON is language independent. JSON stands for JavaScript Object Notation. Many times during programming we found some places where we need to store static data. In this case JSON is very programmer friendly. Let’s talk about we want to display the list of Global Banks. To do this there are several ways. Here to present you a demo I stored bank related data’s in a js file using JSON format. To read data from JSON here I am with getJSON Example. Look at the Code below.

GetJSON-Example.htm




How to read JSON file data in JQuery?

bank-records.js

{"banks":
[
{
'bankName': 'ICICI Bank',
'title': 'Personal Banking Services'
},
{
'bankName': 'SBI Bank',
'title': 'Safe Banking With SBI'
},
{
'bankName': 'HDFC Bank',
'title': 'Personal Banking Services'
}
]
}

To run the above program Create a folder. Copy the above index.html & bank-records.js file in the same folder. Open index.html. For Jquery here I used CDN link. Make sure to run this program you are with Internet connectivity or you have to refer a local Jquery library.

The post How to read JSON file data in JQuery? – GetJSON Example appeared first on OneStop Shop.

Jquery Ajax Example using Get and Post Methods

Biswabhusan Panda — Thu, 12 May 2016 16:48:38 +0000

In Client Server architecture get & post methods are well popular for response & request mechanism. During development phases many times we required to send or receive data in between client & server. In Jquery to deal with the above situations there are two Ajax methods are introduced. Get & Post. Using get method we can receive the response from server in client & using post method we can post our client side data to the server. In below check our Jquery Ajax Example.

Ajax Get method

Using Jquery $.get() method we can fetch the data from server. Syntax used for Jquery get method is as below.

$.get(url, callback);

URL specify the path from which server page you want to receive data in client end. Let us have an asp page demo_get.asp. In this page I added the following lines.

<%
response.write(“This line is to test get method in Jquery”);
%>

What we want is on a button click we need to show the above server response in client end using Jquery ajax get method. Look at the example below how to do this.

$(“#btnGet”).click(function() {
$.get(“demo_get.asp”, function(data, status) {
alert("Response: " + data + "\nRequest Status: " + status);
});
});

Ajax Post Method

Generally HTTP Post method used to send data from client to server. Compare to get method post method is more secured. During post method control data moves with form. Jquery provide $.post() method to send client data to the server. Syntax used for Jquery post method is as below.

$.post(url, data, callback);

URL is the path to which server page you want to send client data. Let us have a button with id btnPost. What we want is using Jquery post method we will send some sample data to demo_post.asp server page. Let’s look at the button click code how to send client data using post method.

$(“#btnPost”).click(function() {
$.post(“demo_post.asp”,
{
name: “Biswabhusan”,
designation: “Team Lead”
},
function(data, status) {
alert("Response: " + data + "\nRequest Status: " + status);
});
});

Using the above our data name & designation post to the server page demo_post.asp. Now look at the below code how to retrieve these data in server page demo_post.asp.

<%
dim emp_name, emp_designation
emp_name=Request.Form("name")
emp_designation=Request.Form("designation")
Response.Write("Hi " & emp_name & ". ")
Response.Write("You are a " & emp_designation & ".")
%>

Jquery get & post methods are Ajax based. During server & client communication using these methods it not required the total page refresh.

The post Jquery Ajax Example using Get and Post Methods appeared first on OneStop Shop.

Example of Callback Function in JQuery

Biswabhusan Panda — Tue, 10 May 2016 13:33:00 +0000

A callback function is a function that is passed to another function as parameter. Callback function is called inside other Function. A callback function is essentially a pattern. Use of a callback function is also known as a callback pattern.

JavaScript Compiler compiles the code line by line. Let you want to execute some block of code and then only you need to execute another block of code written just after this. For an example in the following code I want to show a alert message after the paragraph get hide. In side jquery document.ready method, here I am using Jquery selector to select the paragraph from my page & using hide method from Jquery I am hiding the paragraph.

About Callback here the hide method accepting 2 parameters. First parameter is for hiding speed & the second parameter is our Callback function. Which contains a simple alert message. This message will call only after the paragraph is hide. This is a simple example.

Example

This is the paragraph to Hide.

The post Example of Callback Function in JQuery appeared first on OneStop Shop.