Mior Muhammad Zaki: PHP & JavaScript Programmer

In-page Active Hyperlink using Savvy.UI

In this tutorial I will show you how to create in-page active hyperlink which not only detect when you click an in-page anchor but as well when you load a page with valid in-page hyperlink using Savvy.UI JavaScript Library.

Introduction

With the introduction of Ajax in the recent year, most website based on Ajax has abandon native page hyperlink to call different content and move the JavaScript callback (which is very similar to the frame-set era), this is bad as visitor can’t bookmark or exchange links. However, the issue can be solved using by providing a huge numbers of code to imitate browsing history and bookmarking but let me show you a much simplier way to do it.

a. Case Study

Here to recent sample of web application using somewhat similar approach to enable user to directly load an interactive page from bookmarks or page loads:

• GMail
  Check the new version and try to navigation between Inbox, Chats, Starred and Sent. You will notice the url will change from #inbox, #chats, #starred and #sent
• Netvibes
  The same thing happen when you navigate between different Tabs.

b. Why location.hash

location.hash is the hash property sets or returns the URL from the hash sign (#). The beauty of using location.hash is that any URL hash changes will not require a new page load unless you force it via the browser’s reload button.

Js.util.activeContent

The Utility Class by default Js.util.activeContent require Js.base to work but if you need to use Ajax request you also need to include Js.ext.Ajax which I’m using for this tutorial. Js.util.activeContent can be declare using two (2) detection option:

• Selector Query
  Execute function callback when there’s click on selected ‘A’ elements.
• Interval
  Detect changes of location.hash to create function callback.

Personally I would advise using Selector Query as each Interval declaration will run as difference interval id which is bad when you have a multiple interval running at the same time.

b. Using Js.util.activeContent

Js.util.activeContent uses Js.base to create Class inheritence in JavaScript but it’s not very hard to understand it. Here an example of such application using Js.util.activeContent.

var app = Js.util.activeContent.extend({
	init: function(i) {
		// i is an array, which allow you modulize your request into segment.
		// e.g: http://yourdomain.com/#alert/main will be ['alert', 'main']
		if(i[0] == 'alert' && i[1] == 'main') {
			do_something(); // You can execute something
		}
	}
});
// declare this function, since no selector parameter is included
// this declaration will be using Interval method
new app();

First thing you would need for the extended Class is the init function because when there a click (if your using Selector Query) or location.hash changes (using Interval) the this.init() will be executed. Additionally you can add more method in new_class if you require it.

If you want to avoid using Interval you can add a parameter which contain the valid selector query such as:

new app('#top > a');
// only detect in-page hyperlink from
// all a elements under #top