Coding for Good
jQueryMobile Included Popup Menus for Multipage Site

jQuery Mobile popups make awesome menus, but unfortunately unlike the dialogs in order for a popup to work they have to exist inside the main div (data-rel=”page”). Which means if you want to have the same popup menu throughout your site you’ll need to have a copy on every “page.” 

Download or Fork the full code on GIT here:

Without php includes my thought was creating a placeholder inside each page and fill in the menu using jQuery. 

<!— Popup Placeholder —>
<div data-role="popup" id="lMenu" data-overlay-theme="a" class="ui-content" data-position-to="window">
  <a href=”#” data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  <!—create a list where we can populate the menu—>
<ul data-role="listview" class="leftMenu"></ul>

Then we’ll create the list for the menu content in a javascript function in our JS file.

function leftMenu() {
  output = ””;
  //html for menu list items
  output += '<li><a data-transition=”slide” href=”#home”>Home</a></li>';
  output += '<li><a data-transition=”slide” href=”#taryn”>Taryn</a></li>';
  output += '<li><a data-transition=”slide” href=”#flula”>Flula</a></li>';
  //write html into any items with the <ul> with the class of “leftMenu”
  //Targeting a Class allows us to input the code in multiple places rather than an ID where it will only effect the first instance of that ID

Back in the HTML at the before the close of the body we’ll call the menu function

<script type="text/javascript">leftMenu();</script>

That’s the basic concept. Another bug that I came across is that if you click on the link to the page you’re on then the popups stop working (unti the page is refreshed). Here’s a way to disable the button for the current page your on.

First give each <li> a new class so we can always target and reenable the links. Also give each button a unique class named exactly the same as the id of the page it links to. Then add an onclick to call the disabler function we’re about to create. We’ll need to pass in the unique class of the <li> we want to disable. (We’re using unique classes again so the link gets disabled on all pages). 

output += '<li class=”remove home”><a data-transition=”slide” href=”#home” onclick=”disabler('.home')”>Home</a></li>’;

Now we’ll create the disabler function:

function disabler (id) {
  //remove all instances of link disabler
  //add link disabler to the page user is navigating too

Now if you’re making an app through PhoneGap, then this is pretty much all you need. You might want to manually add the “ui-disabled” class to your home link so it’ll be disabled to start.

If this is for a mobile website then a user could navigate there without starting on the homepage, so let’s detect what page they start on and disable that link. 

function firstDisable() {
//store the value of the current url
var url = window.location.href;
//find the character position of the hashtag
var check =”#”);
if (check == -1) {
    //if there’s no hashtag, we’re on the homepage, disable home link
  } else {
    //otherwise, store the value from the hashtag till the end of the url (which is the ID for our current page)
    var id = url.substring(check);
  //replace the # with a . (this is why we kept the unique class names identical to the page IDs)
    id = id.replace(’#’, ’.’);
  //call the disabler function and pass in the class of the <li> to disable
Download or Fork the full code on GIT here:

Some transitions cause problems…
I’ve specified the data-transition of “slide” on the links. Some of the transitions have been causing issues with the popups not working after you get to another page, not 100% sure why, I think it might be related to the transition happening before the popup can close (if you use the browser back button you can see the popup close and everything works again. Any insight would be awesome!
  1. fromdehart posted this