Search jQuery

jQuery Forum

Open panel on swipe

in jQuery Mobile • 3 months ago

New to jQuerymobile and have to say I love it!

Working on my first app and really like the Open Panel on Swipe feature. I was able to get it working by placing the script in my document head tag. I changed the pagename from #demp-page to #mypage and it works like a charm for that page only. I've been looking for a way to have this work on all my pages, not just one.

      $( document ).on( "pageinit", "#demo-page", function() {
            $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
                if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
                    if ( e.type === "swipeleft" ) {
                        $( "#right-panel" ).panel( "open" );
                    } else if ( e.type === "swiperight" ) {
                        $( "#left-panel" ).panel( "open" );
                    }
                }
            });
        });

I've tried placing the script in each page div, renaming the page to match and of course scrubbed through the forums.

Before I dig too deep (spent about an hour so far) I thought I would ask if this function is simply limited to one page and one page only.

      My entire app is loaded as one page with about 20 page div, no rel=externals.
      Also I am not defining any footers if that matters.

Thanks in advance for the assist. If I missed a post with regards; my apologies.

CranMan70

Replies(5)

watusiware

Re: Open panel on swipe

3 months ago

JQM ignores the content of <head> on all but the first page. Anything you change in <head> between pages will not have any effect. (Except for <title>).

I see you are using IDs for left panel and right panel, and duplicating them on each page. This will not work. When you reference an ID, the browser will not know which of multiple duplicate IDs you mean, and will have to punt. (And different browsers punt differently.)

You will need to take a different approach, using classes, rather than IDs.

Since you want to do this on every page, why not just use .ui-page rather than the page ID, and use classes instead of IDs for left panel and right panel?

$( document ).on( "pageinit", ".ui-page", function() {
var $page = $(this);
$page.on( "swipeleft swiperight", function( e ) {
if ( $page.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$page.find( ".right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$page.find( ".left-panel" ).panel( "open" );
}
}
});
});

cranman70

Re: Open panel on swipe

3 months ago

Thank you for the reply, that make sense.

Looking at the example I started with from

http://view.jquerymobile.com/1.3.0/docs/examples/panels/panel-swipe-open.php#&ui-state=dialog

I'm not sure where to include the above. Do I include in each page div in the header?

As for the panels, should I give each panel a unique ID? could do that dynamically with a little work.

Thanks again,

CranMan70

watusiware

Re: Open panel on swipe

3 months ago

Yes, load the script in <head>

There's no need to assign an ID at all to the panels. IDs are next to worthless in JQM. Do yourself a favor and get out of the ID habit. Use a class. You don't need an ID to open or close a panel.

cranman70