Eliminating the 300ms in jquery mobile
i'm trying to elminate the 300ms delay in the app, but finding it hard to do
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="jquery/jquery.js"></script>
- <link rel="stylesheet" type="text/css" href="jquery/jquery.mobile.icons.min.css"/>
- <link rel="stylesheet" type="text/css" href="jquery/newly.css"/>
- <link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.4.5.min.css"/>
- <script type="text/javascript" src="jquery/jquery.mobile-1.4.5.js"></script>
- <script language="javascript">
- $.event.special.tap = {
- setup: function() {
- var self = this,
- $self = $(self);
- $self.on('touchstart', function(startEvent) {
- var target = startEvent.target;
- $self.one('touchend', function(endEvent) {
- if (target == endEvent.target) {
- $.event.simulate('tap', self, endEvent);
- }
- });
- });
- }
- };
- $('#no-tap-delay').on('tap', function() {
- var $self = $(this);
-
- });
- </script>
- <style>
- .html5logo {
- display: block;
- width: 128px;
- height: 128px;
- background: url(imgs/love.png) no-repeat;
- -webkit-tap-highlight-color: rgba(0,0,0,0);
- }
- .html5logo:active {
- -webkit-transform: scale3d(0.9, 0.9, 1);
- }
- .pulse {
- -webkit-animation: pulse 400ms;
- }
- @-webkit-keyframes pulse {
- 0% { -webkit-transform: scale3d(0.9,0,9,1); }
- 20% { -webkit-transform: scale3d(1.1,1.1,1); }
- 40% { -webkit-transform: scale3d(0.95,0.95,1); }
- 70% { -webkit-transform: scale3d(1.05,1.05,1); }
- 100% { -webkit-transform: scale3d(1,1,1); }
- }
- </style>
- </head>
- <body>
- <div data-role="page" id="page">
- <div data-role="header">
- <h1>Header</h1>
- </div>
- <div data-role="content"><a id="no-tap-delay"
- class="html5logo"
- href="#page2"></a>
- </div>
- <div data-role="footer">
- <h4>Footer</h4>
- </div>
- </div>
- <p>
- <div data-role="page" id="page2">
- <div data-role="header">
- <h1>Header</h1>
- </div>
- <div data-role="content"><a href="#page">back to page1</a></div>
- <div data-role="footer">
- <h4>Footer</h4>
- </div>
- </div>
- </body>
- </html>
when i click on the link the 300ms still works out