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

**nosarious** · 5 Aug 2010 8:10 AM

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.

**meyerovb** · 5 Aug 2010 7:39 PM

Example code is in the sencha pinch example. Go to the kitchen sink demo, and replace kitchensink with pinch in the URL.

http://www.sencha.com/deploy/touch/examples/pinch/

**nosarious** · 5 Aug 2010 9:58 PM

That's perfect. Well, nearly. I need to set a minimum and maximum, but it scales.

Now if only I could get double-tap to hide teh text and display some icons (rather the icons were png's and not part of a visible tab bar)

Thanks for the suggestion, Meyerovb... I don't recall seeing that last time I checked.

**nosarious** · 6 Aug 2010 7:18 AM

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.

**nosarious** · 6 Aug 2010 4:51 PM

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.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <title>font-resize-test</title>

	<link rel="stylesheet" href="ext-touch.css" type="text/css">
	
	<script type="text/javascript" src="ext-touch.js"></script>

	<style>

        body{
            font: 15px Verdana, Geneva, Arial, Helvetica, sans-serif;
            }
        h1{
            font: 25px Arial, Helvetica, sans-serif;
            }
        p{ fontsize:16px; }
        
	    #picture {
	        width: 200px;
	        height: 200px;
	        top: 60px;
	        left: 60px;
            overflow:hidden;
            margin:2px;
	        position: absolute;
	        background-color: #ddd;
            
	    }
	</style>
	<script>

	    Ext.setup({
	        onReady: function() {
    	        Ext.fly('picture').on({
    	            pinchstart : function(e, t) {
    	                this.startScale = this.scale;
    	            },
	            
    	            pinch : function(e, t) {
                        this.scale = e.scale * this.startScale;
    	               t.style.fontSize=(this.scale)+'px'
    	            },
	            
    	            scope: {scale: 10}
    	        });
	        }
	    });
	</script>
</head>
<body><div id="picture">
<h1>testing testing</h1>
<p>testingtestingtestingtestingtesting</p>
</div></body>
</html>

I would like to detect if the gesture is 'grow' or 'shrink' and not tie the font size directly to the pinch distance.

I have found a script for doing so from here
http://www.white-hat-web-design.co.u...s-fontsize.php

Code:

var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}

tied to this html

Code:

<a href="javascript:decreaseFontSize();">-</a> 
<a href="javascript:increaseFontSize();">+</a>

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)

Thanks for any help on this.

(alternative script: http://labnol.blogspot.com/2006/12/a...ange-font.html )

**evant** · 8 Aug 2010 9:18 PM

Here's a trivial sample:

Code:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        
        Ext.getBody().createChild({
            tag: 'div',
            cls: 'text',
            html: 'Block of text 1'
        });
        
        Ext.getBody().createChild({
            tag: 'div',
            cls: 'text',
            html: 'Block of text 2'
        });
        
        Ext.getBody().createChild({
            tag: 'div',
            cls: 'text',
            html: 'Block of text 3'
        });
        
        var min = 8,
            max = 18,
            current = 12;
            
        Ext.select('.text').setStyle('font-size', current + 'px');
        Ext.getBody().on('pinch', function(event){
            if(event.deltaScale > 0){
                ++current;
                current = Math.min(max, current);    
            }else{
                --current;
                current = Math.max(min, current);
            }
            Ext.select('.text').setStyle('font-size', current + 'px');
            
        }, null, {buffer: 10});
    }
});

**nosarious** · 8 Aug 2010 9:42 PM

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.

http://www.straathof.acadnet.ca/beta2.3/

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.

**nosarious** · 9 Aug 2010 10:00 PM

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.

The end of my code looks like this so far:

Code:

        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 2,
                autoScroll:true            },
            //
            items: [publication],
            // add listener for doubletap
            listeners: {            
                render: function(c){
                    c.body.on('doubletap', function(e, t){
                        //handle the double tap
                        mainmenu.show();
                        c.doComponentLayout();
                    }, c);                 
/*
                    //this will be to access the menu list
                    c.body.on('click', function(e, t){
                        if(Ext.fly(t).hasClass('last')){
                            c.setCard(2);
                        }else{
                            c.setCard(0);
                        }
                    }, c, {delegate: 'a.move'}                   
                    );*/
                }               
            }       
        });

**evant** · 9 Aug 2010 11:02 PM

It's probably better for you to try and understand my example, so you can apply it:

Code:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        
        // create a new div on the body
        Ext.getBody().createChild({
            tag: 'div',
            cls: 'text',
            html: 'Block of text 1'
        });
        
        // ditto
        Ext.getBody().createChild({
            tag: 'div',
            cls: 'text',
            html: 'Block of text 2'
        });
        
        // same again
        Ext.getBody().createChild({
            tag: 'div',
            cls: 'text',
            html: 'Block of text 3'
        });
        
        var min = 8,
            max = 18,
            current = 12;
            
        // Select all elements with a class of text, set the font size to the default
        Ext.select('.text').setStyle('font-size', current + 'px');
        // bind an event on the document body for pinch
        Ext.getBody().on('pinch', function(event){
            // interrogate the event, see if the pinch is smaller or bigger
            if(event.deltaScale > 0){
                ++current;
                current = Math.min(max, current);    
            }else{
                --current;
                current = Math.max(min, current);
            }
            // set the text as appropriate
            Ext.select('.text').setStyle('font-size', current + 'px');
            
        }, null, {buffer: 10});
    }
});

In your code I don't see anything about a pinch at all.

**nosarious** · 10 Aug 2010 5:51 AM

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.

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

Thread Tools

Search Thread

Display

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

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

Similar Threads

General Layout question

General Question

General JS question: Insert text at caret position?

A general question about using this code

Tags for this Thread