Why did touch events on my YUI slider suddenly stop working? - javascript

I had a site using YUI 3 sliders that was working fine for ages. About two weeks ago I was showing a friend my site on my phone, and it worked great.
Then, about a week ago, I was showing it to another friend using my phone again, and the thumbs on the slider would not move. Something has changed and they no longer respond to touch events on my phone.
On a computer, when using a mouse, the thumb is draggable. Everything works perfectly.
It's only on devices where the interface requires touch that I can't move the thumbs. I've tested on two Android devices, an iPhone, and an iPad.
The javascript loads, as it renders the slider. I can click on the rail of the slider and the thumb jumps to that position, so it's not like touch events are completely gone.
However, as far as I can tell, it is not possible to touch the thumb and drag it on a mobile device with a touch screen.
I have tried for a week to figure out what I might have changed, but I just can't solve it.
Can someone look at this page and tell me why touch events aren't working?
Note that I've tried to make this a version that is stripped down to provide only the minimum required to demonstrate the problem, but there might be some odd snippets of irrelevant code here or there.
Any advice would be much appreciated. Thank you for your time and assistance.
Please note: The example page linked to in this question will very likely be removed after a period of time. Thanks for your understanding.

It seems like you need to specify use("slider" instead of use("*". Here's a working (and greatly simplified) demo.

Related

JQuery for Touch Slideshow in Chrome and LightCMS

Ok, so I need to use Light CMS for a client's site, but I am having an issue with the slideshows on touch devices. Touch is very important for this site and we need it to operate well in chrome. I simply want to touch the images to scroll to the next and I just can't figure it out. I know very little about JQuery. I set up a basic example page with how the slideshows run in this CMS. I have googled for weeks and exhausted my self over this. If anyone can help me figure this out I would GREATLY appreciate it!
slideshowexample.publishpath.com

Animation of http://responsive-nav.com/ gets choppy on Android

I just found out about this really cool plugin (new for me, old for some of you maybe) and it works like a charm upon implementation, but only in regular computer browsers. When I try it on my android phone, the css3 animation of the dropdown moves really really choppy, just like its dropping frames. How can I fix this problem?
Here is the plugin I am reffering to:
http://responsive-nav.com/
They seem to have done a really nice job with the plugin, I would say the largest cause of the drop of frame rate may be because you are repainting the entire screen. If you would like, roll your own side navigation but make it go over the existing web page rather than move all the elements on the screen.
EXAMPLES OF SIMPLER MOBILE NAV without repainting
http://fringewebdevelopment.com/
http://www.sony.com/index.shtml
As a further step you can also get rid of the javascript and just do plain CSS and see how that works for you, an example of using checkboxes and labels to control the side nav can be found on my site (just inspect the code) - www.aktof.ca . Hope this helps!

Animated Scrolling

I have been going through this website, I was wondering how to implement a scroll like this. I mean background picture is changing and you can see front image sliding nicely.
Same type of effect I saw at Apple Inc Website. Here if you scroll down, in middle of the page you see an image of iPhone getting separated from a lot and joining another one while scrolling. I just started learning jquery. Can anyone suggest me how to implement this type of animation as I am not sure how to search for such effect. Please, any help is appreciated.
There's another plugin for it, probably a bit more options and designed to work also in old browsers such as IE 9 or IE 8 (OnePageScroll doesn't) and which I believe is essential nowadays.
It is called fullPage.js
I believe it will fit you better.
The Apple website uses functionality similar to OnePageScroll.

Enable and disable touch

The last days I'm working on a webapp for tablets, pc's, phones etc.. I have noticed that the user experience of this app is greatly improved in some cases by disabling the elastic effect of for example the iPad.
(Elastic effect meaning; when you touch the page on a plane that does
nothing, it will follow your finger and move the complete webpage,
even beyond de borders of the screen and on release launch it back to
the original position.)
Anyway! I have a little javascript code which does the trick, and I have been able to adapt it so most touch sensitive part do still work, whilst the page they are on is 'un'-touchable.
This is the piece of code: $(document).bind('touchmove', false);
Is there an easy way to apply this to the whole page, but make an exception for a div? I have tried some stuff but I'm not getting anywhere. Any help is appreciated! :D
Thanks!
I'm not sure whether this will work but its worth a shot. You select all elements on the page, then you remove your div from the list and bind the event to all these elements.
$('*').not('#yourdivId').bind('touchmove', false);

Javascript Slider not working on website after installing other script

I am working on Magento eCommerce site and I am running into a problem after installing a color swatch plugin. The problem appears in the thumbnail views on the product page. What exactly is happening is, when you click the down or up arrow to scroll the thumbnails, after so many clicks, the slider will get stuck and replay the slides in the same position for at least 4-5 clicks, and then it will resume, but get stuck again once it does a full loop of the images. It was functioning 100% perfectly prior to installing the color swatch plugin. I looked in FireBug but I didn't really see any obvious errors, but I am still learning how to use the tool and could have made a mistake.
Here is the URL: http://modernego.info/index.php/spring-dress.html
Here is the URL to the template I purchased in its original stat (with the working slider): http://demo.emthemes.com/manwear/index.php/briefs/reprehenderit-voluptate-8.html
Does anyone have any ideas on how I can work this out? I've tried for over 10 hours trying to fix this doing various methods, trying to duplicate other files, etc.
I would greatly appreciate any help.
I think its not because of script errors, its because of events handling, i've the same situation earlier, i've used jQuery slider, it worked perfectly on normal page but when i placed it in a floating div then its mouse event wouldn't detached
then i've handled mouse event and changed as per mouse movements...
you may debug your page by events... i think some other events causing this problem..

Categories

Resources