Archive for category Web development

Count the number of javascript eventhandlers in the DOM-tree.

Posted by Erik Karlsson in JavaScript, Web development on July 23rd, 2009

Sometimes I’ve wanted to find out how many eventhandlers there are attached to the DOM-tree I’m working with, but I’ve never found a good tool for doing this. I decided to write a simple javascript snippet that traverses the tree and finds the fact for me and it looks like its working pretty good too.

Please don’t hesitate to comment if you find this useful or have any improvement suggestions

/**
* @author Erik Karlsson, www.nonobtrusive.com
**/
function countEventHandlers(){
 
var elements = document.getElementsByTagName("*"), len = elements.length,
     counter = 0,
     countermap = [],
     /* fill up with more events if needed or just use those you want to look for */
     events = ['onmousedown', 'onmouseup', 'onmouseover', 'onmouseout', 
                   'onclick', 'onmousemove', 'ondblclick', 'onerror', 'onresize', 'onscroll',
                   'onkeydown', 'onkeyup', 'onkeypress', 'onchange', 'onsubmit'], 
     eventlen = events.length;
 
for ( var i = eventlen-1; i >= 0; --i ) {
    countermap[events[i]] = 0;   //reset the map
}
 
 
while ( len-- ) {  //go through all DOM-nodes
    var element = elements[len],
        tmp = eventlen;
    while ( tmp-- ) {  //go through all events defined above for each node and see if it exists.
        if ( element[events[tmp]] ) {
            counter++;
            countermap[events[tmp]]++;
        }
    }    
}
 
var someStats = counter + " events found in total\n\n";
for ( var o in countermap ) {
   someStats += o + " was found " + countermap[o] + " times\n";
}
alert(someStats);
 
}

, , , , , ,

No Comments

So you think you’re writing effiecent jQuery selectors?

Posted by Erik Karlsson in JavaScript, Web development, jQuery on July 18th, 2009

Think again if you’re writing selectors such as

$("div#myId")

When selecting against the DOM ID the fastest way to get the node is to use only the id:

$("#myId") //will translate into document.getElementById("myId") internally

otherwise jQuery will first get all DIV-nodes then manually iterate over them looking for an attribute id that’s equal to “myId”. In a case with a large DOM-tree this could be a large performance-hit making your site unusable on slower computers if you’re using selectors like this everywhere.

On the other hand when selecting against CSS-classes it’s faster to use

$("div.myClass")

than just

$(".myClass")

,

No Comments

Strict standards could break admin css in wordpress

Posted by Erik Karlsson in PHP, Web development, Wordpress on July 18th, 2009

The following method in class.wp-scripts.php could break your css if you have strict standards enabled on your server.

	function set_group( $handle, $recursion, $group = false ) {
		$grp = isset($this->registered[$handle]->extra['group']) ? (int) $this->registered[$handle]->extra['group'] : 0;
		if ( false !== $group && $grp > $group )
			$grp = $group;
 
		return parent::set_group( $handle, $recursion, $grp );
	}

This is because the WP_Scripts inheritance from WP_Dependencies does not follow the signature of the method. WP_Dependencies have the set_group function declared without any default parameters while the subclass have defaulted $group to false.

Easy fix! Just remove the default value on the group parameter so it looks like this:

	function set_group( $handle, $recursion, $group ) {
		$grp = isset($this->registered[$handle]->extra['group']) ? (int) $this->registered[$handle]->extra['group'] : 0;
		if ( false !== $group && $grp > $group )
			$grp = $group;
 
		return parent::set_group( $handle, $recursion, $grp );
	}

The only place I can find this possible being called from send in a value anyway so there’s no need for having the default value as of right now.

1 Comment

How to get the amount of days in an arbitrary month with leapyear in consideration

Posted by Erik Karlsson in JavaScript, Web development on July 18th, 2009 

function daysInMonth( month, year ) {
       var now  = new Date();
       month = month || now.getMonth()+1; //this month as default
       year = year || now.getFullYear();    //this year as default
       return new Date(year, month, 0).getDate();
}
 
//consider January as month 1, February as month 2 ... December 12
 
daysInMonth( 2, 2003 ); //returns 28, not leap-year
daysInMonth( 2, 2004 ); //returns 29, leap-year
daysInMonth( 7, 2009 ); //returns 31
daysInMonth( ); //returns the amount of days in the current month

, , , ,

No Comments