Unstoppable Domains โ€” Expired Auctions

Text Size for Disabilities

NamecheapNamecheap
Watch

D@Z

Established Member
Impact
0
I've seen a couple of website use images, where once clicked, you can increase or decrease the size of the text on the page, making it easier for users with disabilities, such as bad eyesight.

Can anyone point me in the right direction on how to do this? Like is it CSS, JavaScript or any free scripts? Thanks.
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Unstoppable Domains โ€” AI StorefrontUnstoppable Domains โ€” AI Storefront
textsizer.js:
Code:
/*------------------------------------------------------------
	Document Text Sizer- Copyright 2003 - Taewook Kang.  All rights reserved.
	Coded by: Taewook Kang ([email protected])
	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( 'p','h1','h2','h3','h4');

//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 ];
	}
}

The HTML:
Code:
In your <head>:
<script type="text/javascript" src="textsizer.js"></script>

In your <body>:
<a href="#" onclick="ts('body',1);" title="Make Text Larger">Larger Text</a>
<a href="#" onclick="ts('body',-1);" title="Make Text Smaller">Smaller Text</a>
 
0
•••
Great! Thanks, Dan. I will try this out soon when I have some spare time. On my stylesheet for my website my fonts are set to px, does this matter?
 
0
•••
D@Z said:
On my stylesheet for my website my fonts are set to px, does this matter?
I don't think so. :)
 
Last edited:
0
•••
Ok, thanks for your help anyway. The script works great with my news articles. :)
 
0
•••
CatchedCatched
Escrow.com
Spaceship
Rexus Domain
CryptoExchange.com
Domain Recover
CatchDoms
DomainEasy โ€” Live Options
DomDB
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back