Zooming content(injected by angularjs) in phonegap android

Question

I am very new to Phonegap. I am developing an app for display some text contents(some times images) from web. I want to add a zooming option to the app(only for content). When I am enabling pinch zoom, it zooms the entire webview(including the action/title bar). I want to zoom only the content part. I used IScroll, but couldn't work. Please help me.

I am giving my code below. If any problem, please let me know.

    <!DOCTYPE html>
    <html ng-app="nakApp">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Daivadasakam</title>
    <meta name="description" content="">

    <link rel="stylesheet" href="assets/app.css"/>
    <script src="cordova.js"></script>
    <script src="cordova_plugins.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=yes">




  </head>
  <body>
  <div ui-view></div>
  <!-- injector:js -->
  <script src="vendor/jquery.js"></script>
  <script src="vendor/angular.js"></script>
  <script src="vendor/angular-ui-router.js"></script>

  <script src="app/app.js"></script>
  <script src="app/controllers/home.js"></script>
  <script src="app/services/servive.js"></script>
  <script src="app/router.js"></script>
  <script src="app/filters/interpolate.js"></script>
  <script src="app/directives/directives.js"></script>
  <script src="app/controllers/language-selector.js"></script>
  <script src="app/config-generated.js"></script>

  <script src="app/controllers/data-content.js"></script>

  <!-- endinjector -->

  </body>
  </html>

There is another file on www/app/templates. data-content.html(Assuming that it is the template for data display). I am giving the code below

<div class="continter">
    <div ng-include="" src="'app/templates/header.html'"></div>
    <div class="list-data-language">
        <div class="title">{{vModel.title}}</div>
        <div class="content" ng-bind-html="vModel.content"></div>
        <div ng-show="vModel.isAudio" class="list-item"  ng-click="vEvents.playAudio(vModel.audio_url)" >
            <label>Play Audio</label>
        </div>
        <div  ng-show="vModel.isVideo" class="list-item"  ng-click="vEvents.playAudio(vModel.video_url)" >
            <label>Play Video</label>
        </div>
    </div>
</div>

<div class="loader" ng-show='vModel.isLoaderOn'></div>

score 0 · Answer 1 · edited May 23 '17 at 11:57

If I understood you correctly, what you want is to have a div that's size doesn't change when the zoom is applied on it, right?

Main idea

You simply make fixed-size div (#container) that contains another div (#content) which again contains the actual content. The container is always the same size, only the content div changes size based on it's content. The container can handle the overflow anyway it wants such as auto (show scroll bar when too wide or long content) or hidden.

<div id="container">
    <div id="content">
       <!-- Content here -->
    </div>
</div>

Then apply CSS3 transform on the content when zoomed. For example's sake the transforms are applied on when hovering the content but for your case see my comments below the code. What is basically done when hovering is the zooming part (scale transformation) with factor of 2 in this example and then it is moved (translate transformation) to start from top-left corner.

#container {
    width: 600px;
    height: 600px;
    top: 100px;
    left: 100px;
    position: absolute;
    overflow: auto; // Or hide or scroll or what you prefer
}

#content {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: gray;
}

#content:hover {
    transform: scale(2) translate(25%, 25%); 
}

Example

I made JSFiddle for you to play with it. Please note that the hover effect is used only for the example to be more compact. Also I am not much of a CSS guru so there probably is still some minor problems. Also for actually using that code, consider adding the -webkit-transform, -moz-transform, -o-transform and -ms-transform to make it work on all possible browsers.

How to zoom

What comes to the how to zoom (pinch or Google Maps style zoom buttons), it mostly just depends what you want to do with this. For example if you prefer the pinch hand gesture, look into this. On my example it was most easily showed with hover. I think you need to anyway use JavaScript to make the zooming since you cannot set the multiple values for zoom level on CSS.

Apply on your actual code

In case that the code added by you to your original question is your template, and if the div with list-data-language class is for example the one that you want to be zoomable, your code should look something like this

<div class="continter">
    <div ng-include="" src="'app/templates/header.html'"></div>
    <div id="container">
        <div id="content" class="list-data-language">
            <div class="title">{{vModel.title}}</div>
            <div class="content" ng-bind-html="vModel.content"></div>
            <div ng-show="vModel.isAudio" class="list-item"  ng-click="vEvents.playAudio(vModel.audio_url)" >
                <label>Play Audio</label>
            </div>
            <div  ng-show="vModel.isVideo" class="list-item"  ng-click="vEvents.playAudio(vModel.video_url)" >
                <label>Play Video</label>
            </div>
        </div>
    </div>
</div>

<div class="loader" ng-show='vModel.isLoaderOn'></div>

As you can see I added one div with id container and added id content to for div with class list-data-language.

Thank you sanfor for your quick response. Actually I am doing PhoneGap first time. Actually I am editing the code which was written by my previous employee. I understood what you mean. But I have two problems there. 1.) It is displaying the content by injecting Java Script as on the code I given. I don't know, where I can add div for the content(Actually I don't know which JS is giving the content. So many JS file there in the .) 2.) I am writing this code for Android now(Later it need to avail for iPhone also). — dev.adarsh, Dec 27 '14 at 14:32
@dev.adarsh: What comes to your 2nd point, it doesn't matter at all in this case whether you are coding for Android or iOS or even Windows Phone 8. What is essential for you to understand that the code used is exactly the same and it works on all devices supported by Cordova (formerly PhoneGap). I can address the first question later, I'm in hurry now and it takes time to explain those, sorry mate. :( — Roope Hakulinen, Dec 27 '14 at 14:37
@dev.adarsh: Sorry for keeping you waiting this long. After giving it more thought, I can't really answer issue 1 with this knowledge. I would need to see the exact contents of all of your files etc. If you can provide those, I may be able to point you into right direction. Even if I can, you probably need to get familiar with AngularJS. As told before do not worry about the Cordova part as it just like a browser with some extra, cool features (camera etc). — Roope Hakulinen, Dec 28 '14 at 10:56
Its ok sanfor. There is another file on www/app/templates. data-content.html. I am updating my question with this file. — dev.adarsh, Dec 28 '14 at 13:18
@dev.adarsh: Added example modification for your case as a update to my answer. — Roope Hakulinen, Dec 29 '14 at 06:00

Zooming content(injected by angularjs) in phonegap android

1 Answers1