var fontSize = 1;
function zoomIn() {
fontSize += 0.1;
document.body.style.fontSize = fontSize + "em";
}
function zoomOut() {
fontSize -= 0.1;
document.body.style.fontSize = fontSize + "em";
}
Code language: JavaScript (javascript)<input type="button" value="+" onClick="zoomIn()"/>
<input type="button" value="-" onClick="zoomOut()"/>
Code language: HTML, XML (xml)Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…
Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…
Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…
1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…
GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…
1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…
View Comments
Hi,
How to put the both codes in HTML? please show the steps...
Tq.
Hi Hasnor,
Following is the integrated code. Copy the code in FontZoomer.html and test it in your favorite browser.
<html> <head> <script language="javascript"> var fontSize = 1; function zoomIn() { fontSize += 0.1; document.body.style.fontSize = fontSize + "em"; } function zoomOut() { fontSize -= 0.1; document.body.style.fontSize = fontSize + "em"; } </script> </head> <body> <input type="button" value="+" onClick="zoomIn()"/> <input type="button" value="-" onClick="zoomOut()"/> A quick brown fox jumps over lazy dog. </body> </html>Tq.... just put the codes in the head of html? .... how to put in the body part........
Hi Hasor,
I have changed the code in my previous comment. take a look.
Paste the javascript code in HEAD and buttons in BODY.
good
Thanks Viral Patel. Your code look very simple, I applied it on my test page, it worked very well. And I have a question related to that. I want to use cookie to carry whatever font size the users using to the next page they go (of course on the same web site). I found this code and put right before the tag but it doesn't work. I'm not a programmer, can you please address me on this? Thanks.
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
good job done by you.thnx for that.but when I am using master page that time it doesn’t work. Can you please guide me on this? Thanks.
thanks for the code of simple font zoomer in JavaScript
what is em in that code?
em is the unit of size used to define font size in CSS. 1 em is equals to default font size that you specify in body of html document. If no default value is specified then 1em = 16px. Read this for more details on em: http://css-tricks.com/css-font-size/
Love the script! Easy to work with.
Quick question: how do I specify that I only want what's in a certain div or iframe to zoom?
For example:
[code language="html"] <div id="contentBody"> [/code]
or
[code language="html"] <.iframe id ="topic"> [/code]
document.getElementById("something").style.fontSize = fontSize + "em";