Entry
How can you determine the width in pixels a string string will occupy on screen?
The reason we need this for is that we want to create tabs on the screen whose size should exactly m
Apr 6th, 2008 19:43
ha mo, Hermann Stamm-Wilbrandt, Thomas Junge, Colin Fraser,
Hello,
find the solution below as well as a demo Javascript application.
The width or height of a string is determined by placing the string
inside an invisible DIV element, and then getting clientWidth and
clientHeight! [tested with IE6.0.2, IE5.0 and Mozilla 1.7]
Hope this helps,
Hermann Stamm-Wilbrandt.
hermann@stamm-wilbrandt.de
=====================================================================
<head>
<script language="javascript" type="text/javascript">
<!--
function determine_string_width_and_height()
{
if (!document.getElementById) return;
var FONT_FAMILY = document.form1.fontname1.options
[document.form1.fontname1.selectedIndex].text;
var FONT_WEIGHT = document.form1.bold1.checked ? "bold" : "normal";
var FONT_STYLE =
document.form1.italic1.checked ? "italic" : "normal";
var FONT_SIZE = document.form1.fontsize1.options
[document.form1.fontsize1.selectedIndex].text + 'px';
var STR = document.form1.instring.value;
var VISIBLE =
document.form1.visible1.checked ? "visible" : "hidden";
var aDiv = document.getElementById('aDiv');
if (!aDiv) return;
aDiv.style.visibility = VISIBLE;
aDiv.style.fontFamily = FONT_FAMILY;
aDiv.style.fontSize = FONT_SIZE;
aDiv.style.fontStyle = FONT_STYLE;
aDiv.style.fontWeight = FONT_WEIGHT;
aDiv.innerHTML = STR;
document.form1.outstring.value = " --> " + aDiv.clientWidth + " x "
+ aDiv.clientHeight + " pixel";
document.form1.instring.focus();
}
function Init()
{
document.form1.visible1.click();
if (document.form1.visible1.checked)
document.form1.visible1.click();
}
window.onload=Init;
//-->
</script>
</head>
<body onkeydown="determine_string_width_and_height()">
<br>
<br>
<br>
<br>
<br>
<ul>
<li>Determine <em>width</em> and <em>height</em> of a <em>string</em>
<li>in <em>Javascript</em>
<li>by an <em>invisible DIV element</em> (<em>clientWidth</em> and
<em>clientHeight</em>)
<li>evaluating <em>all features</em> like <em>font-family, font-size,
font-style, ...</em>
</ul>
<form name="form1">
<select name="fontname1" size="1"
onChange="determine_string_width_and_height()">
<option>Arial</option>
<option>Courier New</option>
<option>Times New Roman</option>
<option selected>Verdana</option>
</select>
<br>
<input type="checkbox" name="italic1"
onclick="determine_string_width_and_height()">italic
<br>
<input type="checkbox" name="bold1"
onclick="determine_string_width_and_height()">bold
<br>
<select name="fontsize1" size="1"
onChange="determine_string_width_and_height()">
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>14</option>
<option>16</option>
<option>18</option>
<option selected>20</option>
<option>22</option>
<option>24</option>
<option>26</option>
<option>28</option>
<option>36</option>
<option>48</option>
<option>72</option>
</select> pixel
<br>
<input name="instring" type="text" size="30" maxlength="30"
value="test string" onkeyup="determine_string_width_and_height()">
<br>
<input name="outstring" type="text" size="30" maxlength="30" value="?"
onFocus="determine_string_width_and_height()">
<br>
<input type="checkbox" name="visible1"
onclick="determine_string_width_and_height()">show how it works
<br>
</form>
<div id="aDiv" style='left=5px; top=5px; color:#ff0000;
visibility:hidden; position:absolute; borderWidth:0px; padding:0px; z-
index:100'></div>
</body>
=======================================================================
Hello and thanks for the reply.
The reason is that we want to create tabs on the screen whose size
should exactly match the width of their contents. These strings are
static and cannot be edited by the user. Likewise, the font and size
are set to fixed values using a stylesheet. (We are building up an
Intranet application where we have a rather homogenous PC
configuration
landscape)
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com
