Tag Archives: JavaScript

JavaScript without which a page is dumb.

Web Accessibility: Anchor tags for Popup windows

Many a times, on your page, you need to have a JavaScript pop-up window for Slideshow, gallery, comment form, etc. But you also want to have your site WAI compatible. What do you do ?

The idea is to pop-up windows in Browsers that support JavaScript and provide actual href value to the Anchor tag a. But also provide an onclick event that pops up the window.

Consider I want to have a slideshow on a particular link, which actually should pop a 500 x 400 window keeping WAI in its place. This is the code that helps me solve the problem.

Code

...
<script type="text/javascript">
function popW(url) {
  window.open(url, 'newPop', 'width=500,height:400, directories=0');
}
</script>
...
<a href="/slide-show.html" onclick="popW('/slide-show.html');return false;">Slideshow</a>
..

Let us understand it..

  • The Slideshow page is spearate document/page
  • The anchor’ href attribute specifies the correct link to the page
  • The onclick handler pops the window, in browsers with JavaScript enabled
  • Notice return false; after the function call in onclick. This prevents JavaScript enabled browsers to load the href link on the current page

Search Engine Optimization Checklist

Got a site online? and want to make it really SEO Friendly?

Here is a checklist that you need to consider before you put your site live.

SEO Checklist

  • Find keywords and phrases, and try to include them in the title element.
  • Make sure the keywords and phrases occur in the page, But need not overdo its occurance
  • Use meta tags, to define keywords and description
  • Use keywords and phrases in heading elements like h1, h2, ..
  • Try structuring the content, using heading elements instead of changing font-sizes and colors, they can also be applied to headings
  • Do not keep a splash page, I hate it, so do Search Engines
  • The URL should ideally contain keywords related to that page, Apache URL Rewriting
  • Avoid GET parameters to change content of page
  • Avoid using javascript URLs, if you do, remember to add actual hrefs that lead you to that page or similar content
  • Make sure none of the links are created by JavaScript, they should be available in plain HTML
  • Adhering to semantic content, All menu links should ideally go into a list using li
  • Avoid writing CSS inline, keep them in files and call using link href="style.css" ... tag
  • Use semantic markup like em tags for italics and strong for bold text.
  • Try placing the actual content of the page at the begining…, Use CSS to change its position
  • The image tags should ideally have alt attribute that defines the image, inclusion of keywords in it will be helpful
  • The image filename should ideally describe the image

Spawning popup windows in Firefox

New browsers like Firefox(my fav.), IE 7 are very intelligent, they will not allow the standard popup of window.onload or standard…

...
<body onload="load_popup()">
...

They have decent pop-up blockers, which we want to escape.

The new browsers, will consider it a spammed popup, and will kill it before its spawned. They will only create a popup if there is user interaction, as you can see, window.onload and body’s onload is not user interaction.

So, how should my advertiser’s pop-up be displayed? What user interaction should I wait before I get my popup?

There is a trick, you users must have crossed by but may be you have not identified it. You can pop a window on any user interaction, and such a action is not considered as spam pop by Firefox.

What we do is add an EventListener to a particular piece of content, which u are sure that the visitor is going to read. Browsing habits state that most user often keep clicking and selecting a particular text which they are reading. And that is our exact target.

Let us consider within our page, we’ve got a div with id named as “article”. What we’ll do is add a click event Listner to it.

<div id="article">
...
</div>

<script type="text/javascript">
function make_popup() {
  // open any popup window you want.
  url = "http://www.yahoo.com/";
  window.open(url, "popwindow", "width=550,height=300,status=0,directories=0");
}

aid = document.getElementById("article");
aid.addEventListener("click", make_popup, false);
// Adds a click event for div tag with id article
// Which spawns the popup.

</script>
Click here to check if popup loads….

And so at last the beast fell and the unbelievers rejoiced.
But all was not lost, for from the ash rose a great bird.
The bird gazed down upon the unbelievers and cast fire
and thunder upon them. For the beast had been
reborn with its strength renewed, and the
followers of Mammon cowered in horror.

JavaScript

A lot is still unexplored in this area (of JavaScript). I shall try to help out others, who are keen to get with it.

var js = {
  lang: "JavaScript",
  amIGood: function () { return "O u bet!"; },
  start: function () { return "Read more on ruturaj.net"; }
};

alert(js.amIGood());
alert(js.start());

Creating a Live Score Board Client Logic

The the custom JavaScript object player is defined as below.

function player () {
	
	this.name = '';
	this.serving = false;
	this.gamepoint = 0;
	this.sets = new Array();
	
	this.toString = function() {
		return (this.name + ": " + (this.serving ? 'Serving' : 'Facing') + "\n" + this.sets + "\n" + this.gamepoint);
	}
}

The sets member variable is an array.


Next comes the import updateScoreBoard function

