Document Text Sizer Script

**ep32** · 04-11-2007, 11:31 AM

1) Script Title: Document Text Sizer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/textsizer.htm

3) Describe problem: my website pages contain ccs styles. This script resizes only the text without css style. How can apply on the script to change my styles as well?

thanks

**Twey** · 04-11-2007, 11:36 AM

If you use a relative unit (percentages are the only viable one, thanks to IE), the rest of your text will size with the base size.

**ep32** · 04-11-2007, 11:42 AM

thanks for your quick rensponse....i am quite new on the webdesign and as you can imagine allien to scripting. On the script customization says "First, within textsizer.js, you can add additional HTML tags the script should affect. Lets say your webpage's text are all controlled using explicit <font size="x"> tags. You can add "font" as a tag the script should affect.

Second, inside the code of Step 2, you may substitute "body" with another tag name or even ID name, to localize the text size manipulation to only the specified containers."

To be honest i dont understant what to type in order to change the "style 2" or "style 3" of my css styles.

thanks

**codeexploiter** · 04-11-2007, 11:58 AM

The script do overrides the CSS styles applied on the text (for me). You can try the below mentioned of mine to view that. It does present some illogical presentation while overriding the CSS styles.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.body
{
color:#FF0000;
font-size:18px;
}
</style>
<script type="text/javascript">
/*------------------------------------------------------------
	Document Text Sizer- Copyright 2003 - Taewook Kang.  All rights reserved.
	Coded by: Taewook Kang (txkang.REMOVETHIS@hotmail.com)
	Web Site: http://txkang.com
	Script featured on Dynamic Drive (http://www.dynamicdrive.com)
	
	Please retain this copyright notice in the script.
	License is granted to user to reuse this code on 
	their own website if, and only if, 
	this entire copyright notice is included.
--------------------------------------------------------------*/

//Specify affected tags. Add or remove from list:
var tgs = new Array( 'div','td','tr');

//Specify spectrum of different font sizes:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;

function ts( trgt,inc ) {
	if (!document.getElementById) return
	var d = document,cEl = null,sz = startSz,i,j,cTags;
	
	sz += inc;
	if ( sz < 0 ) sz = 0;
	if ( sz > 6 ) sz = 6;
	startSz = sz;
		
	if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

	cEl.style.fontSize = szs[ sz ];
	
	for ( i = 0 ; i < tgs.length ; i++ ) {
		cTags = cEl.getElementsByTagName( tgs[ i ] );
		for ( j = 0 ; j < cTags.length ; j++ ) 
		{
			cTags[ j ].style.fontSize = szs[ sz ];
		}
	}
}
</script>
</head>

<body>
<a href="javascript:ts('body',1)">+ Larger Font</a> | <a href="javascript:ts('body',-1)">+ Smaller Font</a>
<br>
<div class="body">This is a test</div>
</body>
</html>

For example in my demo page I have a CSS class in which I've mentioned font-size: 18px so whenever the page loads the content on which the CSS class applied will be somewhat big, now If I press +Larger Font link then it will not increase the size of the present text on which I've applied instead it will try to incrase the font size to medium in this case medium is smaller than 18px so the result would be a decrease in the font-size which violates the very nature of this script.

**ep32** · 04-11-2007, 12:53 PM

thanks it seems that it works (although some of the css styles they dont change but at least the main one does)

x

**Twey** · 04-11-2007, 12:58 PM

You still shouldn't be using absolute font sizes.

**tarausa** · 01-30-2009, 02:44 PM

I am having trouble using this text sizer. I have tried every thing to no success.
Any one have a suggestion?
The page I am trying to resize the text is http://www.usa-cal.com/html/about_our_products.html

Thread: Document Text Sizer Script

Thread Tools

Search Thread

Document Text Sizer Script

Document Text Sizer

Bookmarks

Bookmarks

Posting Permissions