jQuery Mobile - Panel height with big content

To have a nice menu in my PhoneGap application, I decided to use jQuery Mobile 1.3 panels. Because of loading content dynamically, I had some problems with scrolling.

If my dynamically loaded content was higher than the menu, the panel scroll didn't fit. The scroll behavior is dependent on the page scroll (nicely described in jQuery Mobile's issue tracker: "Make panel and page content scroll independently"). But I have found a solution based on the panel events and css overflow & height properties, testet only on Android > 4 so far.

  
  var panel = $("#ID_OF_THE_PANEL");
  panel.on("panelbeforeopen", function(event, ui) {
  
    // alternatively .ui-page can be 
    // used to select the page
    var page = $('#ID_OF_THE_PAGE');
    page.height($(window).height());
      page.css({
        overflow : 'hidden'
      });
    });

    panel.on("panelbeforeclose", function(event, ui) {
      var page = $('#ID_OF_THE_PAGE');
      page.height(winHeight);
      page.css({
        overflow : 'visible'
      });
    });