I’ve been messing around with jQuery Mobile lately with the intention of using it in conjunction with Apache Cordova to build an Android app. I ran into a situation where I wanted to present different parts of the UI within an individual page depending on the item selected in a navbar on that page. This is useful for things like splitting up long forms. It took me a bit to figure out the solution, so I thought I’d share it.
Below is what the markup for my page looks like, where each link in the navbar uses an anchor that corresponds to a nested div in the content area.
<li><a href="#one" class="ui-btn-active ui-btn-persist">One</a></li>
<div id="one">One content</div>
<div id="two">Two content</div>
<div id="three">Three content</div>
// Before handling a page change...
$(document).bind("pagebeforechange", function(e, data)
// If the new page is not being loaded by URL, bail
if (typeof data.toPage !== "string")
// If the new page has a corresponding navbar link, activate its content div
var url = $.mobile.path.parseUrl(data.toPage);
var $a = $("div[data-role='navbar'] a[href='" + url.hash + "']");
// Suppress normal page change handling since we're handling it here for this case
// If the new page has a navbar, activate the content div for its active item
$a = $(url.hash + " div[data-role='navbar']").find("a.ui-btn-active");
// Allow normal page change handling to continue in this case so the new page finishes rendering
// Show the content div to be activated and hide other content divs for this page
var $content = $($a.attr("href"));
Here’s what this looks like in action:
I’d be curious to know if there are other better or more efficient ways of handling this.
My wife recently expressed to me that she didn’t care for some of the events appearing in the Facebook Live Feed, namely the ones relating to her friends adding other people as friends or becoming fans of pages, because they tended to flood her feed and crowd out other events she was actually interested in.
I’ve pushed the user script to a github repository if you’d like to download it. I’ve made it extensible such that removing other entries by phrase only requires adding entries to an array at the top. If you have any improvements to make, please feel free to fork it. Enjoy!
I think it’s mostly flown under the radar, but one of my smaller projects is a class called DomQuery that is built on top of DOM and the SPL ArrayObject. The functionality is provides is somewhat similar to jQuery, but it’s different in that it does so programmatically through the API rather than using an expression parser.
This post is mainly to inform anyone who might be interested that I’ve moved the project from its old home at Assembla to a new repository on github. I’ve been enjoying my use of git for version control of other projects and it seems an appropriate place to house DomQuery to allow other people to play with it. I haven’t had time recently to make many updates, but hope that will change in the short term. If you haven’t used DomQuery, why not try it today?