jQuery

Event Types In jQuery


The following are cross platform and recommended event types which you can bind using JQuery −

Sr.No Event Type Description
1 blur Occurs when the element loses focus.
2 change Occurs when the element changes.
3 click Occurs when a mouse click.
4 dblclick Occurs when a mouse double-click.
5 error Occurs when there is an error in loading or unloading etc.
6 focus Occurs when the element gets focus.
7 keydown Occurs when key is pressed.
8 keypress Occurs when key is pressed and released.
9 keyup Occurs when key is released.
10 load Occurs when document is loaded.
11 mousedown Occurs when mouse button is pressed.
12 mouseenter Occurs when mouse enters in an element region.
13 mouseleave Occurs when mouse leaves an element region.
14 mousemove Occurs when mouse pointer moves.
15 mouseout Occurs when mouse pointer moves out of an element.
16 mouseover Occurs when mouse pointer moves over an element.
17 mouseup Occurs when mouse button is released.
18 resize Occurs when window is resized.
19 scroll Occurs when window is scrolled.
20 select Occurs when a text is selected.
21 submit Occurs when form is submitted.
22 unload Occurs when documents is unloaded.
Advertisements

Add and Remove Class Using jQuery


In this code snippet you will learn how to add class and remove class for HTML div elements using JQuery scripting. The following is the HTML code I used for this code snippet.

<html>
<head>
</head>
<body>
<div class="div1">Name 1</div>
<div class="div2">Name 2</div>
<div class="div3">Name 3</div>
<div class="div4">Name 4</div>
</body>
</html>

(more…)

Puzzle Game using jQuery


puzzleIntroduction

This is a simple puzzle game developed using pure HTML and jQuery. This puzzle consist of an image which is divided into fifteen small parts or we can say it as segments. These parts are randomly arranged on the puzzle board. Your task is you have to rearrange that image segments in proper order. There is no limitations for moves or time you can take your own time to complete this puzzle.

Background

This puzzle game is mainly based on swapping of div’s on puzzle board, Puzzle board consist of total 16 small div’s, 15 are image div’s and one empty div. Div position is set on the puzzle board on random basis. When you click on any div adjacent to the empty div position of selected div and empty div gets changed.

Check Live Demo Here : jQuery Puzzle Game
(more…)

Hide Contents on Click Event


In this article we will see how to hide html page contents on click event using jQuery.

<html>
<head>
<title>Hide Content Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" />
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<script>
$(document).ready(function() {
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</body>
</html>  

Check live demo here : Hide Contents on Click Event

jQuery Validation Plugin to Validate Web Forms



Introduction

This article presents an example of using the jQuery.mbValidation plugin. Click here for the Live Demo of the jQuery.mbValidation plugin.

Background

The jQuery.mbValidation Plugin is an excellent tool for web pages to validate data entries at the client side using JavaScript. It is very easy to integrate this plugin into your web application and do many validations on web forms. This is an Open Source project I have begun on Github for easy web application development, to simplify web page validations and to get maximum output with less coding. (more…)

Introduction to JQuery.ajax Call in ASP.Net


This article presents an example of how to consume a web service in an ASP.NET application using the jQuery.ajax() method. I have been developing applications running on web browsers for many years and I realize that AJAX and jQuery are getting close to the ultimate dreams of any programmer working on this subject for some time. jQuery is a client-side scripting library, so it is totally independent from the development environment, regardless of whether it is ASP.NET, J2EE, PHP, or any other platform. Visual Studio is readily available to me, so the example is created as an ASP.NET project. (more…)

How to disable Right Click on your web page


In this post, we will see how we can disable right click option using simple JQuery code. I hope you will like it.

Background

Most of the developers are always looking for the safety of their images and code blocks which they have shared in the web. But normally it is hard to secure this unless you go for any third party tool. Some of us may think if we just disable the right click option in our page, makes the content secured. But it is not. If some one really thinks that they need to get the content from your page, they can achieve it. Even though that is the reality, I am sharing this post to show how to disable the right click option in page.

Code

We are going to use JQuery for this requirement. So you need to load the JQuery reference first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

(more…)