Multi-Tap Zooming in C1ViewPort

Many of our customers have asked us whether it is possible to handle multitap to zoom in/out the C1ViewPort content. The ComponentOne WebIPhone library does not contain any event to handle multitap on the control/device. In this blog we will discuss how to handle the multitap and zoom in or out using a jQuery plug-in which implements the doubletap event. We will use "jquery.doubletap.js" jquery file which handles the multitapping by calculating the time duration between subsequent taps. In our sample we are placing an image in div tag having Css class 'C1SampleDiv" in the C1ViewPort content :

<C1ViewPort:C1ViewPort ID="C1ViewPort1" runat="server" Text="ZoomInZoomOut">  
 <Content>  
 <div>  
 <div style="background-image: url('Images/Covers/cover1.JPG'); position: absolute; left: 0px; top: 0px">  
 </div>  
 </div>  
 </Content>  
</C1ViewPort:C1ViewPort>

To include the js file we will use the following code :

 <script type="text/javascript" src="jquery.doubletap.js"></script> 

Once we have included the jQuery plug-in on our page, we can use the zoom in and out of the C1ViewPort content. We will use doubletap() method to handle the multitapping to zoom the content image : Once we have included the jQuery plug-in on our page, we can use the zoom in and out of the C1ViewPort content. We will use doubletap() method to handle the multitapping to zoom the content image :

$(".C1SampleDiv").doubletap(  
  function (e) {  
    if (window._zoomTo == 1) {  
       e.srcElement.style.zoom = 2;  
       window._zoomTo = 2;  
    }  
    else if (window._zoomTo == 2) {  
       e.srcElement.style.zoom = 1;  
       window._zoomTo = 1;  
    }  
   },  
   function (e) {  
   },  
    400  
   );  
 }     

Here we are applying the multi tapping on the div tag. If you want to apply multitapping on the entire content of C1ViewPort, you can replace 'C1SampleDiv' in the code to 'C1ContentAreaWrapper'. Now the complete javascript will be :

<script type="text/javascript">  
   window._zoomTo = 1;  
   Sys.Application.add_load(onWebApplicationLoad);  
   function onWebApplicationLoad() {  
      $(".C1SampleDiv").doubletap(  
        function (e) {  
         if (window._zoomTo == 1) {  
          e.srcElement.style.zoom = 2;  
          window._zoomTo = 2;  
         }  
        else if (window._zoomTo == 2) {  
          e.srcElement.style.zoom = 1;  
          window._zoomTo = 1;  
         }  
   },  
   function (e) {  
    },  
   400  
   );  
  }  
 </script>

Now when the user taps on the content inside the C1ViewPort, the content is zoomed. Refer to the attached C1ViewPort_ZoomInZoomOut sample for the complete implementation of the above code. The jQuery plug-in (jquery.doubletap.js) is included in the sample.