erik-krogh / SudoSlider

The most versatile jQuery content slider
36 stars 24 forks source link

when touch is set to true, inks inside slides do not work on touch devices. #16

Closed jjcitron closed 10 years ago

jjcitron commented 10 years ago

Great Slider. However, from what I can tell, by enabling touch, to let the user swipe through slides, the slider is not allowing the click to bubble through. I've found that if i tap on the slide a couple of times the click will register. - this ones a hard one to debug, as the click will go through on desktop and even in chrome under mobile emulation with touch screen emulation turned on. However, on both iOS and android devices, clicking on the slider to hit the "a" does not work when touch is enabled.

Are there any workarounds for this other than disabling the touch functionality?

here's an example of the markup I'm using for the slide.

<div id="slider"><!-- begin hero slider -->
 <div>
 <a href="#link1">
 <img src="img/image1"/>
 </a>
 </div>
  <div>
 <a href="#link2">
 <img src="img/image2"/>
 </a>
 </div>

 <div>
 <a href="#link3">
 <img src="img/image3"/>
 </a>
 </div>

 </div><!--end slider-->
 <div class="navBullets" style="z-index:2">
        <a href="javascript:void(0);" class="customLink" data-target="1"></a>
        <a href="javascript:void(0);" class="customLink" data-target="2"></a>
        <a href="javascript:void(0);" class="customLink" data-target="3"></a></div>
 </div>
 .
 .
 .
 .
     <script type="text/javascript">

    $(document).ready(function() {
     var sudoSlider = $("#slider").sudoSlider({

         customLink:'a.customLink',
    auto: true,
     pause: 8000,
          ease: "linear",
          continuous:true,
          prevNext: true,
          speed: 1000,
      touch: true
                        });
 });
 </script>
jjcitron commented 10 years ago

digging through jquery.sudoSlider.js it looks like the event.preventDefault(); on lines 1218 and 1227 are the culprits, my assumption is is that we are trying to only allow dragging in a single direction while allowing page scrolling to occur. Commenting out those lines seems to do the trick in allowing the event to bubble down and the href to be clicked with no adverse site effects on the page I'm working on.

webbiesdk commented 10 years ago

Your assumption is correct.

And commenting those two lines will do the trick, but it can cause problems. If you can zoom in on your page, try to do that, then drag the slider. You will see that the slider only drags when the site cannot be scrolled left or right (I hope this makes sense).

A fix might be to just to comment out the last event.preventDefault(). This shouldn't interfere with scrolling, and should allow clicking on links. It works when i test it on my phone, could you try it out?

Another fix is to use the touchHandle option, where you can specify what you can drag on (carefull, this can also include stuff outside the slider). You can see examples of touchHandle here: http://webbies.dk/assets/files/SudoSlider/package/demos/touchHandle.html and here: http://webbies.dk/assets/files/SudoSlider/package/demos/touchHandle%20outside%20slider.html

jjcitron commented 10 years ago

thanks for the feedback. Commenting out just the last preventDefault was tried but it didnt work.

Ive actually set it on mobile for overflow-x to be hidden, so the dragging always gets triggered.

touchhandle was tried, but it didn't really work for the way the site was laid out.

webbiesdk commented 10 years ago

Well if you've set overflow-x to hidden, just keep both commented out.

I'll properly add an option to disable both the event.preventDefault() calls.

webbiesdk commented 10 years ago

I tried to use touchHandle to enable links af21e361847f6df5ac89d56050777a524fb34c12, and i think it works pretty well.

If you want you can see a demo of it here: http://webbies.dk/assets/files/SudoSlider/package/demos/touch%20and%20links.html