Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

JQuery on Touch Devices


(!)

robobobo's Avatar
robobobo robobobo is offline
Computer Specs
Member with 167 posts.
THREAD STARTER
 
Join Date: Apr 2008
Location: Ireland
Experience: Know Alot, Dont know Alot
27-Jun-2012, 06:11 PM #1
JQuery on Touch Devices
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
dukevyner's Avatar
dukevyner   (Luke) dukevyner is offline
Computer Specs
Member with 787 posts.
 
Join Date: Nov 2011
Location: Pakenham, VIC, Australia
Experience: Advanced
28-Jun-2012, 02:18 AM #2
The main problem may be that the "jquery.ui.touch-punch.min.js"
is not on your site... or attached to the main document

Last edited by dukevyner; 28-Jun-2012 at 02:20 AM.. Reason: oh look HTML5
robobobo's Avatar
robobobo robobobo is offline
Computer Specs
Member with 167 posts.
THREAD STARTER
 
Join Date: Apr 2008
Location: Ireland
Experience: Know Alot, Dont know Alot
28-Jun-2012, 05:00 AM #3
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
dukevyner's Avatar
dukevyner   (Luke) dukevyner is offline
Computer Specs
Member with 787 posts.
 
Join Date: Nov 2011
Location: Pakenham, VIC, Australia
Experience: Advanced
28-Jun-2012, 07:03 AM #4
try this
Quote:


<!-- Jquery and plugins -->

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.ui.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/fancybox/jquery.fancybox-1.3.0.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.easing.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/anythingSlider.js"></script>





<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.validate.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/custom.js"></script>




<!-- This site is optimized with the Yoast WordPress SEO plugin v1.2.3 - http://yoast.com/wordpress/seo/ -->
<!--New Jquery-->
<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.ui.touch-punch.min.js"></script>
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
robobobo's Avatar
robobobo robobobo is offline
Computer Specs
Member with 167 posts.
THREAD STARTER
 
Join Date: Apr 2008
Location: Ireland
Experience: Know Alot, Dont know Alot
28-Jun-2012, 07:21 AM #5
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
dukevyner's Avatar
dukevyner   (Luke) dukevyner is offline
Computer Specs
Member with 787 posts.
 
Join Date: Nov 2011
Location: Pakenham, VIC, Australia
Experience: Advanced
28-Jun-2012, 07:26 AM #6
ah... well that is simply not achievable with touch punch, will have to do some looking into on that
dukevyner's Avatar
dukevyner   (Luke) dukevyner is offline
Computer Specs
Member with 787 posts.
 
Join Date: Nov 2011
Location: Pakenham, VIC, Australia
Experience: Advanced
28-Jun-2012, 07:30 AM #7

Last edited by dukevyner; 28-Jun-2012 at 07:39 AM..
dukevyner's Avatar
dukevyner   (Luke) dukevyner is offline
Computer Specs
Member with 787 posts.
 
Join Date: Nov 2011
Location: Pakenham, VIC, Australia
Experience: Advanced
28-Jun-2012, 07:33 AM #8
i take that back... doesnt work on phone
maybe this http://stackoverflow.com/questions/5...-left-to-right
dukevyner's Avatar
dukevyner   (Luke) dukevyner is offline
Computer Specs
Member with 787 posts.
 
Join Date: Nov 2011
Location: Pakenham, VIC, Australia
Experience: Advanced
28-Jun-2012, 07:40 AM #9
this on the other hand does work for phones and likly the touch device you are attempting to use
http://dev.sencha.com/deploy/touch/e...#demo/carousel
note: this page is in HTML5 which some mobile devices may not support all functions
robobobo's Avatar
robobobo robobobo is offline
Computer Specs
Member with 167 posts.
THREAD STARTER
 
Join Date: Apr 2008
Location: Ireland
Experience: Know Alot, Dont know Alot
28-Jun-2012, 07:47 AM #10
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/
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
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.


(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