Archive for April, 2014

Fight Score Single Page UI App

I asked a question on Twitter last week about jQuery and async calls (thanks @jeefy & @codepo8) – a few folks asked me to post the code I was working on so here it goes.

The app is an HTML page for scoring boxing and MMA fights.

You can play with the UI here : http://koscience.com/apps/scorecard/

This is a mile stone of code samples I’ve posted recently on Dynamic jQuery Accordions and Event Handler Delegation for Dynamic Content.

scorecard-1

The events represented in the application’s UI are data driven by the retrieved JSON file (sample data below)


data.json


[
    {
        "bluefighter"       : "Fighter 1",
        "blueimage"         : "images/silhouette.jpg",
        "redfighter"        : "Fighter 2",
        "redimage"          : "images/silhouette.jpg",
        "numberofrounds"    : "10"
    },
    {
        "bluefighter"       : "Fighter 3",
        "blueimage"         : "images/silhouette.jpg",
        "redfighter"        : "Fighter 4",
        "redimage"          : "images/silhouette.jpg",
        "numberofrounds"    : "3"
    },
    {
        "bluefighter"       : "Fighter 5",
        "blueimage"         : "images/silhouette.jpg",
        "redfighter"        : "Fighter 6",
        "redimage"          : "images/silhouette.jpg",
        "numberofrounds"    : "5"
    },
    {
        "bluefighter"       : "Fighter 7",
        "blueimage"         : "images/silhouette.jpg",
        "redfighter"        : "Fighter 8",
        "redimage"          : "images/silhouette.jpg",
        "numberofrounds"    : "12"
    }
]

You’ll note that the number of bouts in the event are not determined until run time.

Also, for each bout, the number of rounds is not fixed. Each is determined by an entry in the JSON data.

Since each bout will have a VARIABLE number of inputs and outputs, if you think about the mechanics of accomplishing this, it’s an interesting HTML issue.

There are lots of other, perhaps more elegant ways I might have done this (whenever I post code someone comments to tell me I suck 🙂 )

I didn’t use MVC, Event Delegation, or an Object Oriented Data Model. Each of those that I considered just didn’t seem to offer the value in return for the added abstraction or complexity.

(I used to do some work for the SIG Sauer Firearms Academy where we used the acronym SIG = Simple Is Good !)

So I took the simple route. The loop that iterates through the JSON data dynamically adds each content section and since I’m not using event delegation, each “bout” (accordion tab) gets it’s own version of the event handling code to score the bout.

Since the number of bouts is relatively small (less than 15) the performance hit won’t ever be an issue, but if we were dealing with a large number of sections we would need to use delegation of some sort to attach a single event handler at the containing element or document level to avoid unnecessarily duplicating code by hooking the click event for every object / button.


index.html


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fight Card</title>
<link rel="stylesheet"
 href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="css/style.css">
<style>
	/* IE has layout problems when sorting accordion items  */
	.group { zoom: 1 }
</style>

<script>

//-----------------------------------------------------------------------+
// addBout() - Add a single node to the accordion
//-----------------------------------------------------------------------+

