SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Removing Click Event Delay for iPad

    Hello,

    I'm very new to JQuery and had a big problem arise. I developed a virtual number pad for an online sign-in prompt to be used on an iPad; however, I noticed a significant delay in the iPads click event, creating terrible lag between when you press a number key and when the event (the number being inserted in the text field) actually happens.

    Within a browser, all works correctly (no delay). In an iPad, there's a problem.

    From my research I have found:

    http://cubiq.org/remove-onclick-dela...kit-for-iphone

    http://stackoverflow.com/questions/4...-is-it-possibl

    Seems like I'll need to do some raw Javascript?

    The problem is, as mentioned before, I'm extremely new to Javascript/Jquery in general and I don't know how to implement the solutions provided in the links above.

    Can anyone walk me through this?

    Right now my file structure is (as is relevant to this case):

    index.html - containing:

    HTML Code:
    <input type="text" name="anumber" placeholder="number" id="a_number"/>
              <!-- Virtual Numpad -->
              <table id="numpad">
                 <tr>
                    <td><div id="one" class="num_button blue">1</div></td>
                    <td><div id="two" class="num_button blue ">2</div></td>
                    <td><div id="three" class="num_button blue">3</div></td>
                 </tr>
                 <tr>
                    <td><div id="four" class="num_button magenta">4</div></td>
                    <td><div id="five" class="num_button magenta">5</div></td>
                    <td><div id="six" class="num_button magenta">6</div></td>
                 </tr>
                 <tr>
                    <td><div id="seven" class="num_button orange">7</div></td>
                    <td><div id="eight" class="num_button orange">8</div></td>
                    <td><div id="nine" class="num_button orange">9</div></td>
                 </tr>
                 <tr>
                    <td><div id="guest_button" class="num_button yellow">Guest</div></td>
                    <td><div id="zero" class="num_button red">0</div></td>
                    <td><div id="anum_button" class="num_button green">Submit</div></td>
                 </tr>
              </table>
    script.js - containing:
    Right now, I just have some simple Jquery, that appends a '1' (or whatever number is pressed) to the current string in the main text field.

    Code JavaScript:
    $('#one').click(function() {  
      var test = $("#a_number").val()+1; 
      $("#a_number").val(test);
    });

    Thank you so much in advance for your time!!

    You can view my page here: http://elite.tamucc.edu/sundae/

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,708
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dhiracheta View Post
    Can anyone walk me through this?
    That's something I haven't dealt with before, but over at jQTouch they indicate that with the onclick event you can't get around the delay, for the pad is waiting to see if a double tap occurs.

    A viable solution is to check if the page is being used by a mobile device, and if so to use the ontouchend event where appropriate instead of onclick, and then preventdefault from within the ontouchend events to prevent the event from being captured any kind of onclick event.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •