Adil's blog Blog about web-development.

21Jul/091

font-size and print “toolbar” :)

Sometimes users need to make the font size larger for easy reading the text. It happens usually in news portals or some web sites like the web site of my university www.bsu.edu.az.

And also it's better to make the print version of the page. When saying print version it means that black text on white background without any styles and something else.

Let's begin. Simply insert this code to your HTML page:

<script type="text/javascript" src="http://tpl.bdu.az/toolbar.js"></script>
<div style="text-align:right" id="adilToolbar">
<a href="javascript:adilTextDec('content')"><img src="http://tpl.bdu.az/images/font_size_less.png"/></a>
<a href="javascript:adilTextInc('content')"><img src="http://tpl.bdu.az/images/font_size_up.png"/></a>
<a href="javascript:adilTextPrint('content')"><img src="http://tpl.bdu.az/images/printer.png"/></a>
</div>

toolbar.js:

 
var adilTextSize = 100; // general variable for saving the current textsize by percents.
 
function adilTextInc(objid) {
	// I think to make the font size 200% larger is enough 
	if (adilTextSize <=200)	adilTextSize += 20; // increment by 20%
	document.getElementById(objid).style.fontSize = adilTextSize + '%';
}
 
function adilTextDec(objid) {
	if (adilTextSize >=80) adilTextSize -= 20; // decrement by 20%
        document.getElementById(objid).style.fontSize = adilTextSize + '%';
}
 
function adilTextPrint(objid) {
	// open new window
	var doc=window.open('','name','height=600,width=800');
 
	doc.document.write('<html><head><title>Print a page</title>');
	doc.document.write('</head><body>');
 
	// copy the content of the page
	doc.document.write(document.getElementById(objid).innerHTML);
 
	// remove out toolbar if it's there
 
	doc.document.write('<script type="text/javascript">');
	doc.document.write('try{document.getElementById(\'adilToolbar\').style.display=\'none\';}catch(e){}');
	doc.document.write('</script>');
 
	doc.document.write('</body></html>');
 
	// flush the input
	doc.document.close();
 
	// print the page
	doc.print();	
}

P.S. The button for decrement of the font-size is for eagles. :-P

Tagged as: , , 1 Comment
   
I will back after 26 days from military service.

Imagination is more important than knowledge. — Albert Einstein

Categories