Archive for August, 2016

Quick Tip: Use jQuery to Clone Objects

There’s a really handy .clone() method in jQuery that allows you to copy an HTML element dynamically using a script. This method comes in handy when you want to clone an element after a certain trigger event, like .click() or .hover(). Using the .clone() method is pretty straightforward. Here’s what you would need to do to clone a div with the class .thediv:

var clone = $('div').clone();

The above code will easily clone any HTML element, but if you want to clone a JavaScript object, you’ll need to use different code like in the example below:

var clonedObject = jQuery.extend({}, originalObject);

To use this code to, for example, clone a div after it’s been clicked and then insert the cloned div below the original div, you can use the following code snippet as a guideline:

$("div").click(function () {
 $(this).clone().insertAfter(this);
});

Play around with the .clone() method to see what you can accomplish with it and discover all the different ways you can use it in your projects.

Convert Text Cases Using jQuery

In this post, find jQuery code to convert the input type text to UPPER CASE, lower case, Title case and Pascal Case. The case conversion is done once the focus is out from the input text box. However, you can use keypress event also to show the conversion in real time.

Here is the code to convert to UPPER CASE. There is a JavaScript string function called “toUpperCase”, which is used to convert text to UPPER CASE.

$('#txtVal').blur(function() {
  var currVal = $(this).val();
  $(this).val(currVal.toUpperCase());
});

Similar to UPPER CASE, JavaScript also has toLowerCase() method to convert text to lower case. See below code to convert text to lower case.

$('#txtVal').blur(function() {
  var currVal = $(this).val();
  $(this).val(currVal.toLowerCase());
});

Below is the code snippet to convert text to Title case. In Title case, the very first letter of statement is in upper case and others are in lower case. The code snippet below finds the very first letter, then converts it to UPPER CASE and rest letters to lower case.

$('#txtVal').blur(function() {
  var currVal = $(this).val();
  $(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());
});

And finally, the below code converts text to Pascal Case. In Pascal Case, first letter of the every word is in UPPER CASE and rest are in lower case. First we convert all in lower case and then find the first letter of every word.  To find out the first letter of every word, regular expression is used and then we convert it into UPPER CASE.

$('#txtVal').blur(function() {
   var currVal = $(this).val();
   currVal = currVal.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {
      return txtVal.toUpperCase();
   });
   $(this).val(currVal);
});

How to Disable Right Click Using jQuery

There are many reasons a developer may want to disable right-click on their websites. While it’s not always considered a best practice, it’s definitely doable and can actually be achieved quite easily. With jQuery it’s really simple to disable right-click on your site. All you need to do is add this snippet to your scripts:

$(document).ready(function(){
 $(document).bind("contextmenu",function(e){
   return false;
 });
});

These few lines of code will completely block your user from being able to use right-click on your site.