•
•
•
•
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
![]() |
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
Location: Socialist Republic of Boulder
Posts: 216
Reputation:
Rep Power: 4
Solved Threads: 6
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: Jul 2006
Location: Deptford, London
Posts: 954
Reputation:
Rep Power: 5
Solved Threads: 48
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...
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.
![]() |
•
•
•
•
•
•
•
•
DaniWeb Java Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
- Programming FAQ - Updated 1/March/2005 (Computer Science and Software Design)
- Huge Dynamic arrays in QB45, BC7 (Legacy and Other Languages)
- kb preloader for dynamic files (Graphics and Multimedia)
- Sweet text link network (Relevant Link Exchanges)
Other Threads in the Java Forum
- Previous Thread: join thread
- Next Thread: Data structure + GUI question.


Linear Mode