Dealing with CSS unit conversions in jQuery (px to em to percentages)

January 16, 2012 at 7:59 am · Filed under Programming

I spent some time working on a plugin to convert px to em and percentages for the upcoming Wordspot site.

The problem lies in the fact that measurements are based on the element they are attached to. Thus, to convert any CSS property (i.e. “5em” or “20%”) to pixels, one must determine what the relative height of a single line of text is in pixels.

This tool creates an invisible child element, measures a single line of text, and uses that for measurements.

Thus, to convert 90% (or any measurement, for that matter) to pixels, you could do the following:

   var borderRadiusPixels = $.UnitConverter.px( $('#mydiv').css('border-top-left-radius') );

Here’s the source.

For more advanced operations, you can do things like this:

   // create a new unit conversion
   var measurement = new $.UnitConverter( $('#mydiv') );
 
   // load a value to be examined
   measurement.load( $('#mydiv').css('border-left-width') );
 
   // add 10% to the height
   measurement.add( '10%' );
 
   // convert the measurement to various output types
   var pxs = measurement.px();
   var ems = measurement.convert( 'em' );
   var pct = measurement.convert( '%' );
 
   // determine what the measurement would be in another element (i.e. with a different line height)
   var clonePxs = measurement.clone( $('#nudderElement') ).px();

Hopefully this will give you a good head start on conquering similar issues, without having to invent any wheels!

Comments off

Regular expressions tester for your regex fiddling

January 6, 2012 at 1:48 pm · Filed under Programming

I was teaching a good friend a bit about regular expressions and wrote up a regular expression tester. It was a blast to write and simple to implement. It’s all in one HTML page so you can download it and fiddle away. Hope it helps someone else as well:

http://www.zenovations.com/blog/misc/regex.html

Comments off

Great JavaScript Regular Expressions reference

July 19, 2011 at 4:35 pm · Filed under Programming

Covers all sorts of great JavaScript regular expressions details, like look ahead/behind assertions and ?: operator (for grouping without storing match).

http://www.javascriptkit.com/javatutors/redev2.shtml

Comments off

Flash cards for jQuery certification

April 30, 2011 at 7:59 am · Filed under Programming

I’ve been studying up for a jQuery certification.  I created a set of almost a thousand flash cards to prepare. I’ll be adding more for the jQuery UI in the near future.

This is a great site as once registered, you can check any number of the flash cards sets, then say “study 50″ or “study 100″ and it will give you a random cross section of the sets to study for the day. It tracks correct/incorrect and provides charting, as well as some other nice tools (keyboard navigation–yay!)

Comments off

making Freeow work with jQuery 1.2.6

April 27, 2011 at 11:32 am · Filed under Programming

Hi,

I was able to make this lib work with jQuery 1.2.6 by making only this one-liner change:

    //this.element.hover(this.options.onHover); 
    this.element.hover(this.options.onHover, this.options.onHover);

Comments off

Get elements by CSS class name in javascript

June 17, 2010 at 12:59 pm · Filed under Programming

Dustin Diaz wrote a nice, efficient version of getElementByClassName(), which searches HTML elements and retrieves all the items with a given CSS class specified.

Of course, if you use a lib like extjs, jQuery, et al, then you have no need of this. But if you’re trying to hack out a greasemonkey script or insert some minimalist code, here it is.

And here it is, for my own archives:

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

Here’s another alternative I found on Glazblog, using xpath to search the document:

document.getElementByClassName = function(needle) {
  var xpathResult = document.evaluate('//*[@class = needle]', document, null, 0, null);
  var outArray = new Array();
  while ((outArray[outArray.length] = xpathResult.iterateNext())) {
  }
  return outArray;
}

I don’t really know which is more efficient, though I suspect the xpath search could be taxing in very large documents. I’m positive, based on IE’s fake implementation of key/value pairs in the DOM, that they both suck in IE, even if you specify a specific tag type to search. Obviously, providing a node makes the regular expression search faster, by virtue of having less content to parse.

Comments off