Scaling in a separate div in Cordoba / Ionic

Question

I added a viewport with properties that allow me to scale / scale. And I added them to my own code:

WebSettings settings = super.appView.getSettings(); settings.setBuiltInZoomControls(true); settings.setDisplayZoomControls(true); settings.setSupportZoom(true); 

I can scale, but along with my view, ion-header-bar and ion-nav-bar increase. I tried to give the css header so that it would fix:

 position: fixed; top: 0px; left: 0px; 

but still it will be increased.

My index.html has an ion-header-bar that contains an image. Patterns are included

 <ion-nav-view class="has-header"></ion-nav-view> 

The template in which I need to scale in a specific div has an “ionic look” and it looks like this:

 <ion-view> <ion-nav-bar class="bar-stable"> <ion-nav-buttons side="right"> icon1 </ion-nav-buttons> <ion-nav-buttons side="left"> icon2 </ion-nav-buttons> </ion-nav-bar> <div> Multiple divs in here, which are containers for html and css data we receive via AJAX requests. And this is here I need zooming in. </div> </ion-view> 

PS: Would it be important if I added the full HTML code (with meta ion-view space, without title, but with body and div) inside ion-view ?

Answer 1

I wanted to get similar functionality and was able to get it to work using ion scroll .

 <ion-scroll zooming="true" direction="xy" style="width: 100%; "> <div></div> </ion-scroll> 

Answer 2

Another solution could be to use hammerjs for multi-touch gestures and cut out the map and pinch to enlarge the content with css.

Something like that:

 var hammerTime = new Hammer.Manager($('div.youWantToScale')[0], {touchAction: "pan-x pan-y"}); var pinch = new Hammer.Pinch(); var lastZoom; hammerTime.add(pinch); hammerTime.on("pinchout pinchin", function(e) { var currentZoom = Number($('div.youWantToScale').css("zoom")); if (lastZoom) { var newZoom = currentZoom + (e.scale - lastZoom); //bounds checking for your zoom, min=1 and max=3 here newZoom = newZoom < 1 ? 1 : (newZoom > 3 ? 3 : newZoom); $('div.youWantToScale').css("zoom", newZoom); } lastZoom = e.scale; }); hammerTime.on("pinchstart", function (e) { //Seems clunky, but reset the lastZoom on a new pinch lastZoom = undefined; });