Javod's Blog

zeroclipboard: Get javascript events firing after AJAX request

Tue, 25 May 2010 21:08:54 -0700

An interesting problem I came across recently was trying to get Zero Clipboard to work in an AJAX loaded div. Zero Clipboard is pretty much the only way to copy text to the user's clipboard that works across browsers. There is no native way to do this, so it floats an invisible movie on top of a DOM element. Yes, your users need to have Flash installed for this to work.

The issue is as follows:

We need zeroclipboard available on a page that is loaded via ajax inside a div.
Javascript events are not bound in an ajax call unless specifically loaded by an onclick, onload etc...
The scripts themselves need to exist outside of the ajax loaded page to be loaded during page load.

At the time of this writing zeroclipboard is on version 1.0.7

As the documentation notes, the ZeroClipboard.swf file by default is sought for in the same directory as the webpage, and this tutorial assumes that it is.

Let's say we have two pages: index.html and ajaxload.html

The default example for zeroclipboard:

<html>
	<head>
		<style type="text/css">
			#d_clip_button {
				text-align:center; 
				border:1px solid black; 
				background-color:#ccc; 
				margin:10px; padding:10px; 
			}
			#d_clip_button.hover { background-color:#eee; }
			#d_clip_button.active { background-color:#aaa; }
		</style>
	</head>
	<body>
		<script type="text/javascript" src="ZeroClipboard.js"></script>
                
		Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/>
        
		<div id="d_clip_button">Copy To Clipboard</div>
        
		<script language="JavaScript">
			var clip = new ZeroClipboard.Client();
                        
			clip.setText( '' ); // will be set later on mouseDown
			clip.setHandCursor( true );
			clip.setCSSEffects( true );
                        
			clip.addEventListener( 'load', function(client) {
				// alert( "movie is loaded" );
			} );
                        
			clip.addEventListener( 'complete', function(client, text) {
				alert("Copied text to clipboard: " + text );
			} );
                        
			clip.addEventListener( 'mouseOver', function(client) {
				// alert("mouse over"); 
			} );
                        
			clip.addEventListener( 'mouseOut', function(client) { 
				// alert("mouse out"); 
			} );
                        
			clip.addEventListener( 'mouseDown', function(client) { 
				// set text to copy here
				clip.setText( document.getElementById('clip_text').value );
                                
				// alert("mouse down"); 
			} );
                        
			clip.addEventListener( 'mouseUp', function(client) { 
				// alert("mouse up"); 
			} );
                        
			clip.glue( 'd_clip_button' );
		</script>
	</body>
</html>

For our purposes we're going to make a couple of changes.
index.html:

<html>
	<head>
		<style type="text/css">
			#d_clip_button {
				text-align:center; 
				border:1px solid black; 
				background-color:#ccc; 
				margin:10px; padding:10px; 
			}
			#d_clip_button.hover { background-color:#eee; }
			#d_clip_button.active { background-color:#aaa; }
		</style>

       <!-- We're moving the main javascript file to the head section -->
       <script type="text/javascript" src="ZeroClipboard.js"></script>
		<!-- We're also taking the following code and wrapping it in a function to call later -->
		<script language="JavaScript">
		function clipit(){
			var clip = new ZeroClipboard.Client();
                        
			clip.setText( '' ); // will be set later on mouseDown
			clip.setHandCursor( true );
			clip.setCSSEffects( true );
                        
			clip.addEventListener( 'load', function(client) {
				// alert( "movie is loaded" );
			} );
                        
			clip.addEventListener( 'complete', function(client, text) {
				alert("Copied text to clipboard: " + text );
			} );
                        
			clip.addEventListener( 'mouseOver', function(client) {
				// alert("mouse over"); 
			} );
                        
			clip.addEventListener( 'mouseOut', function(client) { 
				// alert("mouse out"); 
			} );
                        
			clip.addEventListener( 'mouseDown', function(client) { 
				// set text to copy here
				clip.setText( document.getElementById('clip_text').value );
                                
				// alert("mouse down"); 
			} );
                        
			clip.addEventListener( 'mouseUp', function(client) { 
				// alert("mouse up"); 
			} );
                        
			clip.glue( 'd_clip_button' );
		}
		</script>

	</head>
	<body>
		<!-- We're adding the div where we will load our ajax file -->
		<div id="loadPageHere"></div>	
	</body>