function addBout(bout, key){

//-----------------------------------------------------------------------+
// Build the display element for the the scoring display based on the 
// number of rounds for this bout.
//-----------------------------------------------------------------------+
var round_numbers = "";
var round_scores = "";
var round_totals = "";
for (var i=0; i < bout.numberofrounds; i++)
{
	round_numbers += "<td id='roundTitle_" + (key+1) + "_" + (i+1) 
				   + "'>Round #" + (i+1) + "</td>";
	round_scores  += "<td id='bout_" +  (key+1) + "_round_" + (i+1) 
				   + "_roundbox'><span id='bout_" + (key+1) + "_round_" 
				   + (i+1) +  "_blueScore'>00</span>-<span id='bout_" 
				   + (key+1) + "_round_" + (i+1) 
				   +  "_redScore'>00</span></td>";

	round_totals  += "<td id='bout_" +  (key+1) + "_round_" + (i+1) 
				   + "_totalbox'><span id='bout_" + (key+1) + "_round_" 
				   + (i+1) +  "_blueTotal'>00</span>-<span id='bout_" 
				   + (key+1) + "_round_" + (i+1) 
				   +  "_redTotal'>00</span></td>";
}

//-----------------------------------------------------------------------+
// Build the display element for the rest of the current bout.
//-----------------------------------------------------------------------+
var bout =
	"<div id=\"bout_" + (key+1) + "\" class=\"group\">" +
		"<span class=\"handle\"> " +
			"<div class=\"table\">" +
				"<div class=\"row\">" +
					"<span class=\"cell width33pct align-left\">" +
						"<strong>" + bout.bluefighter + "</strong>" +
					"</span>" +
					"<span class=\"cell align-center valign-middle\">" +
						"vs." +
					"</span>" +
					"<span class=\"cell width33pct align-right\">" +
					"<strong>" + bout.redfighter + "</strong>" +
					"</span>" +
				"</div>" +
			"</div>" +
		"</span>" +
		"<div>" +
			"<div class=\"table\">" +
				"<div class=\"row\">" +
					"<span class=\"cell width150 align-center\">" +
						"<img src=\"" + bout.blueimage 
						+ "\" alt=\"\" style='border:2px solid blue'>"
						+ "<br />" +
					"</span>" +
					"<span id=\"test\" "  +
					"class=\"cell align-center valign-middle\">" +
						"<h2>" +
						"<span id='roundLabel_" + (key+1) + 
						"'>Round</span><br />" +
						"<span id=\"current_round_" + (key+1) + 
						"\">1</span><br />" +
						"<input type='number' id='blueRoundScore_" + 
						(key+1) + "' size='2' max='10' min='0' " +
						"value='10' " +
						"style='border:2px solid blue'>" +
						"<input type='number' id='redRoundScore_"  + 
						(key+1) + "' size='2' max='10' min='0' " +
						"value='10' style='border:2px solid red'>" +
						"<br /><br />" +
						"<button id='btnScore_" + (key+1)  + 
						"' class='score_button'>Score</button>" +
						"<span id='boutResult_" + (key+1)+ "' " +
						"class='boutResultClass'></span>" +
						"</h2>" +
					"</span>" +
					"<span class=\"cell width150 align-center\">" +
						"<img src=\"" + bout.redimage + "\" alt=\"\" " +
						"style='border:2px solid red'>" +
					"</span>" +
				"</div>" +
			"</div>" +
			"<div align=\"center\">" +
				"<table>" +
					"<tr>" +
						round_numbers +
					"</tr>" +
					"<tr>" +
						round_scores +
					"</tr>" +
					"<tr>" +
						round_totals +
					"</tr>" +
				"</table>" +
			"</div>" +
		"</div>" +
	"</div>";
return bout;
}

