PDA

View Full Version : 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:eek:

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.



<!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