Disabling pinch to zoom when embedding for specific tablet dimensions (i.e. iPad)

#1

I have an embedded dashboard inside another dashboard and I open the parent page on iPad safari website. The resize mode on the embedded dashboard is “scroll” because I need to show the horizontal and vertical scroll bars, the resize mode on the parent dashboard is scale because I want it to be fit to size of screen.


How I can disable the pinch to zoom (zoom by using two fingers) on the iPad safari when I do it over the embedded dashboard?


#2

You can disable the pinch-to-zoom using the following script under the “Ready” action of each of the dashboards separately.

var cs = this.getService("CanvasService");

cs.canvas.controlContainer.multitouch(null,'destroy');

#3

Hi!


I have three dashboards that are embeded in another dashboard via containers.

Have applied the script above under the Ready actions from each dashboard, but doesn't seem to work on iphone.

The resize mode on the three dashboards is "Scale"

Any idea what I should try next?


Thanks a lot!

#4

Hmm - can you try the following instead. Let me know how this one goes:


On the loaded event of the main dashboard, place this script to disable pinch-zooming
on the embedded dashboard

//grab the sub-canvas viewcontainer control
var cs = this.getService("CanvasService")
var viewModel = cs.getViewModelByName("subCanvasViewContainer1");
var viewContainer = viewModel.businessObject;


//grab the reference to the canvasService of the sub canvas
var canvasService = viewContainer.subContextContainer.getService("CanvasService");

//get a hold of the sub-canvas viewcontainer's canvas container, and then unbind the handlers for pinch zooming
var canvasContainer = canvasService.canvas.controlContainer;
$(canvasContainer).off($.MultitouchConstants.PinchZoom);
$(canvasContainer).off($.MultitouchConstants.PinchZoomStart);
$(canvasContainer).off($.MultitouchConstants.PinchZoomEnd);


#5

This one works, on the "Ready" action of the main dashboard! Thanks a lot!

Now when I pinch zoom, it zooms the main dashboard, along with the containers.

Earlyer it only zoomed the container. (it is a step forward...)

I'm trying to figure out now, how to stop the main dashboard from zooming... beacause the first scrip from this subject still doesn't work.


#6

To disable the pinch zoom for the main canvas, place below script in the ready event of the Main dashboard:


//grab the canvas service

var cs = this.getService("CanvasService");

//get the container of the main dashboard and unbind the handlers for pinch zooming

var mainCanvasContainer = cs.canvas.controlContainer;

$(mainCanvasContainer).off($.MultitouchConstants.PinchZoom);

$(mainCanvasContainer).off($.MultitouchConstants.PinchZoomStart);

$(mainCanvasContainer).off($.MultitouchConstants.PinchZoomEnd);


In addition to this, I would like to clarify that the script provided by Ariel above will only work in the embedded dashboard, specifically named "subCanvasViewContainer1", you will need to modify the script accordingly to match the name of your sub-canvas.


Let me know how it goes.

#7

Thanks Ajitkaur! Works just fine!