Html Form validation is an essential part in a web development specially when you are developing a website which lets users to register their information through an online form. Web masters must use validations before process a form to the server. You can achieve the validation easily using JQuery. This validation is called client side […]
The datepicker widget is a powerful UI plugin found in JQuery. The JQueryUI Datepicker provides a rich interface for valid date selection in any format such as yyy-mm-dd etc to the end-user. The JQueryUI Datepicker is easy to implement in websites. Along with Html it is also used with server side programming languages to get date […]
Below is the list of CSS properties that you can animate using animations and transitions. List also contain the scripting names of properties. CSS property Scripting property background backgroundProperty background-color backgroundColor background-image backgroundImage background-position backgroundPosition border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-left-radius borderBottomLeftRadius border-bottom-right-radius borderBottomRigthRadius border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft border-left-color borderLeftColor border-left-width borderLeftWidth […]
Example: <!DOCTYPE html> <html> <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script> <script> $(document).ready(function() { $(‘button’).on(‘click dblclick’, function(){ $(‘#js’).addClass(‘hilighter’); }); }); </script> <style> .hilighter { background-color:yellow } </style> </head> <body> <p> Jquery is a library of <span id=”js”>JavaScript. </span></p> <br> <button> Click me or Double click </button> </html> </body> </html>
Example: <!Doctype html> <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script> </head> <script> $(document).ready(function() { $(“button”).click(function() { var user_full_name = $.trim($(“#txt_user_full_name”).val()); if(user_full_name != “”) { if(!user_full_name.match(/^[a-zA-Z ]*$/)) alert(“Only alphabetic characters are allowed!”); else alert(“Name is validated.”); } else alert(“Please enter name!”); }); }); </script> <body> <input type=”text” name=”txt_user_full_name” id=”txt_user_full_name” placeholder=”Enter name”> <br> <button> Submit </button> </body>
Example: <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script> </head> <script> $(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) $(‘.scrollToTop’).show(); else $(‘.scrollToTop’).hide(); }); $(‘.scrollToTop’).click(function(){ $(‘html, body’).animate({scrollTop : 0},250); return false; }); }); </script> <style> .scrollToTop { position: fixed; bottom: 3px; right: 25px; display:none; cursor:pointer; } </style> <body> <h3> Please scroll down to see effect </h3> <span style=”float:right”> <button type=”button” class=”scrollToTop”> Go TO […]
Example: HTML div element can be created using JQuery’s append function.
Example: <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script> </head> <script> $(document).ready(function(){ $(“button”).click(function() { var decoded = $(“#contents”).html(“JavaScript & Asp.net”).text(); alert(decoded); }); }); </script> <p id=”contents”></p> <button>Entity decode</button>