1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

JQuery on Touch Devices

Discussion in 'Web Design & Development' started by robobobo, Jun 27, 2012.

Thread Status:
Not open for further replies.
Advertisement
  1. robobobo

    robobobo Thread Starter

    Joined:
    Apr 27, 2008
    Messages:
    167
    Hi there,

    I've recently designed this site davidpark.eu which uses a Jquery slider as you can see. It works great however it doesn't work on touch devices. Ideally I'd like to be able to just swipe the pictures to move across, but I can't even grab hold of the slider button to move it. The only way to do it is by tapping beside the slider and it moves over which isn't good enough.

    I've never worked with JQuery code before so I've a novice at this. I do know that the Jquery ui doesn't support touch events so I found this work around - touchpunch
    http://touchpunch.furf.com/

    However I'm not sure how to implement, here's what I did, following the instructions as best as I could.
    Code:
    <!--New Jquery-->
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
    <script src="jquery.ui.touch-punch.min.js"></script>
    
    <!-- Jquery and plugins -->
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.ui.js"></script>
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/fancybox/jquery.fancybox-1.3.0.js"></script>
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.easing.js"></script>
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/anythingSlider.js"></script>
    
    but alas it doesn't work.

    Anyone any ideas for me?

    Thanks
     
  2. dukevyner

    dukevyner

    Joined:
    Nov 4, 2011
    Messages:
    787
    The main problem may be that the "jquery.ui.touch-punch.min.js"
    is not on your site... or attached to the main document
     
  3. robobobo

    robobobo Thread Starter

    Joined:
    Apr 27, 2008
    Messages:
    167
    I have uploaded the script to the right directory and updated the code to the following

    <!--New Jquery-->
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.ui.touch-punch.min.js"></script>

    <!-- Jquery and plugins -->
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.ui.js"></script>
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/fancybox/jquery.fancybox-1.3.0.js"></script>
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.easing.js"></script>
    <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/anythingSlider.js"></script>


    However it still doesn't appear to work
     
  4. dukevyner

    dukevyner

    Joined:
    Nov 4, 2011
    Messages:
    787
    try this
    i placed the touch punch after the rest of the jquery(as advised on the site) an removed the two external jquery as they are redundant considering you have them locally
     
  5. robobobo

    robobobo Thread Starter

    Joined:
    Apr 27, 2008
    Messages:
    167
    Thank you for your reply yet again,

    I tried your solution as above, however that broke the sidebar drop down menu and also the scroll bar disappeared when viewed on a mobile device and didn't work.

    Ideally what I need it to be able to do is scroll across when the images are swipped
     
  6. dukevyner

    dukevyner

    Joined:
    Nov 4, 2011
    Messages:
    787
    ah... well that is simply not achievable with touch punch, will have to do some looking into on that
     
  7. dukevyner

    dukevyner

    Joined:
    Nov 4, 2011
    Messages:
    787
  8. dukevyner

    dukevyner

    Joined:
    Nov 4, 2011
    Messages:
    787
  9. dukevyner

    dukevyner

    Joined:
    Nov 4, 2011
    Messages:
    787
  10. robobobo

    robobobo Thread Starter

    Joined:
    Apr 27, 2008
    Messages:
    167
    Thank you very much for all your help, I've never worked with Jquery before so I'm a bit stumped with it. However I found this Jquery plugin in which I should be able to make work

    http://dimsemenov.com/plugins/touchcarousel/
     
  11. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1058839