//--------------------------------------------------------------------------+
// DOM READY()
//--------------------------------------------------------------------------+
$(function() {
	//----------------------------------------------------------------------+
	// Wire up the accordion div, specify the header/handle and make 
	// the sections sortable.
	//----------------------------------------------------------------------+
	$( "#accordion" )
			.accordion({
				header: "> .group > .handle",
				heightStyle: "content"
			})
			.sortable({
				axis: "y",
				handle: ".handle",
				stop: function( event, ui ) {
					// IE doesn't register the blur event when sorting
					// so trigger focusout handler to remove .ui-state-focus
					ui.item.children(".handle").triggerHandler("focusout");
				}
			});

	//----------------------------------------------------------------------+
	// Fetch the JSON configuration file and use it to build the 
	// accordion sections
	//----------------------------------------------------------------------+
	$.getJSON("data/event.json", function (data) {
		$.each(data, function (key, val) {
			$("#accordion").append(addBout(val, key)).accordion("refresh");

			//--------------------------------------------------------------+
			// For each bout - dynamically bind the score button event 
			// handler to this dynamic method
			//--------------------------------------------------------------+
			var BlueTotal = 0;
			var RedTotal = 0;
			var BoutNumber = (key+1);
			$( "#boutResult_"+(BoutNumber) ).hide();
			$( "#btnScore_"+(BoutNumber) ).click(function() {
			// Get the current round number.
			var currentRound = 0;
			currentRound = $("#current_round_" + (BoutNumber)).text();

			//----------------------------------------------------------+
			// Fetch the score for the current round and post to 
			// scoring table
			//----------------------------------------------------------+
			var BlueScoreThisRound =  $("#blueRoundScore_" + 
				                         BoutNumber).val();
			var RedScoreThisRound =   $("#redRoundScore_" + 
				                         BoutNumber).val();
			$("#bout_" + (BoutNumber) + "_round_" + currentRound + 
			   "_blueScore").text(BlueScoreThisRound);
			$("#bout_" + (BoutNumber) + "_round_" + currentRound + 
				"_redScore").text(RedScoreThisRound);
			// If it's the FIRST round.
			if (currentRound == 1) {
				$("#bout_" + (BoutNumber) + "_round_" + currentRound + 
				  "_blueTotal").text(BlueScoreThisRound);
				$("#bout_" + (BoutNumber) + "_round_" + currentRound + 
					"_redTotal").text(RedScoreThisRound);
				BlueTotal = BlueScoreThisRound;
				RedTotal = RedScoreThisRound;
			}
			// All except the first round.
			else {

				 BlueTotal = parseInt($("#bout_" + (BoutNumber) + 
				 	"_round_" + (currentRound-1)  + 
				 	"_blueTotal").text());
				 BlueTotal += parseInt(BlueScoreThisRound);
				 $("#bout_" + (BoutNumber) + 
				 	"_round_" + (currentRound)  + 
				 	"_blueTotal").text(BlueTotal);

				 RedTotal = parseInt($("#bout_" + (BoutNumber) + 
				 	"_round_" + (currentRound-1)  + 
				 	"_redTotal").text());
				 RedTotal += parseInt(RedScoreThisRound);
				 $("#bout_" + (BoutNumber) + "_round_" + 
				 	(currentRound)  + "_redTotal").text(RedTotal);
			}

			// Blue wins the round.
			if (BlueScoreThisRound < RedScoreThisRound) {
			  $("#bout_" + (BoutNumber) + "_round_" + currentRound + 
			  	"_roundbox").css("border", "2px solid blue");
			}
			// Red wins the round.
			else if (BlueScoreThisRound > RedScoreThisRound) {
				$("#bout_" + (BoutNumber) + "_round_" + currentRound + 
					"_roundbox").css("border", "2px solid red");
			}
			// Round is a draw
			else if (BlueScoreThisRound == RedScoreThisRound) {
				$("#bout_" + (BoutNumber) + "_round_" + currentRound + 
					"_roundbox").css("border", "2px solid green");
			}

			// Who's winning the fight after this round ?
			if(RedTotal == BlueTotal) {
				$("#roundTitle_" + (BoutNumber) + "_" + 
					currentRound).css("border", "2px solid green");
				$("#bout_" + (BoutNumber) + "_round_" + 
					currentRound + 
					"_totalbox").css("border", "2px solid green");
			}
			if(BlueTotal < RedTotal) {
			   $("#roundTitle_" + (BoutNumber) + "_" + 
			   	currentRound).css("border", "2px solid red");
			   $("#bout_" + (BoutNumber) + "_round_" + 
			   	currentRound + "_totalbox").css("border", "2px solid red");
			}
			if (BlueTotal > RedTotal) {
				$("#roundTitle_" + (BoutNumber) + "_" + 
					currentRound).css("border", "2px solid blue");
				$("#bout_" + (BoutNumber) + "_round_" + 
					currentRound + 
					"_totalbox").css("border", "2px solid blue");
			}


			//----------------------------------------------------------+
			// Reset current round scores t 10-10, hide button if all 
			// rounds scored
			//----------------------------------------------------------+
			$("#blueRoundScore_" + BoutNumber).val(10);
			$("#redRoundScore_" + BoutNumber).val(10);
			currentRound++;
			// The fight is over.
			if (currentRound > val.numberofrounds) {
				$("#blueRoundScore_" + BoutNumber).val(BlueTotal);
				$("#blueRoundScore_" + BoutNumber).prop('disabled', true);
				$("#redRoundScore_" + BoutNumber).val(RedTotal);
				$("#redRoundScore_" + BoutNumber).prop('disabled', true);
				$( "#btnScore_"+(BoutNumber)).hide();
				if(BlueTotal == RedTotal) {
					$( "#boutResult_"+(BoutNumber) ).text("<<<  Draw  >>>");
				}
				else if (BlueTotal > RedTotal) {
					$( "#boutResult_"+(BoutNumber) ).html("&larr; WINNER");
					$( "#boutResult_"+
						(BoutNumber) ).css("background-color", "blue");
					$( "#boutResult_"+(BoutNumber) ).css("color", "white");
				}
				else if (RedTotal > BlueTotal) {
					$( "#boutResult_"+(BoutNumber) ).html("WINNER &rarr;");
					$( "#boutResult_"+
						(BoutNumber) ).css("background-color", "red");
					$( "#boutResult_"+(BoutNumber) ).css("color", "white");
				}

				$( "#roundLabel_"+(BoutNumber) ).text("Fight");
				$( "#current_round_"+(BoutNumber) ).text("Complete");
				$( "#boutResult_"+(BoutNumber) ).show();

			}
			// On to another round.
			else {
				$("#current_round_" + (key+1)).text(currentRound);
			}
			});
		});

	});

});

