android - Bootstrap collapse button not working on smartphone -
im trying display div using bootstrap collapse class. works smoothly, when try use button on iphone, ipad or other 'smart device', div not displayed.
here 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 , 2 again</li> <li>3</li> </ul> </div> when disable .js script, seems work on mobile phone. don't know 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; if (deltax >= 50) { $this.trigger("swipeleft"); } if (deltax <= -50) { $this.trigger("swiperight"); } if (deltay >= 50) { $this.trigger("swipeup"); } if (deltay <= -50) { $this.trigger("swipedown"); } if (math.abs(deltax) >= 50 || math.abs(deltay) >= 50) { $this.unbind('touchmove', touchmove); } } event.preventdefault(); } }); }; $.fn.onepage_scroll = function(options){ var settings = $.extend({}, defaults, options), el = $(this), sections = $(settings.sectioncontainer) total = sections.length, status = "off", toppos = 0, lastanimation = 0, quietperiod = 500, paginationlist = ""; $.fn.transformpage = function(settings, pos, index) { if ( ! $.support.transition ) { $(this).animate({ 'top': pos + '%' },400); return; } $(this).css({ "-webkit-transform": "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "all " + settings.animationtime + "ms " + settings.easing, "-moz-transform": "translate3d(0, " + pos + "%, 0)", "-moz-transition": "all " + settings.animationtime + "ms " + settings.easing, "-ms-transform": "translate3d(0, " + pos + "%, 0)", "-ms-transition": "all " + settings.animationtime + "ms " + settings.easing, "transform": "translate3d(0, " + pos + "%, 0)", "transition": "all " + settings.animationtime + "ms " + settings.easing }); $(this).one('webkittransitionend otransitionend otransitionend mstransitionend transitionend', function(e) { if (typeof settings.aftermove == 'function') settings.aftermove(index); }); } $.fn.jumpto = function(newindex) { var el = $(this) index = $(settings.sectioncontainer +".active").data("index"); current = $(settings.sectioncontainer + "[data-index='" + index + "']"); next = $(settings.sectioncontainer + "[data-index='" + (newindex+1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = 0; next = $(settings.sectioncontainer + "[data-index='" + (newindex) + "']"); } else { return } }else { pos = (newindex * 100) * -1; } current.removeclass("active") next.addclass("active"); if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeclass("active"); $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addclass("active"); } $("body")[0].classname = $("body")[0].classname.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addclass("viewing-page-"+next.data("index")) if (history.replacestate && settings.updateurl == true) { var href = window.location.href.substr(0,window.location.href.indexof('#')) + "#" + (index + 1); history.pushstate( {}, document.title, href ); } el.transformpage(settings, pos, newindex); } $.fn.movedown = function() { var el = $(this) index = $(settings.sectioncontainer +".active").data("index"); current = $(settings.sectioncontainer + "[data-index='" + index + "']"); next = $(settings.sectioncontainer + "[data-index='" + (index + 1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = 0; next = $(settings.sectioncontainer + "[data-index='1']"); } else { return } }else { pos = (index * 100) * -1; } if (typeof settings.beforemove == 'function') settings.beforemove( current.data("index")); current.removeclass("active") next.addclass("active"); if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeclass("active"); $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addclass("active"); } $("body")[0].classname = $("body")[0].classname.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addclass("viewing-page-"+next.data("index")) if (history.replacestate && settings.updateurl == true) { var href = window.location.href.substr(0,window.location.href.indexof('#')) + "#" + (index + 1); history.pushstate( {}, document.title, href ); } el.transformpage(settings, pos, index); } $.fn.moveup = function() { var el = $(this) index = $(settings.sectioncontainer +".active").data("index"); current = $(settings.sectioncontainer + "[data-index='" + index + "']"); next = $(settings.sectioncontainer + "[data-index='" + (index - 1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = ((total - 1) * 100) * -1; next = $(settings.sectioncontainer + "[data-index='"+total+"']"); } else { return } }else { pos = ((next.data("index") - 1) * 100) * -1; } if (typeof settings.beforemove == 'function') settings.beforemove(current.data("index")); current.removeclass("active") next.addclass("active") if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeclass("active"); $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addclass("active"); } $("body")[0].classname = $("body")[0].classname.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addclass("viewing-page-"+next.data("index")) if (history.replacestate && settings.updateurl == true) { var href = window.location.href.substr(0,window.location.href.indexof('#')) + "#" + (index - 1); history.pushstate( {}, document.title, href ); } el.transformpage(settings, pos, index); } function init_scroll(event, delta) { deltaofinterest = delta; var timenow = new date().gettime(); // cancel scroll if animating or within quiet period if(timenow - lastanimation < quietperiod + settings.animationtime) { event.preventdefault(); return; } if (deltaofinterest < 0) { el.movedown() } else { el.moveup() } lastanimation = timenow; } // prepare before binding wheel scroll el.addclass("onepage-wrapper").css("position","relative"); $.each( sections, function(i) { $(this).css({ position: "absolute", top: toppos + "%" }).addclass("section").attr("data-index", i+1); toppos = toppos + 100; if(settings.pagination == true) { paginationlist += "<li><a data-index='"+(i+1)+"' href='#" + (i+1) + "'></a></li>" } }); el.swipeevents().bind("swipedown", function(){ el.moveup(); }).bind("swipeup", function(){ el.movedown(); }); // create pagination , display them if(settings.pagination == true) { $("<ul class='nav navbar-nav navbar-right onepage-pagination'>" + paginationlist + "</ul>").prependto(".navbar-collapse"); postop = (el.find(".onepage-pagination").height() / 2) * -1; el.find(".onepage-pagination").css("margin-top", postop); } if(window.location.hash != "" && window.location.hash != "#1") { init_index = window.location.hash.replace("#", "") $(settings.sectioncontainer + "[data-index='" + init_index + "']").addclass("active") $("body").addclass("viewing-page-"+ init_index) if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addclass("active"); next = $(settings.sectioncontainer + "[data-index='" + (init_index) + "']"); if(next) { next.addclass("active") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addclass("active"); $("body")[0].classname = $("body")[0].classname.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addclass("viewing-page-"+next.data("index")) if (history.replacestate && settings.updateurl == true) { var href = window.location.href.substr(0,window.location.href.indexof('#')) + "#" + (init_index); history.pushstate( {}, document.title, href ); } } pos = ((init_index - 1) * 100) * -1; el.transformpage(settings, pos, init_index); }else{ $(settings.sectioncontainer + "[data-index='1']").addclass("active") $("body").addclass("viewing-page-1") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addclass("active"); } if(settings.pagination == true) { $(".onepage-pagination li a").click(function (){ var page_index = $(this).data("index"); if (!$(this).hasclass("active")) { current = $(settings.sectioncontainer + ".active") next = $(settings.sectioncontainer + "[data-index='" + (page_index) + "']"); if(next) { current.removeclass("active") next.addclass("active") $(".onepage-pagination li a" + ".active").removeclass("active"); $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addclass("active"); $("body")[0].classname = $("body")[0].classname.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addclass("viewing-page-"+next.data("index")) } pos = ((page_index - 1) * 100) * -1; el.transformpage(settings, pos, page_index); } if (settings.updateurl == false) return false; }); } $(document).bind('mousewheel dommousescroll', function(event) { event.preventdefault(); var delta = event.originalevent.wheeldelta || -event.originalevent.detail; init_scroll(event, delta); }); if(settings.keyboard == true) { $(document).keydown(function(e) { var tag = e.target.tagname.tolowercase(); switch(e.which) { case 38: if (tag != 'input' && tag != 'textarea') el.moveup() break; case 40: if (tag != 'input' && tag != 'textarea') el.movedown() break; default: return; } e.preventdefault(); }); } return false; } }(window.jquery);
ahh finally. had complete code. find issue. :-)
i fetched website resources , assets locally on machine , tested , error seems due - event.preventdefault(); on .js file mentioned (onepage-scroll.js) on line number 54.
explanation : event.preventdefault method used prevent(not trigger) default action of event called within. because of default action of touch event on tablet or smaller device prevented , hence did not work on native devices.
answer : remove event.preventdefault(); touchstart function (line 54) , should work fine in native devices. tested , works fine.
hope helped.
Comments
Post a Comment