</html>

ajaxload.html:

Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/>
<div id="d_clip_button">Copy To Clipboard</div>

<!-- Here's the tricky part -->
<!-- We need to load our function after the ajax call, but we can't use a body tag, and divs don't allow the onload attribute -->
<!-- The hack here is to use a 1px x 1px image  and use the onload function available in the img tag to load our function -->
<img src="blank.gif" onload="clipit();" />

So that's the way to use zeroclipboard in an AJAX call. Please note that I did not include the ajax code that actually loads ajaxload.php in the index's div. I assume if you're having this problem you've probably already come that far. If you do need help with that though, just ask!

If you have any questions, problems or suggestions feel free to leave a comment.

The art of learning: How I want to be taught

Sun, 28 Mar 2010 13:41:43 -0700

While I was at university, there was a professor in the Computer Science college who was known as incredibly difficult. Dr. D was unquestionably bright, having two doctorates, one in Mathematics and one in Computer Science. He knew his material, and while his Chinese accent was at times difficult to understand, it wasn't a major hindrance to learning the material.

I had Dr. D for 2 classes: Discrete Mathematics, and Computer Science II. I had never worked so hard for a B in my life. Dr. D was not as some may imagine lacking in the spirit of teaching. Quite the contrary, he loved his job, and he cared and encouraged his students. He often complained that not enough students came to his office hours. Sometimes when our class needed a respite from the non-stop barrage of ideas that Dr. D issued forth, we would (and often did) get him talking about his research on number theory and the rest of the class period would be lost to tangential discussion.

What made Dr. D so difficult was the way he taught us. He taught all his undergraduate classes as if we were graduate students. Instead of giving us concrete examples, we got lots of theory. Maybe I'm just not smart enough, but the bridge from theory to practice has always been difficult for me. The concept of mathematical induction seems easy enough, but when applying it to a problem, unless I've seen something similar, it becomes a major struggle. I understand the means behind the methods: Learn how to learn. That's all fine and dandy, but before I can learn to learn, I need to understand.

Mark Guzdial wrote an excellent article for the ACM discussing just this issue. He brings to light a 1985 paper which is very telling, and coincides with my own personal experiences:

The original 1985 Sweller and Cooper paper on worked examples had five studies with similar set-ups. There are two groups of students, each of which is shown two worked-out algebra problems. Our experimental group then gets eight more algebra problems, completely worked out. Our control group solves those eight more problems. As you might imagine, the control group takes five times as long to complete the eight problems than the experiment group takes to simply read them. Both groups then get new problems to solve. The experimental group solves the problems in half the time and with fewer errors than the control group. Not problem-solving leads to better problem-solving skills than those doing problem-solving. That's when Educational Psychologists began to question the idea that we should best teach problem-solving by having students solve problems.

Why then, if there is such a significant statistical difference, are teachers still insisting on teaching by theory alone? If seeing worked out problems has a better chance of teaching students how and why things work, then let's push that. I know that this certainly works for me. The more I see of a problem worked out, the more I begin to understand the mechanics of it, so when I do come across a problem that is slightly different, my understanding is greater, and my chances of solving are greater as well. This isn't to say that theory should never be taught, of course it should. Guzdial simply states, and I agree, that theory and problems without samples shouldn't be the way to start learning a subject.

Creating a horizontal drop-down menu with CSS

Sun, 13 Sep 2009 15:20:23 -0700

There are a ton of examples on how to create vertical drop-down menus, but hardly any on how to create a completely horizontal drop-down menu. I messed around with this quite a bit until I got what I was looking for, and then, once again, I stripped it down to a minumum to make it easy to understand. Just wrap an unordered list with a div tag using id="hmenu".

From there you can add your own css styles to give it a nice look.

Following is the HTML and CSS code required to do it.

Demo of Horizontal Drop-Down Menu