</script>
</head>

<body>
<div id="main-container" class="main-container">
	<div id="accordion">
	<!-- Bouts will be inserted here -->
	</div>


</div>
</body>
</html>


style.css


body {
	font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
	font-size: 62.5%;
    background: url('../images/background.gif') repeat;
}

td {
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    width: 90px;
}

input {
    text-align: center;
}


.main-container {
    width: 96%;
    max-width: 960px;
    min-width: 300px;
    height: 100px;
    position: absolute;
    top:20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*---------------------------------------*/
/*   Styles for table like formatting.   */
/*---------------------------------------*/
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

/*---------------------------------------*/
/*   Styles for score area.              */
/*---------------------------------------*/

.score_box {
    border:2px solid black;
    padding: 5px;
}

.score_button {
    width: 130px;
    height: 40px;
}

.boutResultClass {
    border: 2px solid black;
    background-color: yellow;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/*---------------------------------------*/
/*   Styles for width specification.     */
/*---------------------------------------*/
.width150 {
    width: 150px;
}

.width33pct {
    width: 33%;
}

.width34pct {
    width: 34%;
}

.width100pct {
    width: 100%;
}

/*---------------------------------------*/
/*   Styles for various alignments.      */
/*---------------------------------------*/
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

/*-------------------------------------------*/
/*   Style overrides for jQuery accordion.   */
/*-------------------------------------------*/
.ui-state-default{
    background-color: #3173a5;
    background-image: none;
}
.ui-accordion-header {
    background-color: #333333;
    color:  #BDC3C7;
    font-size: 16;
}

.ui-accordion-header.ui-state-active {
    background-color: #BDC3C7;
    color: #333333;
    font-size: 16;
}

You can download a .zip file without the funky source code formatting that my blog requires [ HERE ]


So what’s next ?

Next I’ll create services so that users can all score an event in real time, collaboratively while the event is happening live.

After I create the services and update the client to send scores, I’ll build iOS, Android & Windows clients !

Thoughts: What is a technical evangelist?

I’m in between jobs after spending 15 years as a developer evangelist.

Last week I lost out on a position for a REST API Developer Evangelist role that I had interviewed for primarily because I lacked in-depth knowledge of a specific PHP API that I had never used.

I’m not going to name the company because I like their product and the well known developer that I interviewed with, but it started me thinking about the role of technical evangelist and how technophiles often confuse the nature of the role and it’s success.

A number of other people with extensive developer evangelism experience have shared with me in the past that they were rejected out of hand for what they believed was a lack of “bit level” experience.

Lets start with understanding what a Technical Evangelist is (and from here on in I’ll be specifically referring to Developer Evangelism). The Technical Evangelist’s role ( for a software vendor as opposed to a consultancy) is to produce two sets of results.

1.) Net New Adoption
2.) Increased Customer Satisfaction & Dependence

Technical Evangelists that represent consulting companies have a bit of a mission. That of presenting the technical expertise of their firm in the hopes of selling its services.

Even technical evangelists that don’t represent a specific company still have the goal of encouraging adoption of the technologies that they evangelise (usually because it’s the one THEY have chosen).

