How to add zoom in and out to an iframe code

Question

I tried to develop an electronic newspaper app i generate the embed html code. it show but all attempts to make it zoom prove abortive. pls below is the source code if any one can HELP

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
        <link rel="stylesheet" type="text/css" href="app_framework/2.1/css/icons.min.css">
        <title>Blank App Designer Packaged Web App Project Template</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, usre-scalable=yes">
        </style>
        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
<script type="application/javascript" src="app_framework/2.1/appframework.js"></script>
        <script type="application/javascript" src="app_framework/2.1/appframework.ui.js" data-ver="1"></script>
    </head>
    <body id="afui">
    <header class="wrapping-col wrap-element uib_w_1 with-back" data-uib="app_framework/header" data-ver="2" id="af-header-0">
    <a class="button backButton">Back</a>
            <h1>ETRIBUNE</h1>
        </header>
        <div id="content" class="uwrap">
            <div class="upage vertical-col panel" id="mainpage" data-header="af-header-0" data-footer="none">
                <iframe id="bloxFrame" src="http://static.issuu.com/widgets/shelf/index.html?folderId=e9a9ca5f-d74f-49e8-8b3d-e57b7e383f76&amp;theme=theme2&amp;rows=2&amp;thumbSize=medium&amp;roundedCorners=false&amp;showTitle=true&amp;showAuthor=true&amp;shadow=true&amp;effect3d=true"
                name="bloxFrame" width="300px" height="400px" frameborder="0" scrolling="auto">
                    &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;
                </iframe>
            </div>
        </div>
    </body>
</html>

Answer 1

Here is a fiddle showing how to zoom an HTML element. This code can easily be applied to your situation by simply targeting an element inside the iframe (probably the body of the document).

https://jsfiddle.net/xzn1s7ks/1/

here is the relevant function:

function zoom(element, level){
    if (element.style){
    if (element.style.zoom != undefined)
        element.style.zoom = level;

    if (element.style.MozTransform != undefined)
        element.style.MozTransform = 'scale(' + level + ')';

    if (element.style.WebkitTransform != undefined)
        element.style.WebkitTransform = 'scale(' + level + ')';
  }
}

The element should be the element you want to zoom and the level is a decimal value. 1.0 is the default size, 1.5 is 150%.

How to add zoom in and out to an iframe code

Question

1 answers

solution1
2 2016-01-21 18:14:48

How to add zoom in and out to an iframe code

Question

1 answers

solution1 2 2016-01-21 18:14:48

solution1
2 2016-01-21 18:14:48