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!
November 13, 2011 at 1:08 pm · Filed under Web Dev
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!
.triangle-border.left {
margin-left: 30px;
}
.triangle-border {
border: 5px solid #5A8F00;
color: #333333;
margin: 1em 0 3em;
padding: 15px;
position: relative;
} |
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.
August 20, 2009 at 9:09 am · Filed under Programming
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/
