User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the Java section within the Software Development category of DaniWeb, a massive community of 422,993 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,928 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Java advertiser: Lunarpages Java Web Hosting
Views: 1067 | Replies: 4
Reply
Join Date: May 2006
Location: NJ
Posts: 37
Reputation: sandbox is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 1
sandbox's Avatar
sandbox sandbox is offline Offline
Light Poster

Generating dynamic text sizes us JS

  #1  
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
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Aug 2005
Location: Socialist Republic of Boulder
Posts: 216
Reputation: hooknc is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 6
hooknc hooknc is offline Offline
Posting Whiz in Training

Re: Generating dynamic text sizes us JS

  #2  
Aug 25th, 2006
You could most likely use CSS.
Reply With Quote  
Join Date: May 2006
Location: NJ
Posts: 37
Reputation: sandbox is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 1
sandbox's Avatar
sandbox sandbox is offline Offline
Light Poster

Re: Generating dynamic text sizes us JS

  #3  
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
Reply With Quote  
Join Date: May 2006
Location: NJ
Posts: 37
Reputation: sandbox is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 1
sandbox's Avatar
sandbox sandbox is offline Offline
Light Poster

Re: Generating dynamic text sizes us JS

  #4  
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
Reply With Quote  
Join Date: Jul 2006
Location: Deptford, London
Posts: 954
Reputation: MattEvans has a spectacular aura about MattEvans has a spectacular aura about 
Rep Power: 5
Solved Threads: 48
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Posting Shark

Re: Generating dynamic text sizes us JS

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

<!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>
If it only works in Internet Explorer; it doesn't work.
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

DaniWeb Java Marketplace
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes

Similar Threads
Other Threads in the Java Forum

All times are GMT -4. The time now is 3:34 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC