Hi i develop my web site and i want to make two buttons (+ and -) with functions of ctr+ and ctr- for zoom in and zoom out of whole web page in all browsers. I need javascript code for this purpose Can anybody help?

Hi i develop my web site and i want to make two buttons (+ and -) with functions of ctr+ and ctr- for zoom in and zoom out of whole web page in all browsers. I need javascript code for this purpose Can anybody help?

• javascript

• 3 As you pointed out, browsers have this feature built in. Why do you feel the need to simulate it with a UI that users' won't be familier with? – Quentin Commented May 12, 2011 at 11:52
• Similar question: stackoverflow./questions/2578354/… – stivlo Commented May 12, 2011 at 11:58
• This is client request... Not my :) – user750487 Commented May 12, 2011 at 12:05

3 Answers 3

I hope this helps you ! This will zoom the entire body tag

var currentZoom = 100;
function zoom(paramvar)
{
  currentZoom += paramvar;
  document.body.style.zoom =  currentZoom + "%" 
}

<button onclick="zoom(+10);">Zoom In</button>
<button onclick="zoom(-10);">Zoom Out</button>

You have apply a logic to retain the current zoom size and increment/decrement parameter to find the required width. You can customize the following function as per your requirement.

function zoom()
{
var wdth = 1024; //Change this variable to match your configuration
document.body.style.zoom = screen.width/1024;
document.Fm.TxAre.value=1024;
alert("1024 ? : "+screen.width/1024);
}

This is just a quick solution. There are lot of better options available in the web. Just thought of sharing an easy method without using third party solution.

you can use

document.body.style.zoom

also in CSS :

element{zoom:<value>;}