When to use window.opener / window.parent / window.top

• window.opener refers to the window that called window.open( ... ) to open the window from which it's called
• window.parent refers to the parent of a window in a <frame> or <iframe> or popups which are opened by using window.open()
• window.top refers to the top-most window from a window nested in one or more layers of <iframe> sub-windows

Thanks,

Disable Right click using jQuery

Method : 1

$(document).ready(function(){

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

        return false;

    });

});

Method : 2

$(document).ready(function(){

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

        e.preventDefault();

    });

});

Disable Enter key on page using jQuery

$("#form").keypress(function(e) {

  if (e.which == 13) {

      return false;

  }

});

Disable Cut,Copy and Paste functions for textbox using jQuery

$(document).ready(function(){

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

       e.preventDefault();

  });

});

Note : 

Generally why we are using
preventDefault is, it will stop the default behavior of its eventand thus the default action (of showing context menu) is stopped here.

Thanks

Changing the Selection Color

To change the selection color, you will need to use the selection pseudo-element. Go ahead and paste the following CSS rules below your mainContent rule:

#mainContent p::selection {

background:#FF99CC;

color: #FFF;

}

#mainContent p::-moz-selection {

background:#FF99CC;

color: #FFF;

}

#mainContent p::-webkit-selection {

background:#FF99CC;

color: #FFF;

}

You can use the background or background-color property to specify the background color of your selection, and you can use the color property to specify the color of the highlighted text.

Once you have made those changes, your selection background and foreground color will look custom and unique to your design.

-Thanks

Difference between eq() and get()

Both the methods are used to find and select single element from set of elements and they both return single "element". And they both accept single int type parameter, which denotes index. For example, take a look at below HTML. There is a <ul> element with 5 <li> elements. <ul>     <li>Test1</li>     <li>Test2</li>     <li>Test3</li>     <li>Test4</li>     <li>Test5</li> </ul> And to select 3rd <li> element, use either get() or eq() and pass 2 as index. Keep in mind that index is zero-based. $('li').get(2); $('li').eq(2); In the above code, both will return the 3rd <li> element. But then what is the difference between 2. eq() returns the element as a jQuery object. This method constructs a new jQuery object from one element within that set and returns it. That means that you can use jQuery functions on it. get() return a DOM element. The method retrieve the DOM elements matched by the jQuery object. But as it is a DOM element and it is not a jQuery-wrapped object. So jQuery functions can't be used.  $(document).ready(function () {        $('li').eq(2).css('background-color', 'red'); //Works       $('li').get(1).css('background-color', 'red'); // Error. Object   <HTMLLIElement> has no method 'css' }); Good Luck...

Different ways to checking the checkbox using jQuery

There are couple of other ways as well to find out if checkbox is checked using jQuery,…

Method 1 :

Below single line of code will provide the status of checkbox using jQuery. It checks whether the checked is checked or not using jQuery and will return 1 or 0.

      var isChecked = $('#chkSelect').attr('checked')?true:false;

I have noticed that on many website it is written that 'checked' attribute will return true or false, but this is not correct. If the checked box is checked then it return status as "checked", otherwise "undefined". 

Method 2 :

      var isChecked = $('#chkSelect:checked').val()?true:false;

$('#chkSelect:checked').val() method returns "on" when checkbox is checked and "undefined", when checkbox is unchecked.

Method 3 :

      var isChecked = $('#chkSelect').is(':checked');

The above method uses "is" selector and it returns true and false based on checkbox status.

Method 4 :

The below code is to find out all the checkbox checked throughout the page.

$("input[type='checkbox']:checked").each( 

    function() { 

       // Your code goes here...

    } 

);

-Thanks

Event handling using on() and off() in jQuery

With jQuery 1.7, jQuery team introduced 2 new ways to attach and remove events. on() method is used for attaching events to DOM elements, and off() method is used to removed event handlers. And you should use on() and off() only to attach and remove handlers, instead of bind(), live() and delegate(). 

There could be a situation where you have assigned multiple handlers on single event. For example,

  $('#btnClick').on('click', func1());

  $('#btnClick').on('click', func2());

Now, when trigger() is called on element, then both the function will get executed.

  $('#btnClick').trigger('click'); // both functions will be called.

And when off() method will be called on element, both the functions will be removed.

  $('#btnClick').off('click'); // both functions will be removed.

Now, what if when there are multiple handlers on single event and there is a need to call specific handler? In such situation, event namespacing is your friend. 

Using event namespacing, at the time of creating event we can assign name. For example, "click.callFunc1" defines callFunc1 namespaces for this particular click event. Later on based on namespace, we can trigger or remove specific handler.

  $('#btnClick').on('click.callFunc1', func1());

  $('#btnClick').on('click.callFunc2', func2());

So to call func1() only, pass event.namespace in trigger() method.

  $('#btnClick').trigger('click.callFunc1'); // Only func1() will be called.

And to remove specific function, pass event.namespace in off() method.

  $('#btnClick').off('click.callFunc1'); // Only func1() will be removed.

Good Luck