Sencha Touch html content pinch and zoom

[Trinad]

Hi,

Can some one tell me how to implement pinch and zoom for html content inside a carousel, I see there is an example how to do for image inside a carousel but I have no idea how to implement pinch and zoom for html content inside a carousel please help me.

Thanks,
Kumar.

[kostysh]

you can change CSS styles for your html content on pinch event

[Trinad]

Hi,

Thanks for your reply. Is there any example how to do that ?

Thanks,
Kumar.

[kostysh]

no examples, but you can write your own one.


1) define some styles for scaling:
.x1{font-size: 10px; ...} .x2{font-size: 14px; ...} .x3{font-size: 18px; ...} .x4{font-size: 22px; ...}


2) create container with your html content inside carousel


3) on container element listen for pinchstart, pinch and pinchend events
containerObj.element.on({
pinchstart: function() {...}
});


4) change actual style of container (event handlers)

But if you want to scale unknown html content (for example grabbed from Internet) - you can not. You can work with known styles only

also exist not a trivial method to draw html into canvas and then you can scale a canvas. But this task is so complex for beginners and has to many limitations.

[Trinad]

kostysh,

Thanks for your example.
I have forget to send the response to your post sorry about that.
I have used iscroll4 it worked for me.
I hope in future sencha touch Framework will provide this feature.

Thanks,
Kumar.