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: