Zenovation's Blog » css

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

Michael — Mon, 16 Jan 2012 14:59:01 +0000

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:

^?View Code JAVASCRIPT

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

Here’s the source.

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

^?View Code JAVASCRIPT

   // 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!

Drawing a quote box with css

Michael — Sun, 13 Nov 2011 20:08:33 +0000

I recently searched El Goog for a way to drawing a quote box with only css and came across several ideas. Nicholas Gallagher had the simplest, and most compatible approach found during my quick surf, in his article titled “Pure CSS speech bubbles.”

Essentially, his quote box, or speech bubble, came down to the following simple CSS code (there is no HTML or JS involved) and even works in IE; nice!

^?View Code CSS

.triangle-border.left {
    margin-left: 30px;
}
 
.triangle-border {
    border: 5px solid #5A8F00;
    color: #333333;
    margin: 1em 0 3em;
    padding: 15px;
    position: relative;
}

Get elements by CSS class name in javascript

Michael — Thu, 17 Jun 2010 19:59:59 +0000

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:

^?View Code JAVASCRIPT

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 &lt; 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:

^?View Code JAVASCRIPT

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.

Great Compilation of CSS Techniques

Michael — Thu, 20 Aug 2009 16:09:55 +0000

This compilation is awesome, covering things like fluid horizontal and vertical layouts, sprites, and many other excellent techniques for CSS: http://www.smashingmagazine.com/2009/07/20/50-new-css-techniques-for-your-next-web-design/