general question: using pinch gesture to scale div/class.

general question: using pinch gesture to scale div/class.

This is just a general question but would anyone know how I could go about setting up a pinch event on a particular div in my layout that would allow me to use the css zoom function? Most of my layouts are set to 240 px wide for the columns, but rather than going through the process of changing the fonts (several svg fonts are used), I thought it would be easier to just use the css zoom on the entire div.

Is this even possible? Anyone able to help me do this?

My other alternative is to have a preferences menu that lets people pick a font size, but that gets less intuitive, especially since zooming is usually done with pinch (but I don't want the entire page to zoom, just the div with text in it)

Thanks to whomever can help with this in advance.

Last edited by nosarious; 5 Aug 2010 at 8:12 AM.
Reason: I needed to respell something.

well. That produced the weirdest result I have ever seen, Each element within the parent div (id) would scale seperatley, meaning the text could be scaled separately from the white box surrounding it, and it would only work on the first instance of the div (there is one instance for each carousel card)

I'll see if there is a way to tie it to the text-area font size globally.

I'm still struggling with this concept, concentrating on changing just the font-size. (today's wasted project)

Does anyone know where the documentation for pinching is in the api? I can't find it, so I am suspecting it is there, but not 'there' there.
It doesn't seem to be a part of the Ext.fly documents. I only ask because the information affected by the font-size changes (in this example) are dependent on where the pinch gesture starts. If you touch the headline, the headline grows. If you touch the testing then the testing grows. I would rather the font grew globally.

but I can't seem to wrap my head around it. (note: Ext. fly can't get a class, so giving it 'p' directly results in an error. Using the entire carousel for registering the pinch with these 'decrease/increase' methods may work better)

Thank you Evant. I'll try to integrate this tomorrow. I managed a far less elegant method with the overlay, but I had several betatesters asking why it was such a different way than what they are used to.

BTW... if you happen to wander to this site, on 'page' 4 (the 'blank' page with no text) if you double click to bring up the overlay and then click outside of it, you will see an anomaly with the background graphic. The space where the overlay comes up (and a space around it) isn't redrawn properly. It is redrawn correctly as one swipes away from that page.

You know Evant, I just can't figure this out. Your example uses something called Get Body and different methods for building text. Any chance I could see an example that uses something closer to what I am using? (Carousel with contentEl that contains the div I want to change fontsize for)? Or a link to where i can get more information on multiple listeners? (I have a double-click, pinch and possibly a single-click eventually)

Is there an example that shows multiple events/actions in listeners?

I am sure this code is going to look like a dog's breakfast when I release it to the public. It will probably take an extra week to figure out more 'elegant' ways of doing things.

I didn't have anything about pinching because I didn't know how to handle the concept of multiple listeners.

I'm devoting this day to the problem, probably going to try incorporating your example into a carousel so I can see how complicated that will be, and how it will behave. Playing with code and getting it under your finger nails is the best way to learn.

I suspect, as with any framework, there are a number of ways to get things done.