Chris
Chris

Reputation: 1321

How can you zoom in on text within an iframe?

I'm creating a text editor with an iframe that has the contenteditable attribute on. I added a zoom feature, that zooms in on the iframe. Here's the code: document.getElementById("textareathingy").style.zoom = percentage; When I use the zoom in feature, it makes the iframe "bigger" but the size of the text remains the same. Can someone point me in the right direction to make the text within the iframe also be zoomed in.

<html>
<body>
<button id = "btn" onclick = "zoom()">Click me!</button>
<iframe name = "textfield" id = "textareathingy" style = "border: 1px black solid; width: 100px; height: 100px"></iframe>
</body>
<script>
window.frames[0].document.body.innerHTML = "random text";
var percentage = 2;
function zoom() {
document.getElementById("textareathingy").style.zoom = percentage;
}
</script>
</html>

Upvotes: 2

Views: 826

Answers (1)

user9783773
user9783773

Reputation:

You could use something like this instead:

document.getElementById("textareathingy").style.transform = "scale(" + percentage + ")";

Upvotes: 4

Related Questions