HTML Forum

**Buchannon** · 11-01-2004, 05:19 PM

I'm trying to let the users that visit my website change the size of text on it via a dropdown menu, or links or whatever. Like this page on the top right corner: http://www.section508.gov/

I know if I want to change, text color for instance I could use this:
<a href="#" onClick="document.body.text='blue';">Blue!</a>
but how can I change the size of all the text? Thanks!

**Buchannon** · 11-02-2004, 03:02 PM

Is there not a quick easy way to do this?

**labintador** · 11-03-2004, 03:39 AM

Quote:

Originally Posted by Buchannon

I'm trying to let the users that visit my website change the size of text on it via a dropdown menu, or links or whatever. Like this page on the top right corner: http://www.section508.gov/

I know if I want to change, text color for instance I could use this:
<a href="#" onClick="document.body.text='blue';">Blue!</a>
but how can I change the size of all the text? Thanks!

i dont think this is js, its a server side script. dont know i think its coldfusion. you can make this easily in php.

**Buchannon** · 11-03-2004, 12:21 PM

So it has to be done server side? No way to do it in the browser?

**NateDogg** · 11-03-2004, 03:41 PM

You can do it client side

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Test</title>
<script type="text/javascript">

function changeSize(size)
{
	document.getElementById('test').style.font='normal normal normal ' + size + ' arial';
}//changeSize

</script>
</head>

<body>
	<form>
		<select title="Select a Font Size" name="FontSize" id="FontSize" style="width:75px" class="layoutMenu">
			<option value="10px">10px</option>
			<option value="11px">11px</option>
			<option value="12px" selected>12px</option>
			<option value="13px">13px</option>
			<option value="14px">14px</option>
			<option value="15px">15px</option>
			<option value="16px">16px</option>
			<option value="17px">17px</option>
			<option value="18px">18px</option>
			<option value="19px">19px</option>
			<option value="20px">20px</option>-->
		</select>

		<input type="Submit" title="Submit" text="Enter" alt="Enter" onclick="changeSize(FontSize.value);">
	</form>

<div id="test">
Here is some text

</div>

</body>
</html>

**Buchannon** · 11-03-2004, 04:16 PM

i just copy/pasted that into an html document and it didn't work NateDogg...

**NateDogg** · 11-04-2004, 12:51 AM

A revision then, change the javascript portion to

Code:

<script type="text/javascript">

function changeSize(size)
{
		  document.getElementById('test').style.fontSize=size;
}//changeSize

</script>

This is working on my machine, if there's any more problems, post here. I'll continue checking

**NateDogg** · 11-04-2004, 12:52 AM

oh, and make sure the parts that you want to change that their id's are 'test'

**Buchannon** · 11-04-2004, 11:19 AM

Weird that isn't working either. I got a simple link up that will change it:
<a href="#" onClick="document.getElementById('test').style.fon tSize='30px'">balk</a>
and that works, but when I click submit, it just seems to be acting like a refreshing tool. Thanks for the help Nate!

**Buchannon** · 11-04-2004, 11:37 AM

OK, for some reason the Submit button was messing it up. When I do it with a:

<input type="button" onclick="changeSize(document.getElementById('FontS ize').value);" value="GO TO IT!">

It works. But now when the user refreshes it, it doesn't stay... now my question is how can I make that value stick in a cookie or something?

**Buchannon** · 11-04-2004, 11:39 AM

And one more quick thing, why doesn't the thing work across tables? Like if I have the div id tags before and after the tables, it doesn't change the text size in the tables...

**NateDogg** · 11-04-2004, 12:57 PM

I don't know alot about cookies, but I think that if you did store the value in a cookie, you could put the changeSize function in the

Code:

<body onload="changeSize(cookieValue)">

or something like that and it should work.

I'm not certain why it doesn't change the tables. I'll look into that some more.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!