Validate Input Field allows Only Float Value (Decimal Number)

Following Code Snippet will make validation, which allows only Floationg Point Numer On user Key-up Event Using jQuery.

$(function(){
    
    $('.float-input').keyup(function(e){
      var entered_value = $(this).val();
      var regexPattern = /^\d{0,8}(\.\d{1,2})?$/;         
      //Allow only Number as well 0nly 2 digit after dot(.)
        
      if(regexPattern.test(entered_value)) {
          $(this).css('background-color', 'white');
          $('.err-msg').html('');
      } else {
          $(this).css('background-color', 'red');
          $('.err-msg').html('Enter a valid Decimal Number');
      }
    });
    
});

Live Demo &Try Yourself

Same result with Prevent user to type other than Floating Chars by using Key Press event,

 $('.float-input').keypress(function(event) {
      if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
      } else {
           var entered_value = $(this).val();
          var regexPattern = /^\d{0,8}(\.\d{1,2})?$/; 
          if(regexPattern.test(entered_value)) {
              $(this).css('background-color', 'white');
              $('.err-msg').html('');
          } else {
              $(this).css('background-color', 'red');
              $('.err-msg').html('Enter a valid Decimal Number');
          }
      }
});

Live Demo &Try Yourself

Simple Horizontal Style - Drop-Down Menu

In this post we're going to see, How to create a drop-down menu using structured HTML, simple CSS and minimal jQuery, it is possible to create visually appealing drop-down menus that are easy to edit and update, and that work across a cross browsers, (including IE). Lets start

HTML CODE : Creating the menu Structure:

Creating the menu structure is the first thing in process of creating menu. The best way to do this is to build an unordered list <ul>, with each sub-menu appearing as a list within its parent list item.like this,

URL redirection from One page to another page using jQuery

There are multiple ways to redirect one web page to another by using javascript & jquery.

Method 1:

1	window.location.href = "http://jqueryexamples4u.blogspot.in";

Method 2:

1	window.location.replace("http://jqueryexamples4u.blogspot.in");

Note: REPLACE method - won't store History about previous page. it breaks the back button behavior  i.e, if you redirects to a new address instead of window.location.replace("..") method, if you where to hit the back button in your browser once you've been redirected, you will go back to the redirecting page, and the redirecting page will redirect you back to the new address. It will act as an endless circle.

Method 3:

$( document ).ready() - The first thing in jQuery

Hi Everyone, The first thing to learn about jQuery is $( document ).ready(): If you want an event to work on your page , you should call it inside the $(document).ready() function.

Diff between $( window ).load() and $(document).ready()

$( document ).ready() will only load once the page Document Object Model (DOM) is ready for JavaScript code to execute and before the page contents are loaded.

$( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

1 2 3

$( document ).ready(function() { console.log( "DOM is ready!" ); })

jQuery - "DO MORE" by "WRITE LESS"

This is the first post of the new jQuery Tut & Example series, walking you through the process of learning the hugely popular JavaScript library jQuery from scratch. This will lead us on to doing much cooler stuff with the library. 

Note: Folks who don’t have knowledge on HTML and CSS, I suggest you learn those before coming back to this.

What is jQuery?

jQuery is a "DO MORE" by "WRITE LESS" JavaScript library. This lightweight library simplifies javascript programming. jQuery contanins range of actions (Web Devlopment) such as Event handling, HTML document traversing, CSS manipulation, Animation & Effects and Ajax. The ultimate goal of jQuery, to make javascript more accessible for the less ‘Hardcore’ developer. jQuery is a lightweight, "write less, do more", JavaScript library.