THis i sprobably a fairly simple question to answer, but i dont know much about writing in javascript. IM trying to design a webpage in which the h1 tag will dynamicly size so that it spans across the width of the page. I know this can't be done without javascript because every browser and resollution renders text differently. Any hints on how i could go about doing this?

10 Years
Discussion Span
Last Post by MattEvans

No. You can't. Well, not completely. There are several CSS hacks that i could use to accomplish this. However, hacks don't work for every browser and this is were my problem lies. I'm trying to make something universal and i know javascript is pretty much a universal language for most browsers


ah shoot... when i rad this sections title.. i saw "java" when i am looking for javascript. sorry guys =)


I have no idea why you'd wanna do this! and yeah, Java != JavaScript, although clearly some copying went on, on more levels than just name... JavaScript is NOT the same on all browsers though.

The code below is tested in Firefox and IE - it's a bit hacky to get the window width on a browser that doesnt define the window.innerWidth property by using an absolutely placed div element and measuring it.. but it works nonetheless.

Be careful what you put in the h1 tag; if it's short, then it'll take up most of the vertical page estate at reasonable page sizes, don't put page breaks in it either :|.

This only affects one id-ed element. "factor" is an arbitrary value, 2 is probably a little too big...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
var factor = 2;
function adjustSize(txt){
 var target = document.getElementById(txt);
 var charCount = target.innerHTML.length;
 var docWidth;
  docWidth = window.innerWidth;
  docWidth = document.getElementById('ruler').style.pixelWidth;
 target.style.fontSize = (docWidth * factor)/charCount + "px";
<body onResize="adjustSize('header')" onLoad="adjustSize('header')">
 <h1 id="header">hello!</h1>
 <div id="ruler" style="position: absolute; width: 100%"></div>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.