Javascript: Active Content

If you look at any solution involving tabs, you will notice two things:

  • When you click on a tab, content is grabbed through ajax for the clicked tab.
  • Or it is made visible which was previously hidden.

As you might have guessed, it is better to go with the later approach because for the interface involving tabs, ajax doesn’t seem to be logical or fast solution. You click on a tab, content should be visible at the same time.

Well, the idea for the solution is simple:

You put all your content within the document inside some containers like DIVs and giving each DIV a unique ID which javascript needs to load the correct content based on the tab clicked. Also, you make the content for the first tab to be visible when page is loaded and hide rest of the DIVs. Finally, you use javascript to do the trick.

I have made a generic javascript solution that you can import into your page and use it straight away. Here is what you need to do to make your content always active:

  • Import the active content JS file into your file:
<script type="text/javascript" src="active_content.js"></script>
  • Where you generate your tabs, put links like this:
	<a href="#" onclick="show_content('div_1'); return false;">One</a>
	<a href="#" onclick="show_content('div_2'); return false;">Two</a>
	<a href="#" onclick="show_content('div_3'); return false;">Three</a>

As an example, when above links are clicked, they will show below divs:

	<div align="center" id="div_1" class="active_content">

		<h3 style="color:#FF0000;">Div One</h3>
		<p style="width:400px;">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		</p>
	</div>

	<div align="center" id="div_2" class="active_content">
		<h3 style="color:#FF0000;">Div Two</h3>
		<p style="width:400px;">

			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		</p>
	</div>

	<div align="center" id="div_3" class="active_content">
		<h3 style="color:#FF0000;">Div Three</h3>
		<p style="width:400px;">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		</p>
	</div>

Here is the active content javascript code:

//////////////////////////////////////////////////////////////////
//	- ACTIVE CONTENT -											//
//////////////////////////////////////////////////////////////////
//	Created By ;												//
// 	SARFRAZ AHMED CHANDIO										//
//	sarfraznawaz2005@gmail.com									//
//																//
//	Create Date: 30 Jan 2009									//
//	Last Update Date: N/A										//
//////////////////////////////////////////////////////////////////
//	Please keep this notice intact if you are using this file.	//
//////////////////////////////////////////////////////////////////

	addLoadListener	(init_dynamic_tabs);

	function init_dynamic_tabs()
	{
		var items = getElementsByAttribute("class", "active_content");
		var counter = 0;
		for (var i = 0; i < items.length; i++)
		{
			counter++;
			// make all items invisible except for the first one
			if (counter != 1)
			{
				items[i].style.display = "none";
			}
		}
	}

	function show_content(id)
	{
		var items = getElementsByAttribute("class", "active_content");

		// hide all items
		for (var i = 0; i < items.length; i++)
		{
			items[i].style.display = "none";
		}

		// show required item now
		document.getElementById(id).style.display = "block";
	}

	/* Very useful function for getting elements by their attributes */
	function getElementsByAttribute(attribute, attributeValue)
	{
	  var elementArray = new Array();
	  var matchedArray = new Array();
	  if (document.all)
	  {
		elementArray = document.all;
	  }
	  else
	  {
		elementArray = document.getElementsByTagName("*");
	  }
	  for (var i = 0; i < elementArray.length; i++)
	  {
		if (attribute == "class")
		{
		  var pattern = new RegExp("(^| )" +
			  attributeValue + "( |$)");
		  if (pattern.test(elementArray[i].className))
		  {
			matchedArray[matchedArray.length] = elementArray[i];
		  }
		}
		else if (attribute == "for")
		{
		  if (elementArray[i].getAttribute("htmlFor") ||
			  elementArray[i].getAttribute("for"))
		  {
			if (elementArray[i].htmlFor == attributeValue)
			{
			  matchedArray[matchedArray.length] = elementArray[i];
			}
		  }
		}
		else if (elementArray[i].getAttribute(attribute) ==
			attributeValue)
		{
		  matchedArray[matchedArray.length] = elementArray[i];
		}
	  }
	  return matchedArray;
	}

	// this will run the specified function on document load
	function addLoadListener(fn)
	{
	  if (typeof window.addEventListener != 'undefined')
	  {
		window.addEventListener('load', fn, false);
	  }
	  else if (typeof document.addEventListener != 'undefined')
	  {
		document.addEventListener('load', fn, false);
	  }
	  else if (typeof window.attachEvent != 'undefined')
	  {
		window.attachEvent('onload', fn);
	  }
	  else
	  {
		var oldfn = window.onload;
		if (typeof window.onload != 'function')
		{
		  window.onload = fn;
		}
		else
		{
		  window.onload = function()
		  {
			oldfn();
			fn();
		  };
		}
	  }
	}

Proceed to download the Active Content.

5 thoughts on “Javascript: Active Content

  1. I don’t agree with you, the content should be loaded on demand and cached, so that the initial page load is fast. If you load all the tabs’ content before-hand, alongside the other page content, the initial user experience is going to be very bad. Besides, on-demand content loading is a pattern that has been used by Yahoo and Google, to improve the performance of initial page loads.

  2. @Ovais Tariq: And I agree with you. The page size should be as minimum as possible. The idea here is for relatively small page size, this is not going to be ideal for larger pages. Also keep in mind that http requests as per Yahoo performance article, should also be minimum, in this case it is only one but with ajax, you do a http request each time.

  3. You probably didn’t understand the Yahoo performance article thoroughly 🙂 Http requests referred there are meant to be normal browser requests, not ajax requests,. there is no limitation on the number of ajax requests you send. Normal browser requests include requests to load content included in the markup, for example, images, script, css, etc. And the reason these requests are required to be minimum is because of limitation on the number of non-ajax http requests that a browser can send to the same domain, and there are other things such as re-flow problem, blocking issues etc.

    • @Ovais Tariq: You are always welcomed 🙂 In fact, I already agreed with you and it is always a healthy discussion because it opens the doors to explore more on a topic 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s