Java

Generating dynamic text sizes us JS

Please support our Java advertiser: Programming Forums - DaniWeb Sister Site

•

Join Date: May 2006

Posts: 37

Reputation: sandbox is an unknown quantity at this point

Solved Threads: 1

sandbox

Offline

Light Poster

Generating dynamic text sizes us JS

Aug 25th, 2006

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?

piratemon.day.be - My grass is always greener

•

Join Date: Aug 2005

Posts: 216

Reputation: hooknc is an unknown quantity at this point

Solved Threads: 8

hooknc

Offline

Posting Whiz in Training

Re: Generating dynamic text sizes us JS

Aug 25th, 2006

You could most likely use CSS.

•

Join Date: May 2006

Posts: 37

Reputation: sandbox is an unknown quantity at this point

Solved Threads: 1

sandbox

Offline

Light Poster

Re: Generating dynamic text sizes us JS

Aug 25th, 2006

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

piratemon.day.be - My grass is always greener

•

Join Date: May 2006

Posts: 37

Reputation: sandbox is an unknown quantity at this point

Solved Threads: 1

sandbox

Offline

Light Poster

Re: Generating dynamic text sizes us JS

Aug 25th, 2006

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

piratemon.day.be - My grass is always greener

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Generating dynamic text sizes us JS

Sep 1st, 2006

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...

 Help with Code Tags 
 Java Syntax (Toggle Plain Text) 
<!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>
<!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>