Question

I am trying to set up a JQuery Mobile 1.3 site that uses a panel and a slider.

Problem is, that using the slider triggers the panel, which opens on a “swiperight” event, as I am moving the slider to the right. The slider will be for pagination, the panel for a menu.

Code here:

http://jsfiddle.net/kMARn/1/

Move the slider to the right and the panel will open.

I have tried using the .not() selector for the panel to not react on the slider:

$(document).not("#slider").on("swiperight", function(event, ui) {
    $("#myPanel").panel("open");
});

But it won’t work, the panel opens when i move the slider to the right. Tried a bunch of variants too, but I’m lost…

Any ideas?

Thanks!

Answer 1

The following solution is more a workaround. It should be relatively reliable though.

$(document).ready( function () {

    var menu_available = true;

    $(document).on("swiperight", function(event, ui) {
        if (menu_available) $("#myPanel").panel("open");
    });

    $("#slider").on("slidestop", function( event, ui ) { 
        menu_available = false;
        window.setTimeout(function() {menu_available= true;},250);
    }); 
});

The variable menu_available is false for a 250 milliseconds right after the slide stops. The window.setTimeout block will reset the variable so that the menu is available again.

This is a stupid workaround, but jQuerys function event.stopEventPropagation(), which IMHO would be the correct way to go, didn’t work.