<div id="hmenu">
<ul>
	<li><a href="example.com">Home</a>
		<ul>
			<li><a href="example.com">About Us</a></li>
			<li><a href="example.net">About Me</a></li>
		</ul>
    </li>
    <li><a href="index.php">MoBlog
    	<ul>
        	<li><a href="example.com">Today's Pics</a></li>
            <li><a href="example.net">Month's Pics</a></li>
            <li><a href="example.org">Year's Pics</a></li>
        </ul>
    </li>
    <li><a href="example.com">Quotes
    	<ul>
        	<li><a href="example.com">Funny</a></li>
            <li><a href="example.org">Serious</a></li>
            <li><a href="example.net">Introspective</a></li>
        </ul>
    </li>
</ul>
</div>

/* Written by: Javod Khalaj */

/* 	'list-style: none' removes the bullets, 
	margin and padding can be adjusted to desired quantities, but zero is a good starting point
	'width:100px' is used because otherwise any mouse-over interaction with the width of the page would cause the menu to display
*/
#hmenu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	width:100px;
}

/*	line-height separates the main navigation a specified distance. 
	Otherwise the navigation will be very tight against each other.
	'position: relative' helps line up the second navigation next to the corresponding first navigation.
*/
#hmenu ul li {
	line-height:30px;
	position: relative;
	float:none;
	width:auto;
}

/*	'left: 100px' pushes the second ul structure (secondary navigation) 100px away from the main ul (main navigation).
	'display: none' removes the visiblity of the secondary navigation (The element will generate no box at all).
	'position: absolute' lines up the second navigation next to the corresponding first navigation.
	'width: 600px' is the width for the second navigation. If it is made too small, the text will wrap.  
*/
#hmenu ul li ul {
	position: absolute;
	left: 100px;
	top:0px;
	display: none;
	width:600px;
}

/* 	this will change the display from none to block.
	essentially this makes the secondary navigation visible on mouseover.
*/
#hmenu li:hover ul { 
	display: block; 
}

/*	'padding-left:20px' separates the secondary menu from running into each other
*/
#hmenu ul li ul li{
	padding-left:20px;
	margin:0px;
	float:left;
	width:auto;
	text-align: center;
}

Recent websites

Tue, 04 Aug 2009 21:38:01 -0700

Here are a few simple websites I've worked on in the past month or so:

Sanitize PHP input for MySQL queries

Mon, 06 Jul 2009 22:21:42 -0700

Sanitizing data in PHP is nothing short of an art form. I love the language, don't get me wrong, and while some people rail (see ruby ::wink wink::) against the non-conformity of naming conventions, and auto casting of variables as evidence of poor design, I think there's no better language for beginners to start producing viable code quickly.

I wanted to present a simple easy to understand sanitizing function for PHP strings that will be inserted into a MySQL database. This particular function serves a very specific purpose: it escapes the user input, strips out html tags except for those we specify, and then attempts to find any malicious code within our allowed html tags.

If any code is found that we don't want, we can either exit out, or insert some generic message into our database. I explain my reasons why I don't just simply strip out malicious code in the comments of the code block. Many of the sanitize functions you'll see online recommend using htmlentities() to remove the risk of malicious code running, and that's fine if you don't want to have any usable tags for an end user. Otherwise, it doesn't do us much good, because when we decode the entities, the scripts will remain.


	// sanitize helps clean a given variable before it is passed to a mysql query, with allowable tags
	
	function sanitize($var){
		// First let's escape the content. Because we are using mysql_real_escape_string() 
		// we need to make sure that we santize our variable AFTER we have connected to 
		// our database. Otherwise we will get an error. We are prepending backslashes
		// to a certain subset of characters here.
		$var = mysql_real_escape_string($var); 
		
		// Let's strip out any tags we don't want, and leave the ones 
		// that are okay for the user to place in. (This call is yours to make)
		$var = strip_tags($var, '<p><a>');
		
		// There's a weakness in strip_tags that we need to address. If we allow
		// any tags, there's a chance that a malicious user could use XSS to exploit 
		// the code. We search the string for malicious code and kill the input if 
		// found. Some people choose to strip the offending material and still insert, but
		// my thoughts on the subjet are: if someone is trying to inject XSS, why
		// would we want them to post anything? 

		if(preg_match("/(<.*?(javascript|script|style|onmouseover|onmousedown).*?>)/i", $var)){
        	$var = "Illegal input, data removed";
			
			// Instead of 'return $var', we can also exit, preventing our script from running any further.
			// We simply uncomment the following line:
			// exit();
			return $var;

        }
		else{
        	return $var;
        }	
	}

