Zoom in - Zoom out

tinapa · Feb 19, 2009

Hi guys,

I don't know if this is the right place to ask this. But i am wanting for my website's visitors to have options/buttons for zooming in and out the whole page whether they are using IE or Firefox. The code version of "ctrl +" and "ctrl -".

Is this possible? Is javascript enough?

by the way, I am also using asp.net just in case there's other controls out there can do it.

Thanks guys!

feherke · Feb 19, 2009

Hi

As far as I know, that is not possible.

Feherke.

http://rootshell.be/~feherke/

BillyRayPreachersSon · Feb 19, 2009

If you specify all your font sizes and images widths in EMs and change the base font size using JS, would that work?

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

Diancecht · Feb 19, 2009

From the top of my head, IE offer the document.all.zoom funcionality, Opera has something similar and Firefox 3 was about to include it.

The EMs are the most ellegant option, I think, but very complicated to me. I'd think if that requirement is mandatory or a message like "use the zoom of your browser" is enough.

Cheers,
Dian

vicvirk · Feb 19, 2009

I saw jQuery had a script that did something like this, I wrote my own which basically gets the font size of an element and increases it by the requested amount...

Works on the PC (IE6+ FF2+ / Google Chrome) haven't tested it in any other browser or on the MAC...

I haven't written the zoom out yet, but you should be able to figure it out with the code provided

live Demo here:

http://vicvirk.com/_codeSamples/zoomIn.html

Calling it:

Code:

<a href="javascript:zoomIn('webBody',5,true)">click to zoom<a>

webBody = the element to zoom in (you can zoom into individual divs/spans/whatever

5 = take the original font size and multiply it by 5

true = get the original font size to set the final font size

I did try this by putting the font size in a style sheet but it wouldn't work - it only works when it's coded as an in-line style. Maybe someone can figure that one out

Code:

<html>
<head>
<script>

/*
Zoom In Script
Vic Virk - Feb 2009
Paramaters:
element - the element (by Id) to zoomIn
f - the font size to muliply by (i.e. if the current font size is 10, and f = 5, the final font size will be 50)
getOrig - set to true the first time around to set the final font size
Tested on PC:
IE 6 / 7
FF 2 / 3
Google Chrome
*/

var of = ""; // global var to hold original font size

function zoomIn(element,f,getOrig) { // element,font percentage, get the original font size
 
	// by default dont re-do it
	blnReDo = false;

	// get the element to zoomIn
	elem = document.getElementById(element);

	// if this is the first time through, set the original font size to the current value
	if (getOrig)
		of = parseInt(elem.style.fontSize);

	//rf = requested font size
	rf = of * f;
	 
	// cf = current font size
	cf = parseInt(elem.style.fontSize);
	 
	// if the current font size is less than the requested font size, increase it by 5 and set the redo var to true
	if (cf < rf) { 
		elem.style.fontSize = parseInt(cf) + 5;
		blnReDo = true;
	}

	 // repeat it every 10 ms to create an animated effect
	if (blnReDo)
		setTimeout("zoomIn('" + element + "'," + f + ",false)",10);
}
</script>
</head>
<body id="webBody" style="font-size:10px;">
<a href="javascript:zoomIn('webBody',5,true)">click to zoom<a>
<p><strong>Lorem ipsum</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam in sem. Vestibulum at dui sed mauris tincidunt laoreet. Sed vulputate cursus purus. In hac habitasse platea dictumst. Curabitur elit mauris, lobortis quis, vulputate in, sagittis vel, magna. Vestibulum tempor dolor bibendum neque. Cras malesuada, diam nec cursus consectetuer, magna dui dictum leo, ac congue massa justo et pede. In eget ipsum vel massa semper pulvinar. Nulla ante elit, sagittis in, volutpat sed, euismod quis, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam porttitor, mauris eget malesuada lacinia, leo ante vestibulum quam, non porta felis mauris et arcu. Donec id est vel mauris venenatis accumsan. Donec nibh risus, ultricies ac, iaculis non, faucibus eu, nibh.</p>
<p>Donec non ligula. Nunc leo justo, tempus quis, ornare in, ullamcorper at, mauris. Quisque in lectus. Donec eu sem. Sed faucibus risus eu leo. Nullam purus magna, laoreet id, aliquet vitae, blandit vitae, lorem. Etiam bibendum iaculis enim. Nam vehicula facilisis libero. Donec cursus eros et neque. Pellentesque at ligula. Nulla lorem lectus, viverra sit amet, scelerisque at, dignissim vel, ipsum. Maecenas lacus turpis, sollicitudin et, auctor scelerisque, suscipit vitae, ligula. In hac habitasse platea dictumst. In vel sem at massa euismod faucibus. Integer volutpat tincidunt dolor. Ut feugiat luctus ipsum. Praesent dapibus vestibulum mi. Ut dapibus rhoncus metus.</p>
<br /><br />
</body>
</html>

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.

feherke · Feb 19, 2009

Hi

vicvirk, that not seems to zoom the document. At least in Firefox the images are unaffected.

Feherke.

http://rootshell.be/~feherke/

vicvirk · Feb 19, 2009

Feherke,

I'm not about to provide the full code to do images as well...

Using what I've written and posted, you should be able to modify it to increase the size of the images or any other item on your page.

BTW: I still use IE 6 at work - over 97% of my users have not yet upgraded, but plans are to upgrade in the near future. In IE6, the CTRL + / - doesn't increase the size of images - only the text. I don't know about IE7 or 8, and yes, FF3 increases the size of images - don't know about FF2.

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.

tinapa · Feb 20, 2009

thanks very much guys. this looks promising.

anybody who had the zoom in/out effected on images?

tinapa · Feb 20, 2009

i've found a site that does it:

http://www.copperfieldpub.com////content/browser_button_scripts.htm

hope this helps to those who'll need this in the future.

thanks guys!

vicvirk · Feb 20, 2009

Hey Tina,

The zoom effects on that website are IE specific (won't work in any other browser).

In order to zoom in on the images, you can do the same thing as I did with the text and multiply the width/height by the zoom value (5 in my example above) and increase the css width/height attribute of the image over and over until the requested size is set. You can do the same thing with input boxes / select boxes / checkboxes or any other item...

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Zoom in - Zoom out

tinapa

Technical User

feherke

Programmer

BillyRayPreachersSon

Programmer

Diancecht

Programmer

vicvirk

Programmer

feherke

Programmer

vicvirk

Programmer

tinapa

Technical User

tinapa

Technical User

vicvirk

Programmer

Similar threads

Part and Inventory Search

Sponsor