'Using jQuery sparkle plugin on mobile browsers

I'm developing a webapp/website using the visjs.org timeline for displaying historical maps on a leaflet map. I've used the jQuery Sparkle plugin to deal with single and double clicks, as a single click puts the selected historic map as top layer while double click sets or desets it as a baselayer.

It all works like a charm on all desktop browsers, but the mobile browsers give me a headache. Chrome mobile and Opera mobile work fine (tap and double tap work as expected), however Firefox mobile, Android native browser and iOS browser don't register any clicking or tapping event.

It probably has something to do with the sparkle plugin, but I can't figure out how to adjust it.


EDIT: below is the code for my homepage as well as for the Sparkle plugin

var amountclicked = 0;
var baseselected = 0;
$(".vis-item").bind('click tap', function() {
    amountclicked++;
});
$(".vis-item").bind('singleclick', function() {
    var isBase = this.classList.contains("vis-item-base");
    if (isBase) {
        alert("first disable this layer as baselayer");
    } else {
        var datarray = [];
        $.each(timeline.itemsData._data, function(key, value) {
            datarray.push(value);
        });

        var selectid;
        var selecteditem = this.firstChild;
 
        for (j = 0; j < datarray.length; j++) {
            var currdataobj = datarray[j];
            var cc1 = currdataobj.content;
            var cc2 = selecteditem.innerHTML
            var currdatacontent = cc1.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();
            var selecteditemcontent = cc2.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();

            if (currdatacontent == selecteditemcontent) {
                selectid = currdataobj.id;
                // if previous selected was also basemap
                var prevhistcont;
                var prevselected;
                timeline.setSelection(selectid)

                if (previoushistorical != undefined) {
                    previoushistorical.classList.add("vis-item-base");
                }

                var selecteditemID = timeline.getSelection();
                var selectedYear = data[selecteditemID - 1].start.getFullYear();
                var ind, leng;
                leng = layers.length;

                for (ind = 0; ind < leng; ++ind) {
                    var tempitem = layers[ind];
                    if (tempitem.properties.year != selectedYear.toString()) {
                        if (openmap.hasLayer(overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label])) {
                            if (previoushistorical != undefined) {
                                var innertextbase = $(".vis-item-base")[0].innerText;
                                var curlab = layers[ind].properties.label + "-" + layers[ind].properties.year;
                                if (innertextbase.search(curlab) != 0) {
                                    var isBase = this.classList.contains("vis-item-base");
                                    var overlaylayer = $(".leaflet-layer:eq( 1 )").find('.leaflet-tile-container:eq( 1 )').find('.leaflet-tile-loaded');
                                    var selectindex = ind;

                                    overlaylayer.animate({
                                        opacity: 0
                                    }, 20, function() {
                                        function deletelayer() {
                                            openmap.removeLayer(overlayMaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]);
                                    };
                                    window.setTimeout(deletelayer, 1000); // 5 seconds
                                    });
                                            updateMarkers(selectedYear);
                                        }
                                    } else {
                                        var isBase = this.classList.contains("vis-item-base");
                                        var overlaylayer = $(".leaflet-layer:eq( 1 )").find('.leaflet-tile-container:eq( 1 )').find('.leaflet-tile-loaded');
                                        var selectindex = ind;
                                        overlaylayer.animate({
                                            opacity: 0
                                        }, 20, function() {
                                            function deletelayer() {
                                                openmap.removeLayer(overlayMaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]);
                                            };
                                            window.setTimeout(deletelayer, 1000); // 5 seconds
                                        });
                                        updateMarkers(selectedYear);
                                    }
                                }
                            } else {
                                openmap.addLayer(overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label]);
                                overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].bringToFront();
                                updateOpacity($("#slide")[0].value);
                                var layertitle = "<h4>" + layers[ind].properties.label + "-" + layers[ind].properties.year + "</h4>";
                                var layertext = "";
                                var draaiboeklink = "";
                                if (layers[ind].properties.text != undefined) {
                                    layertext = layers[ind].properties.text;
                                }
                                if (layers[ind].properties.draaiboek != undefined) {
                                    if (layers[ind].properties.draaiboek == "ja") {
                                        var temp = buildUrl('draaiboek.html', 'title', layers[ind].properties.label.toLowerCase());
                                        var t2 = temp.replace(" & ", "en");
                                        draaiboeklink = "</br><a target='_blank' href='" + t2 + "'>Bekijk de originele kaart</a>";
                                    }
                                }
                                $("#mapinfo")[0].innerHTML = layertitle + layertext + draaiboeklink + " ";
                            }
                        }
                    }
                };
                amountclicked = 0;
            }
        });
        var previoushistorical;
        $(".vis-item").bind('lastclick', function() {
            if (amountclicked > 1) {
                //alert("doubleclick performed");
                var isBase = this.classList.contains("vis-item-base");
                if (isBase) {
                    this.classList.remove("vis-item-base");
                    alert("set standard back");
                    var datarray = [];
                    $.each(timeline.itemsData._data, function(key, value) {
                        datarray.push(value);
                    });
                    var selectid;
                    var selecteditem = this.firstChild;
                    for (j = 0; j < datarray.length; j++) {
                        var currdataobj = datarray[j];
                        var cc1 = currdataobj.content;
                        var cc2 = selecteditem.innerHTML;
                        var currdatacontent = cc1.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();
                        var selecteditemcontent = cc2.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();
                        if (currdatacontent == selecteditemcontent) {
                            selectid = currdataobj.id;
                            var selectedYear = data[selectid - 1].start.getFullYear();
                            var ind, leng;
                            leng = layers.length;
                            for (ind = 0; ind < leng; ++ind) {
                                var tempitem = layers[ind];
                                if (tempitem.properties.year == selectedYear.toString()) {
                                    var selectindex = ind;
                                    openmap.removeLayer(overlayMaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]);
                                }
                            }
                        }
                    };
                    openmap.addLayer(basec);
                    basec.bringToBack();
                    baseselected--;
                    previoushistorical = undefined;
                } else {
                    if (baseselected < 1) {
                        previoushistorical = this;
                        this.classList.add("vis-item-base");
                        if (this.classList.contains("vis-selected")) {
                            this.classList.remove("vis-selected");
                        }
                        alert("put as base");
                        openmap.removeLayer(basec);
                        var datarray = [];
                        $.each(timeline.itemsData._data, function(key, value) {
                            datarray.push(value);
                        });
                        var selectid;
                        var selecteditem = this.firstChild;
                        for (j = 0; j < datarray.length; j++) {
                            var currdataobj = datarray[j];
                            var cc1 = currdataobj.content;
                            var cc2 = selecteditem.innerHTML;
                            var currdatacontent = cc1.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();
                            var selecteditemcontent = cc2.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();
                            if (currdatacontent == selecteditemcontent) {
                                selectid = currdataobj.id;
                                var selectedYear = data[selectid - 1].start.getFullYear();
                                var ind, leng;
                                leng = layers.length;
                                for (ind = 0; ind < leng; ++ind) {
                                    var tempitem = layers[ind];
                                    if (tempitem.properties.year == selectedYear.toString()) {
                                        openmap.addLayer(overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label]);
                                        overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].bringToBack();
                                        overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].setZIndex(-2);
                                    }
                                }
                            }
                        };
                        baseselected++;
                    } else if (baseselected == 1) {
                        alert("another historical baselayer");
                        var datarray = [];
                        $.each(timeline.itemsData._data, function(key, value) {
                            datarray.push(value);
                        });
                        var tempprev = previoushistorical;
                        tempprev.classList.remove("vis-item-base");
                        //timeline.itemSet.setSelection(888888);
                        var prevselectid;
                        var prevselecteditem = tempprev.firstChild;
                        for (j = 0; j < datarray.length; j++) {
                            var currdataobj = datarray[j];
                            var cc1 = currdataobj.content;
                            var cc2 = prevselecteditem.innerHTML;
                            var currdatacontent = cc1.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();
                            var selecteditemcontent = cc2.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();
                            if (currdatacontent == selecteditemcontent) {
                                prevselectid = currdataobj.id;
                                var selectedYear = data[prevselectid - 1].start.getFullYear();
                                var ind, leng;
                                leng = layers.length;
                                for (ind = 0; ind < leng; ++ind) {
                                    var tempitem = layers[ind];
                                    if (tempitem.properties.year == selectedYear.toString()) {
                                        var selectindex = ind;
                                        openmap.removeLayer(overlayMaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]);
                                    }
                                }
                            }
                        };
                        previoushistorical = this;
                        this.classList.add("vis-item-base");
                        if (this.classList.contains("vis-selected")) {
                            this.classList.remove("vis-selected");
                        }
                        var selectid;
                        var selecteditem = this.firstChild;
                        for (j = 0; j < datarray.length; j++) {
                            var currdataobj = datarray[j];
                            var cc1 = currdataobj.content;
                            var cc2 = selecteditem.innerHTML;
                            var currdatacontent = cc1.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();
                            var selecteditemcontent = cc2.replace(/'/g, '"').replace('&amp;', '&').toLowerCase();
                            if (currdatacontent == selecteditemcontent) {
                                selectid = currdataobj.id;
                                var selectedYear = data[selectid - 1].start.getFullYear();
                                var ind, leng;
                                leng = layers.length;
                                for (ind = 0; ind < leng; ++ind) {
                                    var tempitem = layers[ind];
                                    if (tempitem.properties.year == selectedYear.toString()) {
                                        openmap.addLayer(overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label]);
                                        overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].bringToBack();
                                        overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].setZIndex(-2);
                                    }
                                }
                            }
                        };
                    }
                }
                amountclicked = 0;
            }
        });

openmap.addLayer(overlayMaps[layers[0].properties.year + " - " + layers[0].properties.label]);
var layertitle = "<h4>" + layers[0].properties.label + "-" + layers[0].properties.year + "</h4>";
var layertext = layers[0].properties.text;
$("#mapinfo").html(layertitle + layertext);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source