Amareswar Reddy

I was surprised to see that jquery handles events in a different way as compared to core javascript event handling. Here is the case jQuery("#testAnchor").click(function() { //do some thing return false; }); If you are returning false in an event handler in jquery, that means you are stopping propagation and preventing default. All the handlers listening on the click event on that element will be called and the event will not be propagated to the parent element. If you use document.getElementById("testAnchor").onclick = function(event) { event = event || window.event; //do some thing return false; returning false in this case wont stop propagating the event. we should indeed say event.cancelBubble= true or event.stopPropagation() based on the browser.

If you are listening to click events of anchors to do some operation of showing a dialog or doing something else, you have to know whether ctrl key is pressed or not as you may not want your custom logic to kick in when ctrl key is pressed as user wants to open the link in the new tab. He is the solution, assuming jquery is used jQuery("a.link").click(function(event) { if(event.metaKey || event.ctrlKey) { //ctrl key is pressed } }); checking for metaKey apart from ctrlKey property of event as mac's command key press will set metaKey property to true and ctrlKey for remaining browsers.

Sometimes it is required to know whether the code is being executed inside an iframe or not. Following code works for all browsers. var inIframe=false; try { inIframe = window.top.document == document; }catch(ex) { inIframe = true; } The reason for keeping try catch in the above logic is when ever window.top.document is accessed and if that document belongs to different domain, then IE throws Access Denied error.

Like IllegalStateException in java, IE also throws Undefined Error when you try to access xmlhttprequest's status property before reaching steady state 4. For example in the following code if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { var status = xmlhttp.status; var isSuccess = status >= 200 && status if (xmlhttp.readyState==4 && isSuccess) { alert(xmlhttp.responseText); } } alert("in ajax"); ...

Converting raw bytes size into human readable string is a very frequently used task. I developed a plugin that converts raw bytes into KB or MB and its usage is very simple. Suppose if you want to show 1000 bytes in human readable form inside a span assign the value as size attribute <span class="jqfilesize" size="1000"></span> and use jQuery(".jqfilesize").filesize(); output will be <span class="jqfilesize" size="1000">1 KB</span> Download the plugin here

Applying ellipsis class will put three dots at the end of single line of the content. Remember that it works only for block elements. .ellipsis { white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-binding:url("ellipsis-xbl.xml#ellipsis") } and ellipsos-xbl.xml is required for firefox

Javascript array object has lots of pre-defined functions that makes life easy. Among them, splice is the method lot of developers are not aware of. Using splice, you can remove an element in array, replace array contents without copying, iterating through entire elements. Prototype uses existence of splice method to identify whether an object is an array or not (Object.isArray). so, no need to worry about browser compatibilities. I used to iterate through entire array object to remove an element like the following v ar arrObj = ['1', '4', '3', '2']; var anotherArray = []; for (var i = 0;i <=arrObj.length; i++) { if(arrObj[i] != '3') { anotherArray.push(arrObj[i]); } } We need to iterate through entire array to remove an element if above method is followed. Using splice method, v ar arrObj = ['1', '4', '3', '2']; for(var i = 0; i <=arrObj.length; i++) { if(arrObj[i] == '3...