I am an author on other famous sites !

I am pretty excited today because my very first post Create Simple Dropdown Menu Using jQuery has been approved on famous instantshift.com. In a matter of few hours, my post was tweeted and socialized/bookmarked on social/bookmarking networks with good numbers and still increasing, good feedback coming from all around !

In fact, I really like this idea of writing articles for various famous sites. It boosts and markets you or your company tremendously. Other than that, they also pay you for your articles, the payment varies on popularity and quality of the article and content. My first article was approved with fairly good amount I believe. I am all set to writing articles for those famous sites related to my expertise that is PHP, ASP 3.0, jQuery, CSS, HTML, Ajax, Javascript and more.

If you have expertise in web design or web development field and possess good writing skills, give yourself a go ! It is really worth of it, there are a lot of benefits in writing articles for such famous sites.

Happy Blogging !

.

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.