Create Zoom In & Out Functions for iFrame
<p>I'm working on a way to allow users to Zoom In and Out to resize an Interactive HTML eLearning Presentation in an online course. Unfortunately, I have a lot of limitations:</p>

<ul>
<li>Our online courses are hosted in an LMS/CMS that does not allow HTML5. Since the presentation is in HTML5 format, the only way I can get it to display on the page is via iFrame or Object  ):</li>
<li>The LMS we are using still uses a framed layout (one header frame [100% width] at the top, and then two frames below [about 20% width Navigation frame and 80% width Content frame]), so I need to be able to target the <em>main content frame</em> of 80% width <em>only</em></li>
<li>Our demographic tends to use smaller screens like netbooks</li>
</ul>

<p>The Presentation I created is very large (1022 x 665) as I didn't know the screen size limitation until now. So, I would like to add a functionality to allow students to Enlarge and Shrink the content to fit their own screen size. It seems like the best option in this case is to add two buttons on the page (a + and -) that the students can use.</p>

<p>I found a CSS method that can shrink the page permanently:</p>

<pre><code>&lt;style&gt;
 .frame
{
width: 1022px;
height: 665px;
border: 0;
overflow: hidden;

-ms-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);

-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

&lt;/style&gt;
</code></pre>

<p>While this works, it doesn't let students with different screen sizes customize their experience.</p>

<p>At this point, I have some JavaScript that allows students to Zoom the FONT size, only. Whats the easiest way to add Zoom buttons that target the whole frame, or if all else fails the Object itself?</p>

<p>Here is my current code (with the Font-Size Javascript as a starting point):</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--WEEK 6 SELF CHECK--&gt;
&lt;head&gt;

&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="jquery.zoomooz.min.js"&gt;&lt;/script&gt;

&lt;style&gt;
.frame
{
 width: 1022px;
    height: 665px;
    border: 0;
 overflow: hidden;
 }

&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="subPara" style="height: 80%;"&gt;

&lt;input type="button" value="+" onClick="zoomIn()"/&gt;
&lt;input type="button" value="-" onClick="zoomOut()"/&gt;

&lt;p&gt;Questions to think about as you are completing your readings:&lt;/p&gt;
&lt;!--Instructions for how to embed Self Checks--&gt;
&lt;div class="wrap"&gt;
    &lt;object class="frame" type="text/html" data="EDU8510_Week6_SelfCheck/Week6.html" style="width: 1022px; height: 675px; border: 0px;"&gt;
     &lt;embed src="EDU8510_Week6_SelfCheck/Week6.html" style="width: 645px; height: 530px; border:0;"&gt;&lt;/embed&gt;
    &lt;/object&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
var fontSize = 1;
function zoomIn() {
    fontSize += 0.1;
    document.body.style.fontSize = fontSize + "em";
}
function zoomOut() {
    fontSize -= 0.1;
    document.body.style.fontSize = fontSize + "em";
}
&lt;/script&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>