Search jQuery

jQuery Forum

jQuery Mobile

thomtomdup

swipe panel problem

in jQuery Mobile • 3 months ago

Hello.

I use the new jQuery mobile 1.3.0 and i discovered the swipe panel demo.

I implement it on my web site (m.optimumgym.fr). It work fine when you launch the page directly but not when you click on the link on the menu (the swipe panel)

The exemple code of page :

$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});

my code :

$( document ).on( "pageinit", "#pagePrincipal", function() {
$( document ).on( "swiperight", "#pagePrincipal", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swiperight" ) {
$( "#myMenu" ).panel( "open" );
}
}
});
});

Do you know what is the problem of this ?

Thank you in advance.

Best regards.

Replies(5)

jcficke

The header buttons on the demo don't open the panels (unsure if by design or mistake), but the buttons in page content, eg, "left panel", do work. You need to have the href="#left-panel" as the target for any link you wish to have open the panel. For the demo example. the left header link would look like...

<a href="#left-panel" data-icon="bars" data-iconpos="notext">Navigation</a>

thomtomdup

Re: swipe panel problem

3 months ago

I already do this with a link and it work fine (see on my site http://m.optimumgym.fr the menu icon on top left) but i spoke about swipe event.

On the first page you can swipe. But when you load a other page by click on a link of the menu, the swipe's event doesn't open panel with the same script on this other page. It works if you refresh this other page with the browser.

The demo that i discoverd is :

http://view.jquerymobile.com/popup-arrow/docs/demos/demos/panels/panel-swipe-open.html

Thank you

Regards.

thomtomdup

Re: swipe panel problem

3 months ago

In this demo, swipe on the header part on left or right and you can see the effect.

Thank you

Regards.

watusiware

Re: swipe panel problem

3 months ago

I'm surprised to find this code in the example:

$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {

The way this is written, the pageinit is actually completely irrelevant and unnecessary.

As well, this will redundantly re-register the delegation every time the page is initialized.

I would do it like this (and would never use an ID, so you will see a class for the page)

$(document).on("pageinit", ".demo-page", function() {
var $page = $(this);
$page.on("swipeleft swiperight", function(e) {

You could also just do it like this:

$(document).on("swipeleft swiperight", ".demo-page", function(e) {

However, this is less efficient, as the event will always have to bubble-up all the way to the document, where in my first example, it only bubbles to the page.

thomtomdup

Re: swipe panel problem

3 months ago

Thank you very much.

I use the class name for my page and menu and all works fine.

Thanks !!!

Top Reply

Response title

Attachments

jQuery Forum

swipe panel problem

Replies(5)

Re: swipe panel problem

Re: swipe panel problem

Re: swipe panel problem

Re: swipe panel problem

Re: swipe panel problem

Statistics

Tags

Actions

Related Posts