change font-size in iframe

Question

0.00/5 (No votes)

See more:

jQuery

Hi,

How can i change font-size of the iframe contents by clicking outside of iframe hyperlink

Posted 13-Jun-12 1:47am

nabinaya

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Manfred Rudolf Bihy · Answer 1 · 2012-06-13T06:02:00

Please be reminded that this is not a ready to use solution. It is merely a proof of concept and has not been tested on any other browsers than IE & FireFox. It works and might give you some ideas to explore to make it work on other browsers too. It actually does not change the font-size, but rather uses the zoom style to make the frame zoomable. Not sure if you can use this, but I found it rather neat. Enjoy!

HTML

<html>
    <style>
        #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
        #frame { width: 800px; height: 520px; border: 1px solid black; }
        #frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
    </style>
    <body>
        <p>Some text before the frame</p>
        <div id="wrap">
            <iframe id="frame" src="http://www.apache.org"></iframe>
        </div>
        <p>Some text after the frame</p>
        <form>
            <input type="button" value="Zoom out" name="btn_zoomout" onclick="zoomout();"/>
            <input type="button" value="Zoom in"  name="btn_zoomin"  onclick="zoomin();"/>
         </form>
        <script type="text/javascript">
            var zoom = 0.75;
            function zoomout()
            {
               zoom = zoom - 0.1;
               var element = document.getElementById("frame");
               // This line does the trick for FireFox
               element.style.MozTransform = "scale(" + zoom + ")";
               // This line does the trick for IE
               element.style.zoom = "" + zoom;
            }
            function zoomin()
            {
               zoom = zoom + 0.1;
               var element = document.getElementById("frame");
               // This line does the trick for FireFox
               element.style.MozTransform = "scale(" + zoom + ")";
               // This line does the trick for IE
               element.style.zoom = "" + zoom;
            }
        </script>
    </body>
</html>

Regards,

Manfred