Let's take a quick look at the REGEX statement in preg_match() to see what we're doing.

  /(<.*?(javascript|script|style|onmouseover|onmousedown).*?>)/i

First, we're looking for a < in the submitted variable.
Then, using .*? we basically ignore everything inside the tag UNLESS it contains javascript OR script OR style OR...
We ignore anything following those keywords, and check for a closing tag.
/i means that we're ignoring case. So if someone types JAVAscript of javaScRiPt, we don't care.

Let's look at an examle:

	// Remember, we need to connect to our database first because we use mysql_real_escape_string().
	mysql_connect($host,$user,$pass) or die("Could not make a connection");
	mysql_select_db($database_name) or die("Could not select database"); 	
	
	// In this example, we've saved our sanitize function in a separate file called sanitize.php
	include ("sanitize.php");
	
	// We declare our first variable with offending code.
	$var1 = "<a href=\"http://www.javod.com\" onmousedown=\"javascript:alert('XSS');\">XSS Attack Alert!</a>";
	
	// Our second variable 
	$var2="<a href=\"http://www.javod.com\">No XSS here!</a>";
	
	// Display our variables before sanitizing.
	echo "$var1 - (var1 before sanitizing)";
	echo "$var2 - (var2 before sanitizing)";
	
	// Display our variables after sanitizing.
	$var1 = sanitize($var1);	
	echo "$var1 - (var1 after sanitizing)";
	
	$var2 = sanitize($var2);
	echo "$var2 - (var2 after sanitizing)";

This will output the following:

XSS Attack Alert! - (var1 before sanitizing)
No XSS here! - (var2 before sanitizing)
Illegal input, data removed - (var1 after sanitizing)
No XSS here! - (var2 after sanitizing)

Is this impenetrable... ABSOLUTELY NOT! This function is a good start, and gives an idea of what we're needing to do, but by no means is it unbreakable. Once again, feel free to leave any questions or comments you have.

Two methods for circular overlays with Google Maps

Sun, 21 Jun 2009 23:13:31 -0700

Here are two examples of how to create a circular overlay using the Google Map's API. One method involves creating a circular polygon, and I know I've pulled this knowledge from some random site a while back, but for the life of me I can't figure out where. I did a google search using some of the code as the query, but the earliest post I could find containing the code was a post I made on a Google group discussion board.

Both of the maps use version 2 of the API. I was going to rewrite the code using the recently released version 3, but according to a member of Google's development team, version 3 is not meant as a replacement for 2. It's meant to be used as an MVC framework focusing on mobile devices. The feature set on 3 is way behind that of 2 as well... just food for thought.

