Anil Kumar Buddha's Blog

Sunday, October 6, 2013

Verify whether HTML object has the event using javascript or jQuery

We would be using multiple events or plugins to get our requirement done using jQuery.

While adding them we may not know whether the plugin is activated or not that gives error to the browser if it does not initiate and stops the next line of scripts in jQuery which we should not be doing.

To get rid of this, we can use jQuery hasOwnProperty which tells whether the HTML object has the event which we are checking for.

Below is the sample code:

Consider we have included the CKEDITOR in the script and it applies for the textareas.

<html>

<head>

<script type="text/javascript" src="ckeditor.js">

<title>Test Object Event Existence</title>

</head>

<body>

<ul>

<li>First name: <input type="text" name="fname" /> </li>

<li>Last name: <input type="text" name="lname" /> </li>

<li>Address: <textarea name="address" id="address" ></textarea></li>

</ul>

</body>

</html>

For the above script, to check whether the textareas has CKEDITOR or not we can check as below

$('#address').hasOwnProperty('CKEDITOR')

If it exists it returns true else returns false.

Monday, July 29, 2013

Decode html entities using javascript

Below is the code to decode the html entities using javascript rather than the Server side scripting

function decodeEntities(input) {
var y = document.createElement('textarea');
y.innerHTML = input;
return y.value;
}

Above function just receives the html values like below

var str = "<p>Hello World<br />This is the test message";

When we pass the above HTML string to the function it returns as below,

calling the JAVASCRIPT function

decodeEntities(str)

Output is: "<p>Hello World<br/>This is the test message";

Thursday, July 18, 2013

Disable right click in a page using javascript

When we want to restrict the right click of the mouse in some of the pages, need to add the below code in the <head> </head> tag within the JAVASCRIPT.

<script type="text/javascript">
var message="Sorry, Right Click has been disabled";
function clickIE() {if (document.all) {window.console.log(message);return false;}}

function clickNS(e) {
if (document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {window.console.log(message);return false;}
}
}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")

</script>

Monday, July 15, 2013

how to select all options in multi select dropdown using jquery

When we use multi select drop down, we may consider the feature for selecting all and deselect all option for the respective Multi Select box.

Using jQuery, we can easily do the select all and deselect all option for the dropdown.

Below is the code to select all using jQuery

HTML
<select name="education" id="education" multiple="multiple">
<option value="1">Under Graduate</option>
<option value="2">Graduate</option>
<option value="3">Post Graduate</option>
<option value="4">Pursuing Graduation</option>
</select>

$('#education').find('option').attr('selected','selected');

Where 'education' is the id for the multi select & we are adding the attribute selected to get selected.

To deselect all using jQuery.

$('#education').find('option').removeAttr('selected','selected');