Ges
11-01-2006, 06:16 AM
Recently, the British Standards Institute ( BSi ), published new guidelines for user friendly web sites for the disabled. The paper is called PAS 78 ( Public Availability Specification - 2006 ). Google and others are in the process of 'rating' sites that endeavour to help with these issues. I'm sure that other countries will follow soon. My site attempts to help the partially sighted in that all the main text in <div>'s and <p>'s can be expanded WITHOUT affecting the content of the site. Here is the Javascript along with a simple HTML test file.
Javascript - make this external and call it pas78.js
// **** Absolute Positioning - Displacing Lower elements
//
// If the element containg the text has the default positioning of 'relative'
// the expanding text will display the elements below.
// To prevent this the element containing the text must be assigned an inline syle style position of 'position:absolute;'
// and nested in an element with a style position of relative.
// e.g.
// <div style="position:relative;width:140px;height:100px;test-align:center;" >
// <div id="fred" style="position:absolute;left:0px;font-size:14px;background-color:#f8cd76;" onclick="pasZoomText(this,14,20,500);" >
// The Quick Brown Fox<br>
// The Quick Brown Fox<br>
// </div>
// </div>
//
var pasBlankImg='null'; // a blank .gif as a background image or null if not required null;
var pasOOPCnt=0;
function pasZoomText(pasobj,passsz,pasfsz,passpd)
{
if (typeof(pasobj)=='string')
{ pasobj=document.getElementById(obj);
}
if (!pasobj.oopct)
{
passpd=passpd||100;
if (pasBlankImg)
{
pasobj.style.backgroundImage='url('+pasBlankImg+') ';
}
pasobj.oopct=new pasOOPTxtZoom(pasobj,passsz,pasfsz,passpd);
}
clearTimeout(pasobj.oopct.to);
pasobj.oopct.minmax[4]*=-1;
pasobj.oopct.cngtxt();
}
function pasOOPTxtZoom(pasobj,passsz,pasfsz,passpd)
{
this.obj=pasobj;
if (pasobj.style.position)
{
if (pasobj.style.position='absolute')
{
this.abs=[pasobj.offsetLeft,pasobj.offsetWidth];
}
}
this.ref='pasoopct'+pasOOPCnt++;
window[this.ref]=this;
this.minmax=[passsz,Math.min(passsz,pasfsz),Math.max(passsz,pas fsz),passpd,(passsz<pasfsz)?-1:1];
this.to=null;
}
pasOOPTxtZoom.prototype.cngtxt=function()
{
if ((this.minmax[4]>0&&this.minmax[0]<this.minmax[2])||(this.minmax[4]<0&&this.minmax[0]>this.minmax[1]))
{
this.obj.style.fontSize=(this.minmax[0]+=this.minmax[4])+'px';
if (this.abs)
{
this.obj.parentNode.style.width=(this.obj.offsetWi dth+parseInt(this.obj.style.fontSize))+'px';
this.obj.parentNode.style.left=(parseInt(this.obj. style.fontSize)/2)+'px';
}
this.to=this.setTimeOut('cngtxt();',this.minmax[3]);
}
}
pasOOPTxtZoom.prototype.setTimeOut=function(pasf,p asd)
{
this.to=setTimeout('window.'+this.ref+'.'+pasf,pas d);
}
And here is an HTML test code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="pas78.js">
<!--
//-->
</script>
</head>
<body>
<p id="pas_78" onclick="pasZoomText(this,14,30,10);">
PARAGRAPH FOR THE PARTIALLY SIGHTED<br>
See The Ability Not The Disability<br><br>
parameter 0 = the element object or unique ID name (object or string)<br>
parameter 1 = start text size (digits)<br>
parameter 2 = finish text size (digits)<br>
parameter 3 = the speed of change (digits/lower number is faster)<br>
</p>
<div id="pas7_8" onclick="pasZoomText(this,14,30,10);">
DIV FOR THE PARTIALLY SIGHTED<br>
See The Ability Not The Disability<br><br>
parameter 0 = the element object or unique ID name (object or string)<br>
parameter 1 = start text size (digits)<br>
parameter 2 = finish text size (digits)<br>
parameter 3 = the speed of change (digits/lower number is faster)<br>
</div>
</body>
</html>
Hope everyone finds this useful.
More info about these web site issues can be found at;
http://www.mouseability.co.uk/
and
http://www.abilitynet.org.uk
There are direct links there to the PAS 78 document.
Regards,
Ges.
Javascript - make this external and call it pas78.js
// **** Absolute Positioning - Displacing Lower elements
//
// If the element containg the text has the default positioning of 'relative'
// the expanding text will display the elements below.
// To prevent this the element containing the text must be assigned an inline syle style position of 'position:absolute;'
// and nested in an element with a style position of relative.
// e.g.
// <div style="position:relative;width:140px;height:100px;test-align:center;" >
// <div id="fred" style="position:absolute;left:0px;font-size:14px;background-color:#f8cd76;" onclick="pasZoomText(this,14,20,500);" >
// The Quick Brown Fox<br>
// The Quick Brown Fox<br>
// </div>
// </div>
//
var pasBlankImg='null'; // a blank .gif as a background image or null if not required null;
var pasOOPCnt=0;
function pasZoomText(pasobj,passsz,pasfsz,passpd)
{
if (typeof(pasobj)=='string')
{ pasobj=document.getElementById(obj);
}
if (!pasobj.oopct)
{
passpd=passpd||100;
if (pasBlankImg)
{
pasobj.style.backgroundImage='url('+pasBlankImg+') ';
}
pasobj.oopct=new pasOOPTxtZoom(pasobj,passsz,pasfsz,passpd);
}
clearTimeout(pasobj.oopct.to);
pasobj.oopct.minmax[4]*=-1;
pasobj.oopct.cngtxt();
}
function pasOOPTxtZoom(pasobj,passsz,pasfsz,passpd)
{
this.obj=pasobj;
if (pasobj.style.position)
{
if (pasobj.style.position='absolute')
{
this.abs=[pasobj.offsetLeft,pasobj.offsetWidth];
}
}
this.ref='pasoopct'+pasOOPCnt++;
window[this.ref]=this;
this.minmax=[passsz,Math.min(passsz,pasfsz),Math.max(passsz,pas fsz),passpd,(passsz<pasfsz)?-1:1];
this.to=null;
}
pasOOPTxtZoom.prototype.cngtxt=function()
{
if ((this.minmax[4]>0&&this.minmax[0]<this.minmax[2])||(this.minmax[4]<0&&this.minmax[0]>this.minmax[1]))
{
this.obj.style.fontSize=(this.minmax[0]+=this.minmax[4])+'px';
if (this.abs)
{
this.obj.parentNode.style.width=(this.obj.offsetWi dth+parseInt(this.obj.style.fontSize))+'px';
this.obj.parentNode.style.left=(parseInt(this.obj. style.fontSize)/2)+'px';
}
this.to=this.setTimeOut('cngtxt();',this.minmax[3]);
}
}
pasOOPTxtZoom.prototype.setTimeOut=function(pasf,p asd)
{
this.to=setTimeout('window.'+this.ref+'.'+pasf,pas d);
}
And here is an HTML test code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="pas78.js">
<!--
//-->
</script>
</head>
<body>
<p id="pas_78" onclick="pasZoomText(this,14,30,10);">
PARAGRAPH FOR THE PARTIALLY SIGHTED<br>
See The Ability Not The Disability<br><br>
parameter 0 = the element object or unique ID name (object or string)<br>
parameter 1 = start text size (digits)<br>
parameter 2 = finish text size (digits)<br>
parameter 3 = the speed of change (digits/lower number is faster)<br>
</p>
<div id="pas7_8" onclick="pasZoomText(this,14,30,10);">
DIV FOR THE PARTIALLY SIGHTED<br>
See The Ability Not The Disability<br><br>
parameter 0 = the element object or unique ID name (object or string)<br>
parameter 1 = start text size (digits)<br>
parameter 2 = finish text size (digits)<br>
parameter 3 = the speed of change (digits/lower number is faster)<br>
</div>
</body>
</html>
Hope everyone finds this useful.
More info about these web site issues can be found at;
http://www.mouseability.co.uk/
and
http://www.abilitynet.org.uk
There are direct links there to the PAS 78 document.
Regards,
Ges.