Demo of Map1, created using a polygonal approach.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps Circular Polygon Example</title>
     <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=YOUR_KEY_GOES_HERE" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
	
	// This is the initialized function when the document loads
    function load() {
	
	  // he Maps API provides a global method (GBrowserIsCompatible()) to check compatibility
	  // but it does not have any automatic behavior when it detects an incompatible browser
      if (GBrowserIsCompatible()) {
		 
		 // create new map with element id = map
        var map = new GMap2(document.getElementById("map"));
		//set center of map, along with zoom level
        map.setCenter(new GLatLng(36.0713471, -97.15), 9);
		
		//Creates a new 3D-style control with buttons to pan in four directions, and zoom in and zoom out, and a zoom slider
		map.addControl(new GLargeMapControl3D());
		map.addControl(new GMenuMapTypeControl());
		
		// Perkins, OK - marker	
		var marker = new GMarker(new GLatLng(36.0713471, -97.15));
		map.addOverlay(marker);

		//Perkins, OK - circle center (in this case it is the same as the marker location, we're creating our circle around our marker)
		var center = new GLatLng(36.0713471, -97.15);
		// Although our calculations are technically in kilometeres, we input it here in miles.
		// We convert this number in the next step to accurately reflect our desired output.
		var radius = 10;
	
		//convert kilometers to miles-diameter
		var radius = radius * 1.609344;
		
		// The offset creates an, ummm... offset around the center to help build the polygon
		var latOffset = 0.01;
		var lonOffset = 0.01;
		var latConv = center.distanceFrom(new GLatLng(center.lat()+0.1, center.lng()))/100;
    	var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng()+0.1))/100; 
		
		// nodes = number of points to create polygon
		var nodes = 40;
		
		// Create an array of points
        var points = [];
		
		// set the amount of steps from node
        var step = parseInt(360/nodes);
        
		// the for loop creates a series of points that define the circle, counting by the amount of steps, by 9 in the case of 40 nodes
		for(var i=0; i<=360; i+=step){
			var point = new GLatLng(center.lat() + (radius / latConv * Math.cos(i * Math.PI / 180)), 
						center.lng() + (radius / lngConv * Math.sin(i * Math.PI / 180)));
			// push "point" onto the points array 
			points.push(point);
        }//end for statement
		
		// GPolygon creates a polygon from an array of vertices, in this example, points is our array
		// GPolygon(array of points, stroke color, stroke weight(from 0-1), stroke opacity(from 0-1), fill color, fill opacity (from 0-1))
		var polygon = new GPolygon(points, "#f33f00", 1, 1, "#ff0000", 0.1);
    	map.addOverlay(polygon); 
		}//end if statement
	}//end function load

	//]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
  	<p style="font-weight:bold">This is our map using a polygon to create a circle</p>
  	<!-- using the element id "map" we will set the map in a div tag -->
    <div id="map" style="width: 500px; height: 400px"></div>
    
  </body>
</html>

Demo of Map2, created using a transparent image (PNG) overlay with the GGroundOverlay() function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps Circlular Image Ground Overlay Example</title>
     <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=YOUR_KEY_GOES_HERE" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
	
	// This is the initialized function when the document loads
    function load() {
	
	  // The Maps API provides a global method (GBrowserIsCompatible()) to check compatibility
	  // but it does not have any automatic behavior when it detects an incompatible browser
      if (GBrowserIsCompatible()) {
		 
		// create new map with element id = map
        var map = new GMap2(document.getElementById("map"));
		//set center of map, along with zoom level
        map.setCenter(new GLatLng(36.0713471, -97.15), 9);
		
		//Creates a new 3D-style control with buttons to pan in four directions, zoom in and zoom out, and a zoom slider
		map.addControl(new GLargeMapControl3D());
		map.addControl(new GMenuMapTypeControl());
		
		// Perkins, OK - marker	
		var marker = new GMarker(new GLatLng(36.0713471, -97.15));
		map.addOverlay(marker);

		// sw and ne are the lower and upper bounds of the box that we define our overlay image: in GGroundOverlay
		// Finding the correct coordinates for an image's bounding box can be a bit tricky, we'll tackle that one some other day.
		var sw = new GLatLng(35.904625,-97.327881);
		var ne = new GLatLng(36.206607,-96.965332);
		
		//Perkins, OK - PNG image overlay
		var groundOverlay = new GGroundOverlay("http://www.javod.com/blog/files/images/circle_marker.png", new GLatLngBounds(sw, ne));
		map.addOverlay(groundOverlay); 

		
		}//end if statement
	}//end function load

	//]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
  	<p style="font-weight:bold">This is our map using a PNG file as a ground overlay</p>
  	<!-- using the element id "map" we will set the map in a div tag -->
    <div id="map" style="width: 500px; height: 400px"></div>
    
  </body>
</html>

Although Map2 looks much easier to implement, I must caution that currently there does not seem to be an easy way to determine the bounding box for the image. I used a topography program to estimate the southwest and northeast points. Not entirely successful either I may add, since my coordinates were circular, and I was trying to find the square points. The image itself will scale according to the bounding box, which is convenient. Another thing to consider: the png file we've loaded has a transparency of 25%, we're not defining the transparency in the code, as we did with the polygon.

Run times are another concern. I tested both maps and although Map2 was a smaller size than Map1 (about 1KB smaller), the load times were about the same. I'm inclined to believe, that if we had numerous circles, Map2 would win out purely on computational merit. But with the increased speeds of javascript engines on browsers, and depending on how many images we're loading and how they're cached (is one image loaded once and re-used, or is it loaded everytime... I don't have an answer to that) I could be wrong.