You will often hear Developer Evangelists describe themselves as “Impartial Trusted Advisors”, and becoming “trusted” is a great way for a technical evangelist to increase their influence but in actuality, there is no such thing as a truly “impartial” technical advisor.

So this bears the question, what does it take to be a really successful Technical Evangelist and how does that translate to a really valuable technical evangelism program?

Sure, a technical evangelist need a strong technical acumen. When I joined Microsoft to do Technical Evangelism for .NET it was an unreleased product. I’d played with it for about a week before I started the interview process at Microsoft. When I joined Mozilla to catalyze HTML5 App Evangelism I was far from a client side expert. After all, one of the fundamental tenants of ASP.NET (before MVC and Razor) was that you didn’t do client side work. It was all drag and drop.

So in taking various evangelism roles that focused on technologies in which I was not omnipotent, how did I succeed?

The dictionary includes a definition of an evangelist as : “a zealous advocate of a cause”.

This is true of Technical Advocates as well.

Remember that I suggested the primary goals of a technical evangelist are to deliver “net new” adoption and increased user (customer) satisfaction.

The technical evangelist has secondary goals as well, like product feedback, support costs reduction, customer specific problem solving, direct sales opportunity support, etc. and some of those can be facilitated by low level expertise, but in general – bits and bytes hacking is of secondary value.

I mean, once you have written a for loop, they are pretty much in the same whether you’re writing C#, PHP,JavaScript, Python, etc.

I suggest that you don’t think about Technical Evangelism as “here’s what my product can do”, but rather “look what you can do with my product”. It may sound like a semantic nuance at first blush, but it’s not.

Let me share a couple of examples.

In 2001 when I started working to drive ASP.NET adoption (.NET was in Beta havng been previewd at the 2000 PDC) I focused on Web Services. The big deal about Web Services was not the technical details of building or calling a service in ASP.NET becuase ASP.NET and Visual Studio made the syntax pretty much the same as working with any .NET object.

What resonated most with the (literally) thousands of developers I presented .NET to was not the new / diferent ways they could do things with Microsoft’s shiny new technology, it was how the simplicity of .NET would let them change the KIND of development they could do. How they could build features and applications that were impractical or impossible with earlier tool sets.

In 2008 we (Microsoft) released the ASP.NET AJAX extensions and the initial uptake from developers was “different” than we expected. The reason, I felt, was that while we were showing developers “how” to use the new “APIs”, we weren’t really doing anything to help change their thought process in regards to ASP.NET based problem solving.

After all, ASP.NET developers weren’t used to thinking in terms of how world wide web apps really work, their model at the time was really designed to emulate the “client server” paradigm. The idea that an application could have functionality apart from “full server round trips” was foreign.

