Geek Answers Handbook

JQuery Mobile panel - check if it is open

I am trying to check if my panel is open or closed.

I tried like this:

$(document).on('open', '.ui-panel', function(){ console.log('open'); })

but nothing happens.

How to set up event listener for jQ mobile panel?

Open is not a problem, because I just add .panel('open') to the button click and then console.log() , but what about closing? The panel closes when I go outside, how to catch this moment?

+6
source share
8 answers

Ok, I found this:

http://api.jquerymobile.com/panel/#event-beforeclose

So what I needed:

 $( ".selector" ).on( "panelbeforeclose", function( event, ui ) {} );
+8
source

You need to check if a panel is open or closed using hasClass

 if( $(".ui-panel").hasClass("ui-panel-open") == true ){ alert("OPENED"); }else{ alert("CLOSED"); }
+11
source 
 $(document).bind('panelopen', function (e, data) { $('body').css("overflow", "hidden"); }); $(document).bind('panelclose', function (e, data) { $('body').css("overflow", "auto"); });

Hope this helps.

+4
source

For verification, I now used the following code.

 function isSideNavVisible() { var sidenav = $("#sidenav"); var sideNavHidden = sidenav.css("visibility") == "hidden" || sidenav.css("overflow-x") == "hidden" || sidenav.css("overflow-y") == "hidden"; return !sideNavHidden; }

If you want, I would prefer to be attached to events, as shown in the accepted answer.

+1
source 
  function OpenPanel(panel) { if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) { $(panel).panel("open"); }else{ $(panel).panel("close"); } }

Using:

 <div onclick='OpenPanel("#ui-panel1");'>Click Here</div>
+1
source

I think you might need the page as before or on the screen.

See here for jquerymobile event information.

0
source

I use like this:

 if ($("#id").find("div").css("visibility") == "hidden") { alert("Closed"); } else { alert("Opened"); }
0
source

CSS JQM is applied to the panel, clearly indicating its state. Here's a very simple JS Vanilla solution:

 1 var document.getElementById("name-of-panel") = my_panel; 2 my_panel.classList.contains("ui-panel-open");

Line 2 returns "true" if it is open, "false" if it is not. It is also much easier for the next developer (or you in a few months) to figure out what you are doing.

0
source

More articles:


All Articles