Please feel free to leave me a note with any questions or comments!

Palm Pre template for screen protector

Thu, 11 Jun 2009 14:07:20 -0700

After waiting for about two and half years since my last phone purchase for a good camera phone to come out for the Sprint network, the Palm Pre has arrived. The picture quality is by far the best I've seen on any phone offered by Sprint. I've signed up to be informed as soon as the development kit for the Pre gets released, and have some ideas about different apps to develop. (Keep posted for some tutorials as well.) In the meantime however, and off-topic, I wanted to help protect my phone from scratches, so I purchased a screen protector. The kind you cut yourself to fit your phone. I'm a little bit obsessive about these things, so I precisely measured the dimensions and mocked up a quick template in adobe illustrator. Then, I printed it on some paper, and just followed the lines using scissors and an x-acto knife. I figured someone else might find it handy so here it is: EPS File - 1.14MB PDF File - 239KB

Vista RSS Gadget Tutorial

Fri, 05 Jun 2009 20:12:05 -0700

This is a small tutorial on something I struggled with for a few days: creating an RSS feed for a Vista gadget. I make a couple of assumptions in this tutorial:

1) You are at least a little familiar with HTML, CSS and Javascript. If you aren't but have a good eye for code, you should be able to work things out anyway.
2) You know the basic construct of a gadget. If you don't, a very simple tutorial can be found at Technical Architecture Worx

A gadget at its simplest form consists of an XML definition file called a manifest and an HTML page. The XML file contains the settings of your gadget while the HTML file is what's actually displayed to the user.

In my quest to write a gadget that displayed an RSS feed I came across a few tutorials, but they were either very convoluted or disjointed. (I came across one tutorial that had about three layers of abstraction just to use ActiveX to access a feed. Ridiculous.) So after reading a bunch of different tutorials (not one of them addressing what I really wanted) I created an RSS gadget for myself. Thinking I may need the code for future use, I stripped it down to a minimum so I could easily incorporate it into another project should I need to in the future.

Here is a zip file with all the code and images.

// page = determines what content goes into what cells on main.html
// In addition we use page to number our pages within the gadget
var page = 0;
// numpages = number of pages that we can sift through on gadget.
var numpages = 3;
// displayPerPage = How many items to display per page on the gadget. 
// The number of columns in the main.html table will need to correspond to this number 
var displayPerPage = 3;

// called onLoad in body tag of main.html
function setup() {
	getRSS();
	window.setInterval(getRSS, (5 * 60000));	
}

// getRSS loads the feed
function getRSS() {
	loading.innerText = "Connecting...";
	
	// XMLHttpRequest allows HTTP client functionality, such as loading data from a server. 
	// It's important to note that while this will work in a vista gadget for accessing remote sites,
	// in browsers, XMLHttpRequest can only access local domains 
	var request = new XMLHttpRequest();
	
	// ActiveXObject is an IE 6.0 version of XMLHttpRequest
	// (IE 6 and below did not use w3 standards for the XMLHttpRequest object) 
	// This is just here for personal-edification.
	// request = new ActiveXObject("Msxml2.XMLHTTP");
	
	// Open the client "request" using GET, followed by the URL we are getting. 
	// The third argument being passed defines whether the method is
	// asynchronous (true - method sends the request to the server and then responds immediately) or 
	// synchronous (false - does not return until the server responds).
	request.open("GET", "http://www.javod.com/blog/feeds/rssblog.php", true);
	request.onreadystatechange = function() {
		// if the request is finished
		if (request.readyState === 4) {
			// it was succussful
			if (request.status === 200) {
				// Here we display the server's response
				loading.innerText = "";		
				// ResponseXML property returns an XML document object: bascially returns values in XML format
				rssXML = request.responseXML;
				parseRSS();
				if (checkCon) { clearInterval(checkCon); }
			} else {
				var checkCon;
				// innerText functions similarly to innerHTML with the important distinction
				// that innerText does not render HTML
				// If we can not connect to the feed, display (...)
				loading.innerText = "Unable to connect...";				
				checkCon = setInterval(getRSS, 30000);
			}
    	} else {
			// gets displayed if readystate has not returned
			loading.innerText = "Connecting...";
		}
	}	
	// Sends the request to the server.
	// The argument to the send function is the body of the request,
	// with GET requests it is always null.
	request.send(null);
}

