Category: jquery

Clear your form using Javascript

January 23, 2015 / / 0 Comments

If you need to clear all the input fields irrespective of type in a form, try the below code.  The below code works even if your fields contains place holders.

    $.fn.clearForm = function() {
      return this.each(function() {
        $(':input', this).each(function() {
          var type = this.type, tag = this.tagName.toLowerCase();
          if (type == 'text' || type == 'password' || tag == 'textarea')
            this.value = '';
          else if (type == 'checkbox' || type == 'radio')
            this.checked = false;
          else if (tag == 'select')
            this.selectedIndex = -1;
        });
      });
    };

 

 2,977 total views

jquery scrollTop – with animation

December 24, 2014 / / 0 Comments

The jquery scrolltop () method gets the top offset of the first matched element.

Let us have a look,

If we want to know vertical scroll postion of current window we can use,

scroll_leng= $(window).scrollTop();

It will return the vertical scrollbar position of corresponding to window.

like the same we can set the vertical scrollbar position of window into some postion as below 

 $(window).scrollTop(position);

If we want to know vertical scroll postion of a perticular element window we can use,

scroll_leng= $(selector).scrollTop();

It will return the vertical scrollbar position of particular element.

like the same we can set the vertical scrollbar position of particular element into some postion as below

 $(selector).scrollTop(position);

Sometime we have to give animation also , it is simple by using animate function in jquery

$(selector).animate({scrollTop: scroll_value}, delay);

sample demo below:




Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



0 px

Now Let us look a demo with window object ,
Enter a value to scroll top


Now letus look scrollTo with animations

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



0 px

Now Let us look a demo with window object animated ,
Enter a value to scroll top


 3,248 total views

Regular expression for at least one number capital letter and a special character

December 18, 2014 / / 3 Comments


Here we are going to write a regular exprestion for Password to check the condition like , password must contain at least one number,one capital letter and one special character.

First we can write Regex as below,

^(((.*\d.*[A-Z].*[!@#$%^&*? ~].*))|(.*[A-Z].*\d.*[!@#$%^&*? ~].*)|(.*[!@#$%^&*? ~].*[A-Z].*\d.*)|(.*[!@#$%^&*? ~].*\d.*[A-Z].*))$

This will check the string contain at at least one number,one capital letter and one special character,

Here i am going to show examples with Javascript function ,

We can write a function in javascript as below 

 function validatePassword(str)
            {
                // patter to match : Atleast one number ,one capital letter, one special charector
                var reg = /^(((.*\d.*[A-Z].*[!@#$%^&*? ~].*))|(.*[A-Z].*\d.*[!@#$%^&*? ~].*)|(.*[!@#$%^&*? ~].*[A-Z].*\d.*)|(.*[!@#$%^&*? ~].*\d.*[A-Z].*))$/;
                if (reg.test(str)) {
                    return true;                                     
                }
                else {
                    return false;                  
                }
            }

and we can pass the string as function argument “str”, It will return if it matches the condition else it will return false.

Let us look on the demo

Javascript function sample

Enter password :


Let us look a jquery demo

Jquery sample

Enter password :


You can download from github

Have a noce day 😉

 12,317 total views,  4 views today

How to add integer only in a text field using jquery

December 9, 2014 / / 0 Comments


To allow integer only in text field we can use the following jquery function .
We can write below code inside a document.ready function and give the class “integer-allowed” for the text box we needed.


 $('.integer-allowed').keyup(function () {
                            this.value = this.value.replace(/[^0-9\.]/g, '');
                            });

Working demo


Enter value (Numbers only allowed)

Working code 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script  type="text/javascript">
$(document).ready(function() {
   $('.integer-allowed').keyup(function () {
          this.value = this.value.replace(/[^0-9\.]/g, '');
       });
});
</script>


<strong>Enter value (Numbers only allowed)</strong><br />
<input type="text" class="integer-allowed" name="demoname" /><br />
<input type="submit" class="" name="demosubmit" />

 2,818 total views,  1 views today