I’ve been adding JavaScript code many times in my earlier blog posts. I know I struggled to do that. But I was too stubborn to google for clues because somehow what I did is working *GRIN*

Anyway, recently I struggled again, but this time I don’t have the energy to be stubborn, I googled for solution.

According to this article, this is the best way to incorporate JavaScript into WordPress blog post:

1. Save your JavaScript code in a .js file
2. Use SCRIPT tag to load the .js file
3. Add another SCRIPT tag to execute any initiation functions

It will be something like this

<script type="text/javascript" src="/scripts/myscript.js"></script>
<script type="text/javascript">
<!--
	Initialize(); // With assumption that this function is defined inside myscript.js
-->
</script>

That’s all, very simple and straighforward indeed. So now looking back, what’s wrong with my earlier method anyway? Chronologically speaking, it would be as follows:

1. I put the code directly inside a SCRIPT tag
2. Then I realized that WordPress added <br/> to replace the newline, which basically prevent my JavaScript code running
3. I removed the newline from my JavaScript code

Which is really horrible, considering that:

1. my code is now unreadable to human 😀
2. I must tirelessly replace all single line comments (// …. ) into multiple line style ( /* …. */ )
3. It makes debugging with Firebug really difficult

Hmmpffhh… I learned my lesson, so let’s move on 😉 Did you ever make similar mistake because of your stubbornness?

The original Travel Time table is located here. Originally it is just a static table, two static tables to be exact.

I decided to make it a little more ‘fun’ to use. Click anywhere inside the table to view the action.

No fancy tricks used here. Just the basic DOM Table traversal and DOM attribute get/set.

var sdvtableName = "sdvNELDemoTable";
function Select(row, col, clear)
{            
	var myTable = document.getElementById(sdvtableName);
	var i = 0;
	var j = 0;
	
	if (clear)
	{
		for (i=1; i< myTable.rows.length; i++)
		{
			for (j=1; j<myTable.rows[i].cells.length; j++)
			{        
				var csName = myTable.rows[i].cells[j].getAttribute("class");
				if (csName != "tableHead") {
					myTable.rows[i].cells[j].setAttribute("class", "tableBody");
				}
			}
		}
	}	

	if (row == 0)
	{           
		//hightlight column only    
		for (i=1; i<myTable.rows.length;i++)
		{
			//get style
			var csName = myTable.rows[i].cells[col].getAttribute("class");
			if (csName != "tableHead") {
				if (csName == "highlighted")
					myTable.rows[i].cells[col].setAttribute("class", "tableBody");
				else
					myTable.rows[i].cells[col].setAttribute("class", "highlighted");
			}
		}
	}
	else if (col == 0)
	{           
		//highlight row only
		for (i=1; i<myTable.rows[row].cells.length;i++)
		{
			//get style
			var csName = myTable.rows[row].cells[i].getAttribute("class");
			if (csName != "tableHead") {
				if (csName == "highlighted")
					myTable.rows[row].cells[i].setAttribute("class", "tableBody");
				else 
					myTable.rows[row].cells[i].setAttribute("class", "highlighted");                
			}
		}
	}
	else
	{
		//highlight both based on row and column
		Select(row, 0, false);
		Select(0, col, false)
		var csName = table.rows[row].cells[col].getAttribute("class");
		if (csName != "tableHead") {
			table.rows[row].cells[col].setAttribute("class", "highlighted-twice");	
		}
	}
}

function initTable()
{
	var myTable = document.getElementById(sdvtableName);
	var i = 0;
	var j = 0;
	for (i=0; i< myTable.rows.length; i++)
	{
		for (j=0; j<myTable.rows[i].cells.length; j++)
		{            
			var c = j.toString();
			var r = i.toString();
			if (i==0 &amp;&amp; j == 0 )
				myTable.rows[i].cells[j].setAttribute("onclick", "Select(" + r + ", " + c +", true)");
			else 
				myTable.rows[i].cells[j].setAttribute("onclick", "Select(" + r + ", " + c +", true)");
		}
	}
}

And the CSS used

.tableBody 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	text-align:center;
	color: #FFF;
	background-color: #000;
	cursor:pointer;
}
.tableHead
{            
	font-weight: bold;
	color: #FFF;
	background-color: #665A4A;
}
.highlighted 
{
	color: #000;
	background-color: #AAA;
}
.highlighted-twice
{
	color: #FFF;
	background-color: #666;
}

…. which requires you to get those analgesic medicine to alleviate the pain. This judgment is based on recent activity in NHibernate community website.

A person/machine, which by the way call him/her/itself as ‘support center’ open our eyes to website in which we can purchase Tramadol with a very competitive price.

It appears to me, that ‘support center’ somehow knows that developing NHibernate might requires you to consume analgesic medicine to help you to alleviate the pain. And being a good Samaritan, he/she/it shows us where to purchase it with the cheapest price.

This could also be simply viewed as a spam.