// pageNo calculates the current page being displayed in the gadget
function pageNo(offset) {
    page = (page + numpages + offset) % numpages;
    parseRSS(page);
}

// parseRSS gets the actual data from the feed. 
function parseRSS(page) {
	if (!page) { 
		page = 0; 
	}
	start = page * displayPerPage;
	end = (page * displayPerPage) + displayPerPage;
	rssItems = rssXML.getElementsByTagName("item");
	rssTitle = null; rssDates = null; rssDate = null; rssLink = null;
	
	for (i=start; i<end; i++) {
		rssTitle = rssItems[i].firstChild.text;
		rssDate = rssItems[i].getElementsByTagName("pubDate"); rssDate = rssDate[0].text.split(" ");
		rssDate = rssDate[0] + " " + rssDate[1] + " " + rssDate[2];

		rssLink = rssItems[i].getElementsByTagName("link"); rssLink = rssLink[0].text;
		cell = i - (page * displayPerPage);
		// innerHTML defines both the HTML code and the text that occurs between that element's opening and closing tag. 
		document.getElementById("cell" + (cell)).innerHTML = '<div onclick="System.Shell.execute(\'' + rssLink + '\');">' + rssDate + '<div class="title">' + rssTitle + '</div></div>';
		document.getElementById("cell" + (cell)).title = rssTitle;
	}
	// displays the current page number and the total number of pages
	pageNum.innerText = (page + 1) + "/" + numpages;
}

For the javascript, I've commented on most of the items I think might cause any confusion. Really, "out of the box", there are only three variables that might need changing. numPages, displayPerPage, and the actual feed location located in the getRSS function.

<html>
<head>
<title>Javod's Feed</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="main.js" type="text/javascript"></script>
</head>
<body onmouseover="this.focus();" onmouseout="" onLoad="setup()">
<div id="content">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    
    <td valign="middle" onmouseover="this.style.background='url(images/shade.png)';" onmouseout="this.style.background='none';"><div class="sub" title="Hello" id="cell0"></div></td>

    </tr>
    <tr>
      <td valign="middle" onmouseover="this.style.background='url(images/shade.png)';" onmouseout="this.style.background='none';"><div class="sub" id="cell1"></div></td>
    </tr>
    <tr>
      <td valign="middle" onmouseover="this.style.background='url(images/shade.png)';" onmouseout="this.style.background='none';"><div class="sub" id="cell2"></div></td>
    </tr>

	
  </table>
</div>
<div id="pageNumLoc">

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr align="center" valign="middle">
      <td width="10" class="pageNumStyle" onclick="pageNo(-1);" align="right">«</td>
      <td id="pageNum" class="pageNumStyle">Loading...</td>
      <td width="10" class="pageNumStyle" onclick="pageNo(+1);" align="left">»</td>

    </tr>
  </table>
</div>
<div id="loading">Loading...</div>
</body >
</html >

The HTML page is pretty straighforward. I will point out that the number of table rows need to be adjusted according to the number that was put in the javascript variable for displayPerPage.

And finally the CSS that helps lay it all out, the XML manifest file, and the corresponding images are in the zip file.

hand in your pocket

Fri, 19 Dec 2008 16:44:49 -0800

it's become apparent to me that almost every blogger that i'd developed an affinity for has stopped blogging. or blogs so infrequently it can barely be counted. sanam, sepi, negar, asad, guav, and a few others all seem to have disappeared for the most part. granted sepi has a slew of other projects online she works on, so i forgive her... but the rest. family, school, and life are no excuse! i hear the critics out there already; accusing me of being a hypocrite. well, i am. i've developed more of a taste for coding then for writing, and anytime i sit down to blog i end up writing a script of some sort instead. and none of this is interesting to anyone but me, and i know it, so why subject others to my idiosyncrasies? what's your excuse...?

time again...

Thu, 27 Nov 2008 08:44:02 -0800

to start writing. i'm in california, and at this moment i'm with my family and friends. it's good to be back. happy thanksgiving :)