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
0
Light Poster
Recommended Answers
Jump to PostYou could most likely use CSS.
All 4 Replies
hooknc
1
Posting Whiz in Training
You could most likely use CSS.
sandbox
0
Light Poster
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
0
Light Poster
ah shoot... when i rad this sections title.. i saw "java" when i am looking for javascript. sorry guys =)
MattEvans
473
Veteran Poster
Team Colleague
Featured Poster
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>
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.