Wednesday, March 20, 2013

Native JavaScript | Remove DOM Element (easy!)

Hi, All.
If you'v been surfing my blog for a while, you may noticed that i am kindly a fun of simplifications and this article is not an exclusion from the rules. :)
Usually to remove an element, you need to perform quiet a few actions, as javascript gives you no easy way to do so.
I would like to explain and show how to easy remove DOM Element, don't forget to equip this function and add to your usable function list.
I also would really like if you still save the @author line, but i can forgive about it if you are really care for the code weight and minify the file.
A few actions to take before you remove is to find element, then traverse back to parent then from parent remove it's child. a complete mess - here it is simplified. Let's we move to the function itself and see how does it work.
/**
 * Remove DOM Element easier
 *
 * @author Valentin Ruskevych
 * @since 30 Dec 2012
 * 
 * @example
 *  document.getElementById('a').remove();
 */
HTMLElement.prototype.remove=function(){
 if (this.parentNode)
  this.parentNode.removeChild(this);
};

Let we break the function line by line to purely understand what is going on here.
Line: 1-9: Comments
Line: 10 : Add a new method "remove" to HTMLElement's prototype.
HTMLElement is a object that most page's elements inherits. If you know DOM Model, you probably know it.
Line: 11 : Ensure that the element we want to remove is having parent element by this.parentNode.
this - where comes from? this is belongs to context, and points to element that we called remove on.
example - document.getElementById('submit_button').remove(); - this points on element #submit_button
Line: 12 : finding parent of the element remove() called on, then remove it's child and pass "this" to the removeChild, so that making possible to remove parents child that is element we called remove on. a bit tricky, but, it is javascript :))

Hope i helped you to simplify/solve another problem :)

Sincerely,
VR

Native JavaScript Trim String Function (best performance)

Hi, All.

As we may already notice, sometimes we meet functionality requirements on page, app or extension that is quiet short and simple. There is no taste to load JavaScript Libraries such as jQuery, Prototype, ExtJS or any other. But using native JS made difficult for developers who only experienced with libraries, nowadays is a new trend.
Developer may tell you that he knows javascript, but reality proves that he only knows how to work with jquery and that is the end of his javascript knowledge.
My opinion, if coder tells you that he knows javascript - he must know it's internals.

Native javascript function TRIM to trim strings:

The trim function i'v coded is based on Steven Leviathan's researches and benchmarks of trimming methods.
Under these circumstances, i am not really developed it, but wrapped into a default String object's prototype to allow simpler use of string trimming function.
Take a look at the function, after the function is an example.
/**
 * Trim string method (regex way), based on Steven Levithan researches.
 *      Fastest triming on short strings, different aproach must be used for documents triming.
 * @author Rusevych Valentin
 * @since 16 Dec 2012
 * @return string trimmed.
 */
if (typeof String.prototype.trim !== 'function') {
    String.prototype.trim = function () {
        return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); // fastest method (~8.5ms per 1000 iterations)
    }
}

/**
 * Usage Example
 **/
var s = '  TestString ';
s.trim();
console.log(s);
// output "TestString"


Take it into your file of "usable" functionality.
Sincerely,
VR

Thursday, March 7, 2013

JavaScript - Detect Quirks Mode state in visitor's browser

Hi, All.

Q: Quirks Mode breaks my front-end. Is it possible to detect Quirks Mode state on visitor? A: Yes, Possible. I will show it off right now.

Now much developers knows about javascript properties, only the discovers or the ones with reach experience.
JavaScripts stores inside it's object, all about page(document).
Document has a lot of interesting information, one of these we will take a look at called "compatMode".
// My Detecting method.
var quirks = false;
(function(){
   if(document.compatMode == 'BackCompat'){
      quirks = true;
   }
}())
Why this way? Only quirks mode making troubles. compatMode will have BackCompat value whenever Quirks Mode is on in browser. This making possible to detect any browser with Quirks Mode and perform your DOM/Data manipulations to satisfy the visitor experience. Have fun. Good Luck!