Open panel on swipe

Open panel on swipe

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