Search jQuery

jQuery Forum

Overlay Panel Not Working After page Transition

in jQuery Mobile • 10 years ago

Hi,

Following the recommendation in the jQuery Mobile docs, I have implemented a similar popup overlay menu that looks and behaves the same. However, after each page transition, the overlay panel does not expand to the full height of the page unless I hit F5 on that page.

Having had a bit of a look, the problem seems to be that the popupbeforeposition event isn't being fired, or isn't being fired at the correct time.

Here is the code that I am using:

```
/* Options Menu */
```
```
 $("#OptionsMenuPanel").on({
```

   popupbeforeposition: function () {

```
     var h = $(window).height();
```

     $("#OptionsMenuPanel").css("height", h);

```
   }
```
```
 });
```

Cheers,

Kaine

Replies(5)

haga0054

Re: Overlay Panel Not Working After page Transition

10 years ago

Can you re-produce the issue on jsfiddle.net? It seems to be okay on the documentation. Without the rest of your code it's hard to help you out. I would recommend reading through this:

http://forum.jquery.com/topic/how-to-ask-for-jquery-mobile-help

kainevarl..

Re: Overlay Panel Not Working After page Transition

10 years ago

Hi haga0054,

Thanks for getting back to me so swiftly. I realise that I probably didn't put enough information in my post, so apologies about that. The jQuery Mobile framework I'm using is 1.2.0 release candidate 1 with jQuery 1.8.1.

The simplest way to test this is to create 2 Html pages, one linking to the other, viz. Page1 linking to Page2. Then simply follow the example on this page . While the menu on the first page displays full height, after transitioning to the second page, the menu is not full height but is centred vertically.

Below is an example of the test pages that I have mocked up:

Page 1

<!DOCTYPE html> 
<html> 
<head> 
  <title>Page 1</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.js"></script>
  <style>
    /* Options Menu */
    #OptionsMenuPanel 
    {
      width: 200px;
      border: 1px solid #000;
      border-right: none;
      background: rgba(0,0,0,.5);
      margin: -1px 0;
    }
    #OptionsMenuPanel-popup 
    {
      right: 0 ! important;
      left: auto ! important;
    }
    #OptionsMenuPanel .ui-btn 
    {
      margin: 12px 15px;
    }
  </style>
</head> 
<body> 
 
<div data-role="page">
 
  <div data-role="header">
    <h1>Page 1</h1>
    <a href="#OptionsMenuPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-icon="grid" class="ui-btn-right">Menu</a>
  </div><!-- /header -->
 
  <div data-role="content">	
    <h2>Page 1</h2>
    <p><a href="page2.htm" data-role="button">Page 2</a></p>
 
  </div><!-- /content -->
 
  <!-- Hidden Options Menu Panel. -->
  <div data-role="popup" id="OptionsMenuPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
    <a href="#" data-role="button" data-icon="home" data-theme="a" title="Homepage">Home</a>
    <a href="#" data-role="button" data-icon="plus" data-theme="a" title="Make a new booking">Booking</a>
    <a href="#" data-role="button" data-icon="info" data-theme="a" title="Information">Information</a>
    <a href="#" data-role="button" data-icon="gear" data-theme="a" title="Change your password">Password</a>
    <a href="#" data-role="button" data-icon="gear" data-theme="a" title="Change your profile picture">Profile Pic</a>
    <a href="#" data-role="button" data-icon="gear" data-theme="a" title="Send some feedback">Feedback</a>
    <a href="#" data-role="button" data-icon="star" data-theme="a" title="Desktop Site" rel="external">Desktop Site</a>
    <a href="#" data-role="button" data-icon="back" data-theme="a" title="Logout">Logout</a>
  </div>
  
  <script type="text/javascript">
    /* Options Menu */
    $("#OptionsMenuPanel").on({
      popupbeforeposition: function () {
        var h = $(window).height();
        $("#OptionsMenuPanel").css("height", h);
      }
    });
  </script>
 
</div><!-- /page -->
 
</body>
</html>

Page 2

<!DOCTYPE html> 
<html> 
<head> 
  <title>Page 2</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.js"></script>
  <style>
    /* Options Menu */
    #OptionsMenuPanel 
    {
      width: 200px;
      border: 1px solid #000;
      border-right: none;
      background: rgba(0,0,0,.5);
      margin: -1px 0;
    }
    #OptionsMenuPanel-popup 
    {
      right: 0 ! important;
      left: auto ! important;
    }
    #OptionsMenuPanel .ui-btn 
    {
      margin: 12px 15px;
    }
  </style>
</head> 
<body> 
 
<div data-role="page">
 
  <div data-role="header">
    <h1>Page 2</h1>
    <a href="#OptionsMenuPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-icon="grid" class="ui-btn-right">Menu</a>
  </div><!-- /header -->
 
  <div data-role="content">	
    <h2>Page 2</h2>
    <p><a href="page1.htm" data-role="button">Page 1</a></p>
 
  </div><!-- /content -->
 
  <!-- Hidden Options Menu Panel. -->
  <div data-role="popup" id="OptionsMenuPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
    <a href="#" data-role="button" data-icon="home" data-theme="a" title="Homepage">Home</a>
    <a href="#" data-role="button" data-icon="plus" data-theme="a" title="Make a new booking">Booking</a>
    <a href="#" data-role="button" data-icon="info" data-theme="a" title="Information">Information</a>
    <a href="#" data-role="button" data-icon="gear" data-theme="a" title="Change your password">Password</a>
    <a href="#" data-role="button" data-icon="gear" data-theme="a" title="Change your profile picture">Profile Pic</a>
    <a href="#" data-role="button" data-icon="gear" data-theme="a" title="Send some feedback">Feedback</a>
    <a href="#" data-role="button" data-icon="star" data-theme="a" title="Desktop Site" rel="external">Desktop Site</a>
    <a href="#" data-role="button" data-icon="back" data-theme="a" title="Logout">Logout</a>
  </div>
  
  <script type="text/javascript">
    /* Options Menu */
    $("#OptionsMenuPanel").on({
      popupbeforeposition: function () {
        var h = $(window).height();
        $("#OptionsMenuPanel").css("height", h);
      }
    });
  </script>
 
</div><!-- /page -->
 
</body>
</html>

I hope that the formatted text came out OK. Let me know if you need any more information.

Cheers,

Kaine

haga0054

Re: Re: Overlay Panel Not Working After page Transition

10 years ago

Right away I notice they have duplicate IDs. I would bet that this is what is causing problems. Because of the caching JQuery Mobile does, both pages exist with duplicate id's.

There is a very long discussion about this: https://forum.jquery.com/topic/using-ids-in-jquery-mobile-pages

I suggest reading through this thread, and perhaps looking through scripting as well.

kainevarl..

Re: Overlay Panel Not Working After page Transition

10 years ago

Hi haga0054,

I think that you're right. It's a shame because it means that I cannot have a simple include in all of my pages :-(.

Ah well, I appreciate your help with this.

Cheers,

Kaine

Simon Cou..

Re: Overlay Panel Not Working After page Transition

8 years ago

Sorry for digging up this old topic, but it helped me a lot and I had the same problem : I included a footer in every page with a popup using the same ID, I just wanted to add that I solved this by adding a simple

<?php echo "$page" ?>

Into my link and my popup :

<div data-role="popup" id="popupDialog1<?php echo "$page" ?> " data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">

And I added the var into my include :

<?php $page="index"; include("footer.php");?>

Top Reply

Response title

Attachments

jQuery Forum

Overlay Panel Not Working After page Transition

Replies(5)

Re: Overlay Panel Not Working After page Transition

Re: Overlay Panel Not Working After page Transition

Re: Re: Overlay Panel Not Working After page Transition

Re: Overlay Panel Not Working After page Transition

Re: Overlay Panel Not Working After page Transition

Statistics

Tags

Actions