Comments on: Converting to Pixels with javascript http://blog.stchur.com/2006/09/20/converting-to-pixels-with-javascript/ If you don't expect too much from me, you might not be let down. Thu, 26 Jan 2012 08:23:55 +0000 hourly 1 http://wordpress.org/?v=3.3 By: sstchur http://blog.stchur.com/2006/09/20/converting-to-pixels-with-javascript/comment-page-1/#comment-128359 sstchur Fri, 16 Dec 2011 18:59:26 +0000 http://stchur.com/blog2/2006/09/20/converting-to-pixels-with-javascript/#comment-128359 Joe: This is a little bit tricky because you have to consider the fact that when you specify a dimension as a percentage in CSS, it's a percentage of the parent's STYLE height (that is, its height as specified in CSS). Bear in mind that this could be rather different from its rendered height on screen. For instance, if you specify that an element have height: 400px, but then also give it 10px padding all around, and a 20px border all around, the total height (offsetHeight) will actually be 60px more (30px on top and bottom). However, that extra 60px doesn't come into play when calculating the height of some child element specified as a percentage. What you really want then is the style height of the outer element (that is, you need the height in pixels of the outer element as specified in the CSS). And to further complicate your life, that value might not be specified in px, and if you're in IE, then you'll need to convert it to px :-) And you'll need the same value of the inner element. Probably, your favorite Javascript library has a way of getting the height (or width) of an element as specified in CSS (note that reading .style.height will not work if the height was not specified via .style.height or via an inline style attribute). I don't know how to do this in jQuery or Prototype or Dojo, but in Gimme (my library) it would look like: var innerElemHeight = parseInt(Gimme('#innerElem').get_style('height')); var outerElemHeight = parseInt(Gimme('#outerElem').get_style('height')); var pct = innerElemHeight / outerElemHeight; Hope this helps! Joe:

This is a little bit tricky because you have to consider the fact that when you specify a dimension as a percentage in CSS, it's a percentage of the parent's STYLE height (that is, its height as specified in CSS). Bear in mind that this could be rather different from its rendered height on screen.

For instance, if you specify that an element have height: 400px, but then also give it 10px padding all around, and a 20px border all around, the total height (offsetHeight) will actually be 60px more (30px on top and bottom). However, that extra 60px doesn't come into play when calculating the height of some child element specified as a percentage.

What you really want then is the style height of the outer element (that is, you need the height in pixels of the outer element as specified in the CSS). And to further complicate your life, that value might not be specified in px, and if you're in IE, then you'll need to convert it to px :-)

And you'll need the same value of the inner element. Probably, your favorite Javascript library has a way of getting the height (or width) of an element as specified in CSS (note that reading .style.height will not work if the height was not specified via .style.height or via an inline style attribute).

I don't know how to do this in jQuery or Prototype or Dojo, but in Gimme (my library) it would look like:

var innerElemHeight = parseInt(Gimme('#innerElem').get_style('height'));
var outerElemHeight = parseInt(Gimme('#outerElem').get_style('height'));
var pct = innerElemHeight / outerElemHeight;

Hope this helps!

]]> By: joe http://blog.stchur.com/2006/09/20/converting-to-pixels-with-javascript/comment-page-1/#comment-128357 joe Fri, 16 Dec 2011 18:19:14 +0000 http://stchur.com/blog2/2006/09/20/converting-to-pixels-with-javascript/#comment-128357 great stuff! Now... How do I convert from pixels to percent? I have a div within a div, and I want to find the percent the inner div is of the outerdiv. I tried (slice/pie)*100; and then set the innerdiv to that percent, but sometimes it's off by a pixel. great stuff! Now… How do I convert from pixels to percent? I have a div within a div, and I want to find the percent the inner div is of the outerdiv. I tried (slice/pie)*100; and then set the innerdiv to that percent, but sometimes it's off by a pixel.

]]> By: raul http://blog.stchur.com/2006/09/20/converting-to-pixels-with-javascript/comment-page-1/#comment-100030 raul Wed, 26 Jan 2011 15:44:17 +0000 http://stchur.com/blog2/2006/09/20/converting-to-pixels-with-javascript/#comment-100030 if _context is optional and units are percentual, function raise an error when calling convertToPixels('75%') in this line: _context = _context.parentNode || _context; if _context is optional and units are percentual, function raise an error when calling convertToPixels('75%')
in this line:
_context = _context.parentNode || _context;

]]> By: sstchur http://blog.stchur.com/2006/09/20/converting-to-pixels-with-javascript/comment-page-1/#comment-1274 sstchur Wed, 07 May 2008 00:20:12 +0000 http://stchur.com/blog2/2006/09/20/converting-to-pixels-with-javascript/#comment-1274 Vlado, Thanks for the tip. I've only run across .scrollHeight once or twice and haven't really utilized it much. Do you know if it give the overall height of an element, including borders and padding? Or just the internal height of the element (minus borders and padding)? What does IE6 think of this property? Vlado,

Thanks for the tip. I've only run across .scrollHeight once or twice and haven't really utilized it much. Do you know if it give the overall height of an element, including borders and padding? Or just the internal height of the element (minus borders and padding)?

What does IE6 think of this property?

]]> By: Vlado http://blog.stchur.com/2006/09/20/converting-to-pixels-with-javascript/comment-page-1/#comment-1273 Vlado Tue, 06 May 2008 20:57:14 +0000 http://stchur.com/blog2/2006/09/20/converting-to-pixels-with-javascript/#comment-1273 This returns height of the element in pixels. In firefox 2.0.0.14 and IE 7. document.getElementById('div1').scrollHeight It seems to me that the browsers are implemented the way to complicate the things as much as possible. You must cheat all the time :-)) This returns height of the element in pixels.
In firefox 2.0.0.14 and IE 7.

document.getElementById('div1').scrollHeight

It seems to me that the browsers are implemented the way to complicate the things as much as possible. You must cheat all the time :-) )

]]> By: Ferrai http://blog.stchur.com/2006/09/20/converting-to-pixels-with-javascript/comment-page-1/#comment-14 Ferrai Tue, 04 Dec 2007 10:45:25 +0000 http://stchur.com/blog2/2006/09/20/converting-to-pixels-with-javascript/#comment-14 This is perfect: I'm writing a image replacement solution that will benefit hugely from this. Thanks for sharing it! This is perfect: I'm writing a image replacement solution that will benefit hugely from this. Thanks for sharing it!

]]> By: Smalltalk http://blog.stchur.com/2006/09/20/converting-to-pixels-with-javascript/comment-page-1/#comment-13 Smalltalk Mon, 05 Feb 2007 04:58:43 +0000 http://stchur.com/blog2/2006/09/20/converting-to-pixels-with-javascript/#comment-13 This has been very helpful. Thanks! This has been very helpful. Thanks!

]]>