Determining string length in pixels

**Grant Wagner** · Jul 20 '05, 09:33 AM

Re: Determining string length in pixels

Simon Wigzell wrote:
[color=blue]
> I am adapting a javascript pulldown menu system to my dynamic website
> generator - the arrays that hold the menu items information are read from a
> database and will be different for different users of my system.
> Unfortunately the javascript menu system requires that each menu cell's
> width be dimensioned. if I don't hard code a large enough value then long
> menu item names are trimmed, besides the fact that it then looks ugly for
> most menu items that are much smaller than the hardcoded width. What I would
> like to do is find the actual pixel width of a string which will have to
> take into account the font, the character size, bold on or off, number of
> characters and of course proportional font or not will make a difference
> too...is there a way of determining in advance how wide in pixels a string
> is going to be? e.g. if I set it to some hidden named html element with all
> of its style properties, could I then retrieve the width of that element
> with javascript? Thanks![/color]

<body onload="test('s ome text');test('so me longer text');">
<script type="text/javascript">
function test(s) {
if (document.getEl ementById) {
var rulerSpan = document.getEle mentById('ruler ');

rulerSpan.inner HTML = s;

alert(rulerSpan .offsetWidth);
}
}
</script>

<span id="ruler" style="visibili ty:hidden;"></span>

You'd class the span the same as the menu items so they'd inherit the font
family/size/etc.

It should work in IE 5.5+, Netscape 6 and Opera 7+.

--
| Grant Wagner <gwagner@agrico reunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*

Microsoft Learn: Build skills that open doors in your career

http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

Gain technical skills through documentation and training, earn certifications and connect with the community

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html

Determining string length in pixels

Determining string length in pixels

Comment