Generating dynamic text sizes us JS

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?

sandbox

Light Poster

37 posts since May 2006

Reputation Points: 10

Solved Threads: 1

5 Years Ago

You could most likely use CSS.

hooknc

Posting Whiz in Training

219 posts since Aug 2005

Reputation Points: 11

Solved Threads: 8

5 Years Ago

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

sandbox

Light Poster

37 posts since May 2006

Reputation Points: 10

Solved Threads: 1

5 Years Ago

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

sandbox

Light Poster

37 posts since May 2006

Reputation Points: 10

Solved Threads: 1

5 Years Ago

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">
<html>
<head>
<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;
 if(window.innerWidth){
  docWidth = window.innerWidth;
 }else{
  docWidth = document.getElementById('ruler').style.pixelWidth;
 }
 target.style.fontSize = (docWidth * factor)/charCount + "px";
}
-->
</script>
</head>
<body onResize="adjustSize('header')" onLoad="adjustSize('header')">
 <h1 id="header">hello!</h1>
 <div id="ruler" style="position: absolute; width: 100%"></div>
</body>
</html>

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

This article has been dead for over three months

You