faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

41 of 54 people (76%) answered Yes
Recently 9 of 10 people (90%) answered Yes

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.
[email protected]
=====================================================================
<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