J
Jon Brown
Flightless Bird
Using IE 7 & 8, I need to supply buttons on a page to allow the user to zoom
in or out (I know they could simply user the browser to do this but.........
it’s a long story!!) Experimenting with ways to achieve this, I am having
difficulty achieving the same level of functionality when programmatically
applying a zoom as appears available using the browser menu.
On the very basic webpage below, if I use ctrl (+/-) to zoom the page, the
page content is resized correctly and everything if fine; However, if I apply
a zoom level by setting the .style.zoom property programmatically when
pressing the "Go" button, the zoom occurs but the contained paragraph is not
resized meaning that the text is now off the page and, despite setting the
overflow property to "auto" no scrollbar is present.
Am I omitting a step somewhere? Any help would be much appreciated!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http
/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http/www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function zoomIE()
{
var content = document.getElementById("content");
document.body.style.zoom = "1.2";
document.body.style.overflow = "auto";
content.style.overflow = "auto";
}
</script>
</head>
<div id="content">
<h2 id="pageName">Zoom</h2>
<input name="goButton" type="button" value="go" onclick="zoomIE();" />
<h3>Feature Title </h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum
condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy.
Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam
fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio.
Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et,
tortor. </p>
</div>
</div>
<br />
</body>
</html>
in or out (I know they could simply user the browser to do this but.........
it’s a long story!!) Experimenting with ways to achieve this, I am having
difficulty achieving the same level of functionality when programmatically
applying a zoom as appears available using the browser menu.
On the very basic webpage below, if I use ctrl (+/-) to zoom the page, the
page content is resized correctly and everything if fine; However, if I apply
a zoom level by setting the .style.zoom property programmatically when
pressing the "Go" button, the zoom occurs but the contained paragraph is not
resized meaning that the text is now off the page and, despite setting the
overflow property to "auto" no scrollbar is present.
Am I omitting a step somewhere? Any help would be much appreciated!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http
/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http
/www.w3.org/1999/xhtml"><!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function zoomIE()
{
var content = document.getElementById("content");
document.body.style.zoom = "1.2";
document.body.style.overflow = "auto";
content.style.overflow = "auto";
}
</script>
</head>
<div id="content">
<h2 id="pageName">Zoom</h2>
<input name="goButton" type="button" value="go" onclick="zoomIE();" />
<h3>Feature Title </h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum
condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy.
Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam
fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio.
Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et,
tortor. </p>
</div>
</div>
<br />
</body>
</html>