Tag Archives: print

font-size and print “toolbar” :)

Posted by on July 21, 2009 No comments

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