Zoom in and Zoom out text using Javascript

In this tutorial i am going to explain about the zoom in and zoom out the text simple way using java script. This is one of the simple concept , This will helped somewhere in the websites or applications. In this example each click it decrease and increase the font size by 1.1 px , The new font size is multiplication of 1.1 px.

Here we have the demo pages and please check it out the demo pages and the source code, Customize the code according to your requirement.


Zoom in and Zoom out text using Java script:

index.php

<script language="javascript">
fontSize=26;
function zoomintext(idText){
newfontSize=fontSize*(1.1);
document.getElementById(idText).style.fontSize =newfontSize+'px';
fontSize=newfontSize;
}
function zoomouttext(idText){
newfontSize=fontSize/(1.1);
document.getElementById(idText).style.fontSize =newfontSize+'px';
fontSize=newfontSize;
}
</script>
<div id="zoomtextdiv"> <a href="http://www.sanwebcorner.com/">SAN WEB CORNER</a></div><br />
<a href="#" onclick="javascript:zoomintext('zoomtextdiv')">Zoom In</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onclick="javascript:zoomouttext('zoomtextdiv')">Zoom Out</a>


Post a Comment

0 Comments