1. #1
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Question 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.

  2. #2
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    0
    meyerovb is on a distinguished road

      0  

    Default


    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/

  3. #3
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Default


    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 )
    Last edited by nosarious; 6 Aug 2010 at 4:54 PM. Reason: remeshing filberflanges

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,913
    Vote Rating
    629
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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});
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Default


    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.

  8. #8
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Default


    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'}                   
                        );*/
                    }               
                }       
            });

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,913
    Vote Rating
    629
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #10
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. General Layout question
    By MacSimon in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 21 Apr 2009, 3:56 AM
  2. General Question
    By RyanZec in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 1 Nov 2007, 12:13 AM
  3. General JS question: Insert text at caret position?
    By Saeven in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 9 Apr 2007, 10:24 AM
  4. A general question about using this code
    By JohnT in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 16 Jan 2007, 7:09 PM

Thread Participants: 3

Tags for this Thread