function updateScoreBoard() {
	sc = xmlScore;
	pDOM = sc.getElementsByTagName("player");
	players = new Array();
	for (i=0; i<pDOM.length; i++) {
		players[i] = new player(pDOM[i].getAttribute("name"));
		players[i].name = pDOM[i].getAttribute("name");
		if (pDOM[i].getAttribute("serving") == 1) {
			players[i].serving = true;
		}
		// Now get the match sets for the players
		setDOM = pDOM[i].getElementsByTagName("set");
		for (j=0; j<setDOM.length; j++) {
			players[i].sets[j] = setDOM[j].childNodes[0].nodeValue;

			// Now get the curent Game point for the players
			players[i].gamepoint = pDOM[i].getElementsByTagName("gamepoints")[0].childNodes[0].nodeValue;
		}


//		alert(players[i].toString());
	}

	// Now that all data has been gathered...
	document.getElementById("player1").innerHTML = players[0].name;
	document.getElementById("matchplayer1").innerHTML = players[0].name;
	document.getElementById("player2").innerHTML = players[1].name;
	document.getElementById("matchplayer2").innerHTML = players[1].name;

	//Serving
//	document.getElementById("serving1").innerHTML = (players[0].serving)?'o':'';
//	document.getElementById("serving2").innerHTML = (players[1].serving)?'o':'';

	// Sets
	document.getElementById("setplay11").innerHTML = players[0].sets[0];
	document.getElementById("setplay12").innerHTML = players[0].sets[1];
	document.getElementById("setplay13").innerHTML = players[0].sets[2];
	document.getElementById("setplay21").innerHTML = players[1].sets[0];
	document.getElementById("setplay22").innerHTML = players[1].sets[1];
	document.getElementById("setplay23").innerHTML = players[1].sets[2];

	// Game points
	document.getElementById("gamepoints1").innerHTML = players[0].gamepoint;
	document.getElementById("gamepoints2").innerHTML = players[1].gamepoint;
}
</script>

Notice the players variable is an array of player object. The traversing of XML content is easy. If you are unable to understand JavaScript DOM methods check following links

You can find a full working example here, Live Score Board

Creating a Live Score Board Client Logic

Let us start with a script tag that will enclose all the fundooo script. You can save in a .js file as well if you want…

The httpObj is the XMLHttpRequest object, and xmlScore is the response XMLDocument. I’ve created a player object class which is used by the tplayers variable.

<script type="text/javascript">
var httpObj, xmlScore, players;
function getScore(round, category, sex, player) {
	url = "http://localhost/score_server.php";
	url += "?round="+round+"&category="+escape(category)+
		"&sex="+escape(sex)+"&player="+escape(player)+"&rand="+new Date() ;
	httpObj = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {
    	try {
			httpObj = new XMLHttpRequest();
        } catch(e) {
			httpObj = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
       	try {
        	httpObj = new ActiveXObject("Msxml2.XMLHTTP");
      	} catch(e) {
        	try {
          		httpObj = new ActiveXObject("Microsoft.XMLHTTP");
        	} catch(e) {
          		httpObj = false;
        	}
		}
    }
	if(httpObj) {
		httpObj.onreadystatechange = processReqChange;
		httpObj.open("GET", url, true);
		httpObj.send(null);

		timerID = setTimeout("getScore('"+round+"', '"+category+"', '"+sex+"', '"+player+"')",30000);
	}
}

The getScore function requires params, that are need for the server. If you notice at the end of the function, the function calls itself again after 30 sec (30,000 msec). Assuming one serve takes half a min or so.

We define the function that will handle the process’ change of status, i.e. when the status turns 4, it assigns xmlScore the XMLDocument object.

function processReqChange() {
    // only if req shows "loaded"
    if (httpObj.readyState == 4) {
        // only if "OK"
        if (httpObj.status == 200) {
            xmlScore = httpObj.responseXML;
			updateScoreBoard();
        } else {
            alert("There was a problem retrieving the XML data:\n" +
                httpObj.statusText);
        }
    }
}

Creating a Live Score Board

Many a times you may have come across a fancy “Live Score Board”, recently (as of writing) you may have seen the “Java Applet”ized score board. If you want to have a similar such app, but don’t want to get into Java and applets. You may wonder.

But there is a solution, Asynchronous Javascript HTTP Request calls, you may commonly now it AJAX, or famous as XMLHttpRequest

… and make something like
Score board screenshot

You can find working example here, Live Score Board

For your live Score Board App, you need following .

  • A Score Server, which gives scores in a specific format, ideally XML
  • A Client that requests the Server, and displays the parsed XML

We need a Server or a web Service, that will give us the requested data. We’ll use XML to output the response of the server.
We’ll structure the XML as follows

<?xml version="1.0"?>
<scores xmlns="http://www.ruturaj.net/tutorials/php">
<match elapsedtime="1.5h" round="semifinal" category="singles" sex="women">
	<player name="Hingis" serving="1">
		<set no="1">6</set>
		<set no="2">3</set>
		<set no="3">4</set>
		<gamepoints>30</gamepoints>
	</player>
	<player name="Sharapova">
		<set no="1">4</set>
		<set no="2">6</set>
		<set no="3">2</set>
		<gamepoints>15</gamepoints>
	</player>
</match>
</scores>

Assume that we have a database, which is fed continuously. Say we access the above data using the URL as.. http://www.ruturaj.net/tennis/score_server.php?round=semifinal&category=singles&sex=women&player=hingis

Here is a test score_server.php script for testing.

<?php

$array_points = array(15, 30 , 40);
$gamepoints1 = array_rand($array_points, 1);
$gamepoints2 = array_rand($array_points, 1);
$xml = '<?xml version="1.0" ?>
<scores xmlns="http://www.ruturaj.net/tutorials/php">
<match elapsedtime="1.5h" round="semifinal" category="singles" sex="women">
	<player name="Hingis" serving="1">
		<set no="1">6</set>
		<set no="2">3</set>
		<set no="3">4</set>
		<gamepoints>'.$array_points[$gamepoints1].'</gamepoints>
	</player>
	<player name="Sharapova">
		<set no="1">4</set>
		<set no="2">6</set>
		<set no="3">2</set>
		<gamepoints>'.$array_points[$gamepoints2].'</gamepoints>
	</player>
</match>
</scores>
';

header("Content-Type: text/xml");
echo ($xml);
?>