So I built a series of 30 or 40 concise videos with sample code that demonstrated “AJAX Patterns”. Patterns like “Predictive Fetch” , “Partial Page Updates”, “Display Paging”, “Incremental Display”, “After Processing” and “Persistent Communications” (http://www.asp.net/web-forms/videos/aspnet-ajax). What mad people excited was not new ways to do old things, it was NEW THINGS that could do in general.

The right content, demonstrations and sample code made people say “I need to move to .NET because I can easily build great apps (or great features into my apps) with that tool set.

While some amount of technical expertise was prerequisite, it wasn’t a deep expertise that made the evangelists on my team successful. To the contrary, I think only a couple of the folks on my team of a dozen or so ever developed really deep expertise. What made them great technical evangelists was their mix of technical aptitude and exceptional communication skills.

As a team we learned to answer the questions prospective customers had, even if they were as yet unasked. We learned to match customers needs with the capabilities that our products could provide and we learned to “shorten” the learning curve by creating content and giving presentations made complex problems and solutions simpler – rather than getting lost in the weeds of technical minuta.

So (IMO) Technical Developer Evangelists are …..

– Engaging speakers and recruiters
– Pre Sales Engineers
– Post Sales Support Engineers
– Solutions Consultants
– Cheerleaders
– Coaches
– Social Directors
– Authors
– Organizers
– Managers (or events or projects)
– Applications Developers

Have you even met great developer evangelist ?

What made him or her great in your eyes ?

PATTERN : Dynamic HTML elements and context specific access via jQuery.

I think all web developers have a love / hate relationship with HTML.

HTML is by it’s very definition a MARKUP language. Markup meaning it’s category of utility is to represent data. HTML is fine for representing data for display but less perfect when it comes to use case’s that require the manipulation of that data once it’s been rendered. As a “markup” language, the semantic values are not innately coupled to the markup items that contain them.

The software development industry continuously invents new ways to improve the ways that we solve this relationship problem.

I’ve been working on a Single Page HTML App which will be data drivel via a JSON file retrieved from the server.

That JSON file will contain some number of data records and the app will need to create one container div for each of those records. Since the number of those records is variable, the App won’t know until run time (when the page is loaded) how many of those sections will be needed.

Each of the container divs will contain HTML elements that will need to be manipulated at run time. (In fact, in the app I’m forking on each container will have a variable number elements, also dynamically created at run-time but for the purposes of this sample we’ll keep thinks to a single level of dynamics).

Dynamically naming elements can quickly become complex with dynamic HTML pages and, as is always there are many ways to solve the same problem. (Yes, I know, your way is better 🙂 )

Here is a documented example of ONE way to accomplish this content / data dynamics using jQuery (though you could use the same pattern in plain old JavaScript).

It takes very little code, but several people have questioned me as to how to do this so I thought I’m post a sample.


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script 
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

<script>
var numberOfDivsToCreate=10;
//---------------------------------------------------------------------------+
// Note the id of the div to be appended is dynamic comprised of the static
// text "DIV-NUMBER" and the current value of the i variable of the for loop.
//---------------------------------------------------------------------------+
$(document).ready(function () {
    //-----------------------------------------------------------------------+
    // for loop create the total number of divs specified in the
    // numberOfDivsToCreate variable above. In a real app this would probably
    // be determined at run time
    //-----------------------------------------------------------------------+
    for (var i = 1; i <= numberOfDivsToCreate; i++) {
        $('#mainpage').append("<div id='DIV-NUMBER-" + i + "'>" +
                          "<span id='myInput''>" + i + "</span>" +
                          "&nbsp;--&nbsp;<span id='myVal'></span></div>");
    }

    //-----------------------------------------------------------------------+
    // Use the jQuery.on method to specify an event delegate to handle click
    // events for all the divs inside the div who's id="mainpage"
    // Note: In this sample we arw catching the click event for ALL divs
    // In a real world app your mainpage div may contain divs that you do not
    // want to fire a click event on, In that case use a class on the
    // clickable ones and change the jQuery selector below accordingly,
    //-----------------------------------------------------------------------+
    $( "#mainpage" ).on( "click", "div", function() {

        //-------------------------------------------------------------------+
        // The for loop above creates 10 divs and this click event delegate
        // is a SINGLE method (lives in memory once) to handle the click
        // events for all 10 divs
        // $this is a jQuery reference to the element that threw the click
        // event in our case one of the 10 divs
        //-------------------------------------------------------------------+
        // we'll use .find() to look inside the div that threw the click
        // event and find the elements we wish to manipulate, note that
        // those elements are not dynamically named (myInput & myVal) so
        // there are 10 of each on our page and we are using context to
        // determine which to manipulate
        //-------------------------------------------------------------------+
        // jQuery .find() can be a performance problem if misused, make
        // sure to minimise the find scope as much as possible
        //-------------------------------------------------------------------+
        var MyInput =$(this).find("#myInput");
        var MyDisplay = $(this).find("#myVal");

        //-------------------------------------------------------------------+
        // Note that MyInput & MyDisplay local variables that we cast to
        // jQuery objects on order to access the text properties via jQuery
        // syntax.
        //-------------------------------------------------------------------+
        $(MyDisplay).text($(this).attr("id") +
                "   -   Value = " + $(MyInput).text())
    });
});
</script>

</head>
<body>
<div id="mainpage">
</div>
</body>
</html>

Life is a series of near misses !

“I believe life is a series of near misses. A lot of what we ascribe to luck is not luck at all. It’s seizing the day and accepting responsibility for your future. It’s seeing what other people don’t see and pursuing that vision.” – Howard Schultz, founder of Starbucks