I need a code snippet that causes the browser to zoom in on webpage content when a link within the webpage is clicked. Is there even a single, standard way to do this with all browsers? I've tried looking around for the code but haven't been able to find it.
For added functionality, when the page is zoomed in, the same link should cause the webpage to zoom out again.
Please let me know whether such a snippet exists anywhere.
Progz
Is there even a single, standard way to do this with all browsers?
No. Not all browsers use the same keyboard shortcut. I've seen Javascript solutions that imitate this behaviour. Here's an SO thread with links to work-arounds for some browsers.
Thanks for posting a link to StackOverflow, where the moderators have their buttcheeks pinched so tight that they haven't been able to have a bowel movement ever since Noah's Ark washed up on Ararat. I always enjoy watching those moderators suffer in their rather extreme moderation efforts. And the posts in the thread you linked to are very, very good, which I guess is what counts. :)
I don't think that's easy, unless you tweak your CSS Design and HTML structure leaning towards a zoomable webpages. And this requires a lot of coding on your part though, and manipulation on each element's quantifiable dimension values.
As far as I know major browser's don't give access to this browser functionality. So, you have to implement it yourself.
I made a quick example of making an element appear it's zooming. See this Zoom Example, please view it on chrome only. Also, here's the code: (Make sure to view it on Chrome only, recent version. I never checked it on other browsers. :D)
HTML
<html>
<body>
<div id="content"> </div>
<div id="zoom-in">+</div>
<div id="zoom-out">-</div>
</body>
</html>
CSS
div#content{
width:100px;
height:100px;
border: red solid 2px;
}
div[id^="zoom"]{
border: blue solid 2px;
background-color:#EEE;
width:20px;
}
JAVASCRIPT
function zoomIn(evt){
var node = evt.target.parentNode.children[0],
nodeWidth = node.clientWidth,
nodeHeight = node.clientHeight;
node.style.width = (nodeWidth * 1.1)+"px";
node.style.height = (nodeHeight * 1.1)+"px";
}
function zoomOut(evt){
var node = evt.target.parentNode.children[0],
nodeWidth = node.clientWidth,
nodeHeight = node.clientHeight;
node.style.width = (nodeWidth * .9)+"px";
node.style.height = (nodeWidth * .9)+"px";
}
zoomInElement = document.getElementById("zoom-in");
zoomInElement.addEventListener("click",zoomIn);
zoomOutElement = document.getElementById("zoom-out");
zoomOutElement.addEventListener("click",zoomOut);
That's just an element only, without font sizes yet. One of the major issue here is you need to have a reference of each elements sizes. Because moment you manipulate the height and width value and managed to put it in a smaller size, you'll loose the exact ratio of the element and it's dimention; just like reducing an image's size.
Let me know your thoughts.
EM's a best way to do this too. :D Saw the SO link by priteas.
Yes, I'm slamming into a brick wall because I'm using div elements that contain text, and the number of text characters affects the absolute size of the div element regardless of browser window dimensions and resolution settings. I have to mess around setting each div element's text size according to the number of characters. That means one element has a font-size setting of 270% while another needs to have a font-size of 233%. It's a major pain in the butt and could end up requiring a 300-megabyte css sheet. I'll review all of the code and other answers posted here and try to come up with something.
Progz
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.