Technology I Can’t Live Without: September 2012

Wednesday, 19 September 2012

Detect Browsers using jQuery

jQuery provides a property to detect the browser. It works well for IE, mozilla, Safari and opera browser but it doesn't work for Google Chrome. Below jQuery code gives you an idea about $.browser property.

$(document).ready(function() {
  if ($.browser.mozilla && $.browser.version >= "2.0" ){
   alert('Mozilla above 1.9');
  }
 
  if( $.browser.safari ){
   alert('Safari');
  }

  if( $.browser.opera){
   alert('Opera');
  }

  if ($.browser.msie && $.browser.version <= 6 ){
   alert('IE 6 or below version');
  }

  if ($.browser.msie && $.browser.version > 6){
   alert('IE above 6');
  }
});

Disable Cut, Copy and Paste function for textbox using jQuery

To disable cut, copy and paste functionality for the Textbox, which means User should not be allowed cut or copy text from the Textbox and also to paste text within Textbox. Well, it is very easy to do this using jQuery. All you need is to bind cut, copy and paste function to Textbox and stop the current action. See below code.

1$(document).ready(function(){

2  $('#txtInput').live("cut copy paste",function(e) {

3      e.preventDefault();

4  });

5});

You can also use bind function to bind these events.

1$(document).ready(function(){

2  $('#txtInput').bind("cut copy paste",function(e) {

3      e.preventDefault();

4  });

5});

See live Demo and Code.

How to Disable Spacebar in text box using jQuery

For one of my requirement, I need to restrict/disable end-user to enter space in the input field or textbox. This was piece of cake with jQuery. All I need to do is to check the keycode of spacebar and restrict its default action on keydown event. See below jQuery code. "txtNoSpaces" is the name of the textbox.

1$(document).ready(function(){ 

2  $("#txtNoSpaces").keydown(function(event) {

3     if (event.keyCode == 32) {

4         event.preventDefault();

5     }

6  });

7});

See live Demo and Code.

Validate email address using jQuery

This is a very basic functionality to validate the email address. In this post, I will show you how to validate the email address using jQuery. To validate the email address, I have created a separate function which based on email address, returns true or false. Email address validation is done using regular expression.

1function validateEmail(sEmail) {

2    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

3    if (filter.test(sEmail)) {

4        return true;

5    }

6    else {

7        return false;

8    }

9}​

One
 just need to make a call to this function to validate the email 
address. For demo, I have used on click event of button. But It can be 
used on blur event of textbox or any another event.

01$(document).ready(function() {

02   $('#btnValidate').click(function() {

03        var sEmail = $('#txtEmail').val();

04        if ($.trim(sEmail).length == 0) {

05            alert('Please enter valid email address');

06            e.preventDefault();

07        }

08        if (validateEmail(sEmail)) {

09            alert('Email is valid');

10        }

11        else {

12            alert('Invalid Email Address');

13            e.preventDefault();

14        }

15    });

16});

How to put link on image using jQuery

http://phpgyan.blogspot.inTo put link of the image, we normally use <a> tag that contains image tag to show the image. But assume there are 100 images and you need same link for every single image. Putting 100 <a> tag with each image is time consuming and cumbersome. It would be nice if single <a> tag can be used for all the images and put the <a> tag dynamically. Well, no worry when there is jQuery.

jQuery provides a method named "wrap()", which can be used to insert any HTML structure in set of matched elements. In simple words, if you want put wrapper around your div element then you can use wrap() method. For example, you have a div with ID "Child".

`1`	`<div id="Child"></div>`

And want to wrap this div with any parent then you can use "wrap()" method to insert HTML.

`1`	`$('#Child').wrap('<div id="Parent"></div>');`

Output:

1<div id="parent">

2  <div id="child"></div>

3</div>

Same way, we will use the wrap() method to insert hyperlink to image tag so that the image becomes clickable. See below.

1$(document).ready(function() {

2    $("#imgLogo").wrap('<a href="http://phpgyan.blogspot.in/"></a>');

3});

In this example, I have used ID as selector but you can use class selector to find all the images with same class and then wrap them with <a> tag. You can also assign target="_blank" in the above <a> tag to open the link in new window.

See live Demo and Code.

How to Disable right click using jQuery

You can find many java script code snippets to disable right click. But jQuery makes our life easy. Below jQuery code disables the right click of mouse.

1$(document).ready(function(){

2    $(document).bind("contextmenu",function(e){

3        return false;

4    });

5});

See live Demo and Code

We just need to bind the contextmenu event with the document element.

Method 2 (Send from one of the reader):

`1`	`$(document).ready(function(){`

`2`	`$(document).bind("contextmenu",function(e){`

`3`	`e.preventDefault();`

4 });

5 });

How to add trailing image to mouse cursor using jQuery

You must have seen on many sites when an image moves near the mouse as per the mouse movement. I will show you how you can add trailing image to mouse cursor movement using jQuery on your site as well.

First place an image anywhere in your page.

1 <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"

2 width="75px" height="75px" id="imgFollow"/>
Fetch the current position (X and Y) of mouse."
Set the top and left position of the image according to the mouse cursor X and Y value. To set the position of the image, use offset() method of jQuery. The offset() method set or returns the offset (position) for the selected elements, relative to the document.

Remember to put jQuery code into mousemove event of the document so that on every mouse move, the image also move accordingly.

That's it. See below jQuery code. I have set top value 20 pixel more in this code intentionally so that image doesn't overlap the mouse cursor.

1$(document).ready(function(){

2  $(document).mousemove(function(e){

3      $('#imgFollow').offset({left:e.pageX,top:e.pageY+20});    

4  });

5});

See live Demo and Code.