MvanOeffel February 2016

Bootstrap collapse button not working on smartphone

Im trying to display a div using the bootstrap collapse class. It works smoothly, but when I try to use the button on an iPhone, iPad or any other 'smart device', the div is not displayed.

Here is my code:

<button type="button" class="btn btn-primary facts-button" data-toggle="collapse" data-target="#watch-facts">    Lees meer </button>

<div id="watch-facts" class="collapse out extras-facts">
    <ul>
        <li>One.</li>
        <li>Two and two again</li>
        <li>3</li>
    </ul> 
</div>

When i disable this .js script, it seems to work on a mobile phone. Don't know where the problem is.

!function($){

$.support.transition = (function(){
var thisBody = document.body || document.documentElement, 
thisStyle = thisBody.style,
support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
return support;
})();

var defaults = {
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
keyboard: true,
beforeMove: null,
afterMove: null,
loop: false
};

$.fn.swipeEvents = function() {
return this.each(function() {

    var startX,
        startY,
        $this = $(this);

    $this.bind('touchstart', touchstart);

    function touchstart(event) {
      var touches = event.originalEvent.touches;
      if (touches && touches.length) {
        startX = touches[0].pageX;
        startY = touches[0].pageY;
        $this.bind('touchmove', touchmove);
      }
      event.preventDefault();
    }

    function touchmove(event) {
      var touches = event.originalEvent.touches;
      if (touches && touches.length) {
        var deltaX = startX - touches[0].pageX;
        var deltaY = startY - touches[0].pageY;

              

Answers


Nikhil Nanjappa February 2016

Ahh finally. Now that I had your complete code. I could find the issue. :-)

I fetched all your website resources and assets locally on my machine and tested and the error seems to be due to this - event.preventDefault(); on the .js file you mentioned (onepage-scroll.js) on line number 54.

Explanation : event.preventDefault method is used to prevent(not trigger) the default action of the event is called within. Because of this the default action of your touch event on any tablet or smaller device will be prevented and hence did not work on native devices.

Answer : Remove the event.preventDefault(); from the touchstart function (line 54) and it should work just fine even in your native devices. Tested and it works fine.

Hope it helped.

Post Status

Asked in February 2016
Viewed 2,615 times
Voted 14
Answered 1 times

Search




Leave an answer