Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

Hybrid View

  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,621
    Vote Rating
    581
    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!

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