Archive for the ‘JavaScript’ Category.

Nested Content with Navbars using jQuery Mobile

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.

<div data-role="page">
  <div data-role="header">
    <div data-role="navbar">
      <ul>
        <li><a href="#one" class="ui-btn-active ui-btn-persist">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
      </ul>
    </div>
  </div>
  <div data-role="content">
    <div id="one">One content</div>
    <div id="two">Two content</div>
    <div id="three">Three content</div>
  </div>
</div>

Below is what the JavaScript looks like to make this work.

(function($) {

// 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")
    {
        return;
    }

    // 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 + "']");
    if ($a.length)
    {
        // Suppress normal page change handling since we're handling it here for this case
        e.preventDefault();
    }
    // If the new page has a navbar, activate the content div for its active item
    else
    {
        $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"));
    $content.siblings().hide();
    $content.show();
});

})(jQuery);

Here’s what this looks like in action:

Demo of nested content areas accessible via navbar links

I’d be curious to know if there are other better or more efficient ways of handling this.

Modifying the Facebook Live Feed with Greasemonkey and jQuery

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.

Unfortunately, Facebook doesn’t provide any filtering for the feed outside of either entire applications or entire people. Upon inspecting the markup for the feed, I found that content was styled such that it was easy to refer to entire entries using CSS selectors. I then recalled that the Firefox web browser, which she uses, has available for it an extension called Greasemonkey that enables you to execute custom JavaScript for a specified set of web pages. I poked around for existing Greasemonkey user scripts to handle the task, but most seemed to try to do too much and I had trouble finding any that supported custom filtering of the Live Feed.

It had been a while since I looked at Greasemonkey, but apparently it’s gained some nice features since. One of these is the @require tag, which allows you to pull in a remote JavaScript file that Greasemonkey will smartly cache locally to be reused. I used this to add the jQuery library to my script using the copy hosted on Google AJAX Library APIs, at which point removing the feed entries my wife didn’t want only required a few lines of code.

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!