Organizational Research By

Surprising Reserch Topic

Question:Access browser's page zoom controls with javascript


I want to assign the browser's (IE/FF) page zoom controls (Menu: View/Zoom/Zoom In_Zoom Out) to two large "(+)(-)" icons on the web page so that vision impaired visitors can use these controls conveniently. A lot of searching for a suitable script came up empty so here I am. Any code you know that will do this simply?

asked Sep 13, 2013 in JAVASCRIPT by rajesh
edited Sep 12, 2013
0 votes
28 views



Related Hot Questions

2 Answers

0 votes
This is how I do something similar in jQuery: I made it up last night and tested on IE7, IE8, FF3.6, Safari 5, Chrome 10, and more. I have a banner that overflows when people zoom out on some browsers. So I check the width of my .nav. If it wraps it will be shorter that its full width. $(function() { //launch doZoomCheck on load doZoomCheck(); $(window).resize(function() { // .resize ALSO fires when people change the zoom of their browser. doZoomCheck(); }); function doZoomCheck() { var width = $(".nav ul").width(); // if the width of the banner isn't near 976 is prolly overflowing if ( width > 976) { // change to narrow font so menu doesn't wrap funny $(".nav ul li a, #footer .frankmed").css("font-family", "Arial Narrow"); } // if width is back to normal change the font back if ( width < 976) { // remove special styles when zoomed back out $(".nav ul li a").attr('style',''); } } }); I'm using jQuery 1.5, prolly works back to 1.3.2 but haven't checked. Please note: My font size is 20px already so Arial Narrow is very legible at that size. I am not stopping the user from changing the font size. I am not overriding it. I am just changing a font. Do not use this script for evil. Don't be stupid. Accessibility is important.
answered Sep 13, 2013 by rajesh
edited Sep 12, 2013
0 votes
This is how I do something similar in jQuery: I made it up last night and tested on IE7, IE8, FF3.6, Safari 5, Chrome 10, and more. I have a banner that overflows when people zoom out on some browsers. So I check the width of my .nav. If it wraps it will be shorter that its full width. $(function() { //launch doZoomCheck on load doZoomCheck(); $(window).resize(function() { // .resize ALSO fires when people change the zoom of their browser. doZoomCheck(); }); function doZoomCheck() { var width = $(".nav ul").width(); // if the width of the banner isn't near 976 is prolly overflowing if ( width > 976) { // change to narrow font so menu doesn't wrap funny $(".nav ul li a, #footer .frankmed").css("font-family", "Arial Narrow"); } // if width is back to normal change the font back if ( width < 976) { // remove special styles when zoomed back out $(".nav ul li a").attr('style',''); } } }); I'm using jQuery 1.5, prolly works back to 1.3.2 but haven't checked. Please note: My font size is 20px already so Arial Narrow is very legible at that size. I am not stopping the user from changing the font size. I am not overriding it. I am just changing a font. Do not use this script for evil. Don't be stupid. Accessibility is important.
answered Sep 13, 2013 by rajesh
edited Sep 12, 2013

...