Text resizing with javascript and a scrollbar
Right, well the first thing to do is to get hold of the mootools library (see http://mootools.net/). There are other equally useful libraries out there which you may want to experiment with, but we’ve found there’s great support for mootools and a huge list of features.
Once you’ve installed the library somewhere suitable you simply include it in your html source (normally in the <head> section).
<script src="/js/mootools.js" mce_src="/js/mootools.js" type="text/javascript" />
Note: to make sure you’re always xhtml compliant, always ensure you close your html tags with the / character.
Now we’re onto the rest of the html code.
<div id="text_size">
<p>text size</p>
<div id="size_bar">
<div id="size_button"><!-- --></div>
</div>
<div id="reset_button">
<a href="#" mce_href="#" onclick="page.reset(); return false">reset</a>
</div>
</div>
That all looks too simple I hear you cry. Well, that’s the beauty of this type of approach, the code is kept to some simple html, a little css to style the elements correctly then a bit of javascript to do the hard work. The outer <div> is simply to hold all the elements together and can be styled however you see fit. The interesting bits are the “size_bar” and “size_button” divs. The reset button is simply to hold a javascript call to reset the sizing. Here’s the css code for the important parts.
#size_bar {
position: relative;
width: 80px;
height: 0;
margin: 8px auto 8px auto;
border-top: 1px solid #4d4d4d;
border-bottom: 1px solid #b2b2b2;
}
#size_button {
position: absolute;
top: -4px;
width: 12px;
height: 12px;
background: url(/images/size_button.gif);
cursor: e-resize;
}
All you need to do to complete the process is create a suitable size_button.gif (for the slider image itself) and place it in the appropriate location.
We’ve now created the html and css styling so everything should look the way you want it to on screen, now all we have to do is get it to work.
You need to create a simple javascript file, and again include it in your <head> section of the html.
<script src="/js/wsctextsize.js" mce_src="/js/wsctextsize.js" type="text/javascript" />
The following is all the javascript required to complete the process:
/*************************************************************************
This code has been developed by WSCreative
Copyright WSCreative November 2007
This notice must be retained in the code as is!
*************************************************************************/
var page = {
slider: "nAn",
pos: 25,
newSize: 1,
textSize: function() {
this.slider = new Slider( $( 'size_bar' ), $( 'size_button' ), {
steps: 50,
onChange: function( pos ) {
this.newSize = ( pos / 50 ) + 0.5;
this.pos = pos;
try{
document.body.style.fontSize=this.newSize + 'em';
}
catch(ex){alert(ex.message);}
},
onComplete: function() {
Cookie.remove( 'wscTextSize' );
Cookie.set( 'wscTextSize', this.pos, { path: '/', duration: 30 } );
}
});
if( Cookie.get( 'wscTextSize' ) ){
this.slider.set((Cookie.get('wscTextSize'))*1);
}
else this.slider.set( 25 );
},
reset: function(){
this.slider.set( 25 );
document.body.style.fontSize = '1.0 em';
this.pos = 25;
Cookie.set( 'wscTextSize', this.pos, { path: '/', duration: 30 } );
}
}
window.addEvent('domready', page.textSize);
So, what’s going on? It’s all fairly simple stuff, the window.addEvent(’domready’, page. textSize); is used to call the script once the page has loaded all the html elements (this is slightly different from an onload that would wait until all the images had loaded as well).
The variable page is effectively an object with the textSize function being triggered by the ‘domready’ event. There are some default values at the top of the object (slider, pos and newSize), all of which are created with default values. Slider is a slider bar object (courtesy of mootools), pos is the default current position of the slider and newSize is the font size (expressed in ‘em’ a relative measure for font sizes: see http://www.w3.org/TR/REC-CSS2/syndata.html#length-units).
The textSize function then creates a new slider object, in this case with 50 steps or positions for the slider. The onChange function tells the slider what to do when the position of the slider is changed. In this case we set newSize and pos then try and apply this to the body tag of the document. The important thing in getting this to work correctly is that all font sizes in the style sheet must be declared as ‘em’ fonts. The onComplete function is called when the slider stops moving and simply removes and replaces any cookies that may exist to specify the current text size.
Following through the textSize function the first time the function is run it will check to see if any cookies exist to set the font size. This will allow users to set the font size and move between pages without the size keep resetting itself. Finally, if no cookie exists, then the slider is set to the default size.
That’s all the difficult stuff done; the reset function is there purely to allow users to reset to the default setting. I’m sure you can work out yourselves how that works.
So, a tricky web design trick made simple. You can now add a scroll bar and resize the text on the page for users with some simple javascript. OK, this won’t work for anyone without javascript enabled, but all the standard browser functions still work and as it’s not critical to viewing the site it adds a nice touch.
Bookmark with: