//////////////////////////////////////////////////////////////////////////////
// setCookie
//
//		Create a client side cookie.
//
//  @param   c_name - Name to call the cookie
//  @param   value - Value to assign to the cookie
//  @param   expiredays - *optional* number of days before cookie expires
//////////////////////////////////////////////////////////////////////////////
function setCookie(c_name,value,expiredays) {
	var exdate=new Date();
	exdate.setDate(exdate.getDate()+expiredays);
	document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

//////////////////////////////////////////////////////////////////////////////
// getCookie
//
//		Get value of a client side cookie
//
//  @param   c_name - Cookie name.
//  @return  cookie value, or an empty string if cookie is not found
//////////////////////////////////////////////////////////////////////////////
function getCookie(c_name) {

	if (document.cookie.length>0) {
		c_start=document.cookie.indexOf(c_name + "=");
		if (c_start!=-1) {
			c_start=c_start + c_name.length+1;
			c_end=document.cookie.indexOf(";",c_start);
			if (c_end==-1) c_end=document.cookie.length;
			return unescape(document.cookie.substring(c_start,c_end));
		}
	}

	return "";
}

Here is an example of how you would use them

// Set currentView cookie to "View" and set the value to expire in 30 days
setCookie("currentView","View",30);
.
.
.
// Get current view mode from cookie
var myCurrentView = getCookie("currentView");

I love that quote. It seems to sum up the entirety of what a good user interface is. It’s not fancy graphics or cutting edge layouts. It’s providing people with what they need, when they need it. The best user interfaces are those that are so seamless that the casual user does not even notice them.

A good example of this is Google’s Finance page. This is an information rich page. Behaving as a casual user would expect a finance page to behave. One simple page providing all you need to know at a glance.

In fact, just looking at it, it is hard to point to any user interface at all. It appears to be nothing more than static information. Until you notice that the stock price is not a static number, but changing every few seconds (changing the web page title to match). Until you notice that the main stock graph is has flags on it that can be clicked to take you to news articles, or blogs about the company. Until you notice that mousing over the “Officers and directors” names at the bottom right of the page gives you expanded biographies and links to that officers reported salary and yearly compensations. Until…

You get the point. A good user interface does not jump up and down and try to get your attention, possibly distracting users from the information you really want them to focus on. Instead, it behaves how a user expects it to, providing more in depth behavior in seamless, unobtrusive ways. Ways that do not clutter up or interfere with the basic task.

What They Expect

But – how do you know what a user expects ? Well, you can try to think like a user. Pretend that you are a customer and try to figure out what you would want, and how you would react to different situations. This approach works, but is not optimal. It’s too easy to forget what it is like to know absolutely nothing about the project. For that, you will need some more people.

Grab people who are just walking down the hallway. Show them a prototype or demo and give them a simple task to do. Ask them what they think is happening. Take notes. Interview them using open questions. Never tell them “how” to do things. After you have done this with 5 or 6 people take the most common flaws (majority rules) and fix them.

A Well Desgined User Interface is one where a lot of hard work has gone into not making it hard for your users and customers.

But – sometimes you can’t use a server side language (restrictions of your ISP, you need to create a CD based demo or prototype, etc..), and this is where JavaScript can step in and save the day.

The right form method

If your form has uses the “post” method (<form method=”post”>) then you are out of luck. The form field values are essentially hidden from the client side – but if your form uses the “get” method (<form method=”get”>) then you are in luck, because when the form posts to the target page all the field names and values are stuck on as part of the URL.

Using this knowledge and the fact that “window.location.href” will return the value of the URL address bar, allows you to use JavaScript retrieve the form field the values that you need.

The Functions

OK, the address bar can look like a mess after a form submit. But if you look at it closely you’ll see that the names of your form fields and the values that they have been assigned are part of that mess.

I’ve written some functions which you can use to painlessly pick out the values of the fields your are interested in and then display them on the screen (or assign their values to other HTML objects, such as hidden input fields or DIV’s)

Take the functions below and include them between the HEAD tags of the target page.

Get values

If you need to just retrieve the value so you can use it in your own JavaScript functions then just use the getParameter function.

Example:

<script>
	if (getParameter("loginName") == "") {
		alert("You must supply a login name");
	}
</script>

Code:

//////////////////////////////////////////////////////////////////////////////
// getParameter
//
//		If page was called as an action from a form post (method="get") then
//		get the value of the parameter "paramName" from the name/value pairs
//		in the current URL
//
//  @param   paramName	- name of parameter to retreive value of
//  @return  results[1]	- value of parameter extracted from location.href
//////////////////////////////////////////////////////////////////////////////
function getParameter(paramName) {

	// Build regex expression to find paramName in window.location.href
	// and then parse out everything after the "=" sign and before the "&"
	// sign
	paramName = paramName.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+paramName+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );

	if( results == null )
		return "";
	else {
		returnValue = unescape(results[1]);				// Unescape it
		returnValue = returnValue.replace(/\+/g, ' ');	// Replace plus sign with space
		return returnValue;
	}
}

Assign values

If you wish to take the field value and assign it to some other element on your page (like a hidden field) then you can use the copyParameter function to copy the value of the field to any other element on your page who has an ID that is the same as the fields name.

Example:

	<input type="hidden" id="loginName" name="loginName">
	<script>copyParameterValue("loginName");</script>

Code:

//////////////////////////////////////////////////////////////////////////////
// copyParameter
//
//		Take the results of the getParameter function and assing it to the
//		value of an element on the page whoose ID matches the parameters name
//
//  @param   paramName	- name of parameter to retreive value of *AND* ID
//						  of element on page
//  @return  void
//////////////////////////////////////////////////////////////////////////////
function copyParameterValue(paramName) {
	var paramValue = getParameter(paramName);
	if (document.getElementById(paramName) != null) {
		document.getElementById(paramName).value = paramValue;
	}
}

Show values

If you just wish to display the value of a field on the page then just use the showParameter function where ever you want the value displayed

Example:

<td>Login Name: <script>showParameter("loginName")</script></td>

Code:

//////////////////////////////////////////////////////////////////////////////
// showParameter
//
//		Display the results of the getParameter function at the current
//		location in the document body.
//
//  @param   paramName	- name of parameter to retreive value of
//  @return  paramValue	- value of paramter written to the document.
//////////////////////////////////////////////////////////////////////////////
function showParameter(paramName) {
	// If object exists on page with the same ID as the param name then
	// copy set its value to the parameter value
	copyParameterValue(paramName);

	var paramValue = getParameter(paramName);	// Get parameter value
	document.write(paramValue);					// Write to document
}

Example

The problem with most of the Tab Navigation solutions available is how messy it tends to make your HTML code. This has lead many people to not even attempt to use them. Scared off by the amount of JavaScript and CSS code required to make them work.

It was this which lead me to come up with a solution that would be easy to implement and require little to no JavaScript knowledge to use.

I’ve created a CSS file and a JavaScript file for you to use. All you need do is to include these files in your page by placing the following two lines in between your HEAD tags

<script src="tab.js"></script>
<link href="tab.css" rel="stylesheet" type="text/css">

Now, where ever you wish the tab navigation page to display in your page use the HTML UL/LI element like below.

<ul class="TabContainer">
	<li>Tab 0</li>
	<li>Tab 1</li>
	<li>Tab 2</li>
	<li>Tab 3</li>
</ul>

As long as the UL tag has the class of “TabContainer” assigned to it, each LI element will become a tab.

For the content you wish to display when the tab is clicked, create a div to hold the content and assign it the class name of “TabContent”

<div class="TabContent">
	<p>I am the content for Tab 0</p>
</div>

<div class="TabContent">
	<p>I am the content for Tab 1</p>
</div>
.
.
.
<div class="TabContent">
	<p>I am the content for Tab 3</p>
</div>

That’s it. You are done (as long you have at least the same number of “TabContent“ divs as you have tabs) . Clicking on Tab 0 will display what is inside the first div, clicking on Tab 1 will display what is inside the second div, etc..

Click to see Example 1

If you wish to use a different color for your tabs simply edit the class “TabColor” in the tab.css file to change it to the color you want.

Tab Sub Menu

If you have the need for a top level navigation menu to appear within each tab then inside each of the content divs place your list of hyper links inside a div with a class of “TabTopNavContent”

<div class="TabContent">
	<div class="TabTopNavContent">
		<a href="#">Link 1</a>
		<a href="#">Link 2</a>
		<a href="#">Link 3</a>
		<a href="#">Link 4</a>
		<a href="#">Link 5</a>
	</div>

	<p>I am the content for Tab 0</p>
</div>

Click to see Example 2

Source Code

tab.js

function showTab (tabNum) {

	// Build Tab and Content ID's based on the tab number
	var tabID = 'Tab' + tabNum;
	var contentID = 'Content' + tabNum;

	// Get the LI object based on the tabID
	objLI = document.getElementById(tabID);

	// If the object exists
	if (objLI) {
		// Get the LI Objects parent (which should be the UL element the LI tag is in)
		objUL = objLI.parentNode;

		// Get all LI's in the UL and set their class and color
		var LIs = objUL.getElementsByTagName("li");
		for (var i = 0; i < LIs.length; i++) {
			var classString = 'Tab TabColor';
			LIs[i].className = classString;
		}

		// Show wanted tab is seleted
		objLI.className += ' Selected';

		// *****
		// ***** Step 2 - Show Tab Content
		// *****

		// Scan for all DIV objects on page that contain the classname TabContent and hide them
		var divObj = document.getElementsByTagName('div');
		for (var i = 0; i < divObj.length; i++) {
			if (divObj[i].className.indexOf("TabContent") >= 0) divObj[i].style.display='none';
		}

		// Show wanted content DIV
		contentObj = document.getElementById(contentID);
		if ( typeof contentObj != "undefined" && contentObj != null ) contentObj.style.display='';
	}

}

function BuildTabs() {

	// Scan for all UL objects on page that contain the classname TabContainer
	var ulObj = document.getElementsByTagName('ul');

	for (var i = 0; i < ulObj.length; i++) {
		if (ulObj[i].className.indexOf("TabContainer") >= 0) {

			// Get all LI's in the UL and set their class name to "Tab"
			var LIs = ulObj[i].getElementsByTagName("li");
			for (var j = 0; j < LIs.length; j++) {

				// Assign Tab Class and Color
				var classString = 'Tab TabColor';
				if (j==0) classString +=  ' Selected';
				LIs[j].id = "Tab" + j;
				LIs[j].className = classString;
				LIs[j].innerHTML = "<a href=\"#" + j + "\" onClick=\"showTab('" + j + "');\">" +
									LIs[j].innerHTML +
									"</a>";
			}
		}
	}

	// Scan for all DIV objects on page that contain the classname TabContent
	var divObj = document.getElementsByTagName('div');
	var cnt = 0;
	for (var i = 0; i < divObj.length; i++) {

		if (divObj[i].className.indexOf("TabContent") >= 0) {

			// Hide it
			divObj[i].style.display='none';
			divObj[i].id = "Content" + cnt;

			// Create colored line and insert it as first item in content div
			lineDiv = document.createElement("div");
			lineDiv.className = "TabTopLine TabColor";
			divObj[i].insertBefore(lineDiv, divObj[i].firstChild); 

			// See if TabContent Div contains a top level navigation div
			var topNavFound = false;
			var tabNavObj = divObj[i].getElementsByTagName('div');
			for (var j = 0; j < tabNavObj.length; j++) {
				// If top leven navigation div found then change background color to match tab
				if (tabNavObj[j].className.indexOf("TabTopNavContent") >= 0) {
					tabNavObj[j].className += " TabColor";
					topNavFound = true;
				}
			}

			// Display first one
			cnt+= 1;
			if (cnt == 1) divObj[i].style.display='';

		}
	}

	// If URL has a hash value then assume it contains the ID of the tab you wish to display
	// so call the showTab function
	locationHash = window.location.hash;
	if (locationHash.length > 0) showTab(locationHash.substring(1));
}

window.onload = BuildTabs;

tab.css

.PageContainer {
	width:640px;
}

.TabContainer {
	border-bottom:1px solid #9f9f9f;
	clear:both;
	display:block;
	height:24px;
	list-style-type: none;
	margin:0;
	padding:0 0 0 10px;
}

.Tab {
	border-left:1px solid #9f9f9f;
	border-top:1px solid #9f9f9f;
	border-right:1px solid #9f9f9f;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	height: 15px;
	margin-right:2px;
	opacity: .6;
	filter: alpha(opacity=60);
	padding:4px 10px;
}

.Tab:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

.Tab a {
	color:#5F5F5F;
	text-decoration:none;
}

.TabContent {
	background:#FFFFFF;
	border-left:1px solid #9f9f9f;
	border-right:1px solid #9f9f9f;
	border-bottom:1px solid #9f9f9f;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}

.TabContent p {
	margin:0px;
	padding:8px;
}

.TabTopLine {
	display:block;
	height:3px;
	line-height:3px;
}

.TabTopNavContent {
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	height:20px;
}

.TabTopNavContent a {
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	margin-left:8px;
}

.Selected {
	border-left:1px solid #9f9f9f;
	border-top:1px solid #9f9f9f;
	border-right:1px solid #9f9f9f;
	filter: alpha(opacity=100);
	opacity: 1;
	padding:5px 10px 4px 10px;
}

.Selected a {
	border:0;
	color:#000000;
	font-weight:bold;
	text-decoration:none;
}

/* This is the background colors for the tabs */
.TabColor {background:#FEDA00;}

Well, you get that big red “X” missing image icon in place of the nice image that used to be there. It can make a nicely laid out page look really bad.

What I’ve done is to create a couple of JavaScript functions that you can just place in the top of the page and forget about. Everytime the page loads it will look for those missing/broken images and replace the horrible red “X” with any image you want to take its place.

Or – you can just hide it and make the red “X” disappear.

Example: BrokenImageCheck.html
Source Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Broken Link Replacement</title>
<script>
	function ImageOk(img) {
		// Body has finished loading so if img is not complete then
		// you  have a broken image so return false - image is not ok
		if (!img.complete) return false;

		// if naturalWidth is undefined or zero then the image failed to load
		// so return false - image is not ok
		if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;

		// Passed all checks - image succeeded in loading - image is ok
		return true;
	}

	function BrokenImageCheck() {
		// Name of image to replace broken image icon with
		var replacementImg = "/images/NoPhotoOnFile.gif";

		// Loop through all images in the document
		for (var i = 0; i < document.images.length; i++) {
			// If image did not finish loading
			if (!ImageOk(document.images[i])) {
				document.images[i].src = replacementImg;
				// document.images[i].style.display = "none";
			}
		}
	}

	// After body loads check all images to see if the sucessfully loaded
	window.onload=BrokenImageCheck;
</script>

</head>
<body>
	Broken Link <img src="IdoNotExist.gif"><br>
	<br>
	The above link should appear with a replacement image in place of the broken image icon<br>
</body>

</html>

In the above example the file “IdoNotExist.gif” does not exist and would normally case the broken image icon (red “X”) to appear in it’s place.

What happens is that in line 35 the assignment

window.onload=BrokenImageCheck;

Causes the JavaScript function “BrokenImageCheck” to run after the web page finishes loading. BrokenImageCheck will then scan through all of the images on the web page, calling the function “ImageOk” to see if any had troubles loading. If it determines that the image did not completely load then the assignment on line 28

				document.images[i].src = replacementImg;
				// document.images[i].style.display = "none";

will replace it with any image you wish to use in its place.

If you only want to just suppress the broken image icon from appearing then comment out the .src= assignment and uncomment the display=”none” assignment in the BrokenImageCheck function

What’s wrong with simply checking screen width ? In my opinion there is a 99% probability that anything with a width of 640 or under is a mobile device.

Sure this will not tell anything about the capabilites of the browser (CSS/JavaScript/ect support) – but knowing it’s a cell phone would certainly give you a chance to know you have a low bandwidth device with a small screen – so don’t make them download your 1024×100 jpg page banner or the 1024×764 full page photos of your pet dog.

According to Leichtman Research broadband penetration in the US should break 90% by mid-2008. This is based on a survey conducted in February of 2008 showing that broadband was in 57% of U.S. households: http://www.websiteoptimization.com/bw/0802/

Personally – I’ll take the trending numbers with a grain of salt until they are confirmed, but this defintly shows that a majority of US households now have broadband, and I would hazard a guess that those households contain the newest and most active populace of the web surfing world.

So if you are designing for mid to younger audiences – go hog wild with the graphics, videos and flash. If you are designing a geneology or quilting bee web site – stick with small graphics and text for those dial up users.

But – in all cases – follow good design principles. Remember more is not always better: http://www.fastcompany.com/magazine/100/beauty-of-simplicity.html

Table Titles Float to stay in view
Tested to work in Firefox 3, Internet Explorer 7, Chrome, and Safari 3.1

You will never loose sight of a tables column titles as long as the table is visible on the screen !

Click to see Example

Invisibly in the background this script will take your tables exsting titles and “fix” them so as you scroll down the page they will always remain in view.

To use the script just include the TableFloaterTitle.js file in the head of your document.

<script src=”TableFloaterTitle.js”></script>

To make the tables whoose titles you want to float just give the table a class of “FloatTitle”

<table class="FloatTitle">
  <thead>
    <tr bgcolor="#FFCC33;"><td>Title #1</td>...</tr>
  </thead>
  <tbody>
    <tr><td>Stuff</td>.../tr>
    <tr><td>Stuff</td>...</tr>
    <tr><td>Stuff</td>...</tr>
  </tbody>
</table>

Currently tested to work in Firefox 3, IE 7, and Safari 3.1.2

Note: For now the table titles must be inside a THEAD tag

Another approach to making a tables headings and titles remain in view can be found here:

http://stansight.com/WordPress/2008/07/03/fixed-table-head/

The Code – TableFloaterTitle.js

// *****************************************************************************
// ** TableFloaterTitle.js
// **
// ** Unobtrusive JavaScript function which will keep the titles of a table on
// ** screen as the user scrolls down.  The titles will 'float' keeping in view
// ** as long as any part of the table remains in view.
// **
// ** Author: Stan Slaughter
// ** Web: http://www.StanSight.Com/
// *****************************************************************************

  //////////////////////////////////////////////////////////////////////////////
  // startFloatTitle - Start tables floating
  //
  //  This function will scan the page looking for every "table" on it.
  //  Any table which has a class of "FloatTitle" will have its ID value
  //  passed on to the function for the actual float process
  //////////////////////////////////////////////////////////////////////////////

  function startFloatTitle() {

    var cnt=0;
    var allTableIDs = new Array();
    allTables = document.getElementsByTagName("table");

    // Scan page for all tables with a class of "FloatTitle"
    for (i=0;i<allTables.length; i++) {
      if (allTables[i].className == "FloatTitle") {

        // Get the ID. If no ID exists then assign one
        tableID = allTables[i].id;
        if ( tableID == "") {
          tableID = "tmpFloatTitleTableId" + cnt;
          allTables[i].id = tableID;
        } 

        // Save ID's
        allTableIDs[cnt] = tableID;
        cnt++;
      }
    }

    // Start floating the tables title
    for (i=0;i<allTableIDs.length; i++) {
      floatTitle(allTableIDs[i],i);
    }
  }

  //////////////////////////////////////////////////////////////////////////////
  // floatTitle - Start the float process
  //  @param tableID - ID of table that floating title will be created for
  //  @param cnt - Number representing table - for tracking seperate float events
  //
  //  This function calls the functions which create the floating title and
  //  start the floating process
  //////////////////////////////////////////////////////////////////////////////

  var floatTitleTimer = new Array();
  function floatTitle(tableID,cnt) {

    // Stop any old Loops
    if (typeof(floatTitleTimer[cnt])== 'undefined') floatTitleTimer[cnt] = 0;
    clearTimeout(floatTitleTimer[cnt]);

    // Create title object then start float loop
    titleID = createTitleObj(tableID);
    floatTitleLoop(tableID,titleID,cnt);

  }

  //////////////////////////////////////////////////////////////////////////////
  // createTitleObj - Create the floating object for this table
  //  @param tableID - ID of table that floating title will be created for
  //  @return titleWrapperID - ID of div which contains a copy of tables THEAD
  //
  //  Clone the THEAD from the table, create a new table to place it in then
  //  create a DIV wrapper to place it in. The ID for the DIV is returned to
  //  the calling function so it can be used to position the object in the
  //  floating function.
  //////////////////////////////////////////////////////////////////////////////

  function createTitleObj (tableID) {

    var titleWrapperID = tableID + "Title";
    var titleTableID = tableID + "TitleTable";

    // If Title has not been created yet
    if (document.getElementById(titleWrapperID)==null) {

      // "clone" the Table's thead
      tableObj = document.getElementById(tableID);
      clonedtHead=tableObj.tHead.cloneNode(true);

      // Create wrapper div
      titleWrapperObj = document.createElement("div");
      titleWrapperObj.setAttribute("id", titleWrapperID);

      // Create the Title table
      TitleTable = document.createElement("table");
      TitleTable.setAttribute("id", titleTableID);

      // Append Cloned thead to the Title table
      TitleTable.appendChild( clonedtHead );

      // Append table to div container
      titleWrapperObj.appendChild(TitleTable);

      // Insert wrapper div into the DOM before Table
      parentDiv = tableObj.parentNode;
      parentDiv.insertBefore(titleWrapperObj, tableObj);

      // Initially position container
      titleWrapperObj.style.position="absolute";
      titleWrapperObj.style.top = "0px";
      titleWrapperObj.style.zIndex="1";
    }

    tableObj = document.getElementById(tableID);
    titleTableObj = document.getElementById(titleTableID);

    // Set Title width to be the same as Table
    titleWrapperObj = document.getElementById(titleWrapperID);
    titleWrapperObj.style.width = tableObj.offsetWidth + 'px';

    // Set widths of Title TD's to same as Table TD's
    tableCells = tableObj.tHead.rows[0].cells;
    titleTableCells = titleTableObj.tHead.rows[0].cells;

    for (var i=0; i != tableCells.length; i++) {
      titleTableCells[i].style.width = (tableCells[i].clientWidth)+ 'px';
      titleTableCells[i].style.cursor = 'normal';
    }

    return titleWrapperID;
  }

  //////////////////////////////////////////////////////////////////////////////
  // floatTitleLoop - Float the titles up and down the table as the page scrolls
  //  @param tableID - ID of table that wants floating title
  //  @param titleID - ID of div that will float (contains copy of tableID's THEAD)
  //  @param cnt - Number representing table - for tracking seperate float events
  //
  //  Keep the title object in view as the table postion changes as a user
  //  scrolls up and down in the window
  //////////////////////////////////////////////////////////////////////////////

  function floatTitleLoop(tableID,titleID,cnt) {

    // If Table and Title objects exist
    if (document.getElementById(tableID) !=null && document.getElementById(titleID) !=null) {

      // Set value to be number of pixels from screen top that you wish
      // scrolling to start at. 0=top, 10=10 pixels down from top, etc..
      // Useful for those who happen to have top screen banners
      var	startOffsetTop = 0;

      // Get start and stop float positions from table
      var tableObj = document.getElementById(tableID);
      var tablePos = FindPosition(tableObj);
      var startTop = tablePos[1] - startOffsetTop;
      var endTop = startTop + tableObj.clientHeight;		

      // Get new positon of body scroll top and keep it in bounds
      var newTop =(document.documentElement.scrollTop>0) ? document.documentElement.scrollTop : document.body.scrollTop;
      if (newTop < startTop) newTop = startTop;
      if (newTop > endTop) newTop = endTop;

      // Move the title to new postion
      var titleObj = document.getElementById(titleID);
      if (newTop > startTop && newTop < endTop) {

        // Display "Title" if it is not all ready being displayed
        if (titleObj.style.display != 'block') titleObj.style.display='block';

        // Apply offset to get newTop position
        newTop = newTop + startOffsetTop;

        // Apply Ease-In effect
        easeInWanted=true;
        if (easeInWanted) {

          // Get current location and get the difference from where it's
          // at to where you want it to go
          oldTop = parseInt(titleObj.style.top);
          topDiff=newTop-oldTop; 

          // Calaculate how far you want to move it - then set that to new postion
          moveTop=0;
          if ( (topDiff < (-1) ) || (topDiff > (1) ) ) { moveTop=Math.round(topDiff/3);}
          newTop = oldTop + moveTop;
        }

      	// Move to new top position
      	if (newTop < 0) newTop = 0;
      	titleObj.style.top = newTop + "px";
      } else {
        // Else hide "Title" if it is not all ready hidden
        if (titleObj.style.display != 'none') {
          titleObj.style.display='none';
          titleObj.style.top = "0px";
          titleObj.style.zIndex="1";
        }
      }

    }

    // Execute this function again in 40 milliseconds (thousandths of a second)
    cmd = "floatTitleLoop('" + tableID + "','" + titleID + "','" + cnt + "')";
    floatTitleTimer[cnt] = window.setTimeout(cmd, 40); 

  }

  //////////////////////////////////////////////////////////////////////////////
  // FindPosition - find the Top and Left postion of an object on the page
  //  @param obj - object of element whose position needs to be found
  //  @return array - Array whoose first eleemnt is the left postion and whoose
  //                  second is the top position
  //////////////////////////////////////////////////////////////////////////////

  function FindPosition(obj) {
    // Figure out where the obj object is in the page by adding
    // up all the offsets for all the containing parent objects
    if (obj == null) return [0,0];

    // Assign the obj object to a temp variable
    tmpObj = obj;

    // Get the offsets for the current object
    var obj_left = tmpObj.offsetLeft;
    var obj_top = tmpObj.offsetTop;

    // If the current object has a parent (ie contained in a table, div, etc..)
    if (tmpObj.offsetParent) {

      // Loop through all the parents and add up their offsets
      // The while loop will end when no more parents exist and a null is returned
      while (tmpObj = tmpObj.offsetParent) {
      	obj_left += tmpObj.offsetLeft;
      	obj_top += tmpObj.offsetTop;
      }
    }
    return [obj_left , obj_top];
  }

  //////////////////////////////////////////////////////////////////////////////
  // Start floating titles after window finishes loading
  ////////////////////////////////////////////////////////////////////////////// 

  window.onload = startFloatTitle;

  //////////////////////////////////////////////////////////////////////////////
  // Start floating titles when window is resized
  ////////////////////////////////////////////////////////////////////////////// 

  window.onresize = startFloatTitle;

Scrollable Table Body with a Fixed Table Heading
Tested to work in Firefox 3 and Internet Explorer 7. Safari users may want to check out Floating Table Titles

There is no HTML or CSS standard tag or property that lets you freeze the title row of a table in place while allowing the body to scroll up and down.

Like this:

In response to this I created the “FixedTableHead” CSS class.

I wanted a CSS solution that was easy to use. Other solutions I ran across on the web tended to be inflexible and hard to implement in real world situations. They had you hard coding table widths and heights in multiple locations in the CSS. This can be a real pain if you want to use it for multiple tables that vary in size.

“FixedTableHead” handles multiple tables of different sizes on the same page. I attempted to keep the HTML mark-up as simple as possible. All you need do is to assign a single CSS class name to a DIV that surrounds your table then assign a height you want the table to be as an embedded style. That’s it.

Example:

<div class="FixedTableHead">
	<table style="height:100px;">
		<thead>
			...
		</thead>
		<tbody>
			...
		</tbody>
	</table>
</div>

This has been tested to work in IE7, Firefox 2 and Firefox 3. As long as the table uses a THEAD and a TBODY then the header rows will remain fixed in place while the content in the table body scrolls up or down.

Height: 75px; Width: Nothing – What ever the content sizes it to

Height: 100px; Width: 400px;

Height: 200px; Width:600px;

Height: 60px; Width:200px;

CSS Code:

/* DIV container around table to constrict the height for IE (IE ignores the tbody height style) */
div.FixedTableHead {
	overflow-y:auto;
	margin: 0px;
	padding: 0px;
	border: expression( '1px solid black');

	/* this fixes IE so container width is same as table width */
	width: expression( (this.childNodes[0].clientWidth + 17) + 'px' );

	/* This fixes IE so the container height is table height plus the height of the header */
	height: expression( (parseInt(this.childNodes[0].style.height) +
						 this.childNodes[0].childNodes[1].offsetTop + 1) +'px' );
}

/* Get rid of table cellspacing */
div.FixedTableHead table {
	border-spacing: 0px;
	border-collapse: collapse;
}

/* Get rid of table cellspacing */
div.FixedTableHead table td {
	margin: 0px;
}

/* Scrollable Content */
.FixedTableHead table tbody {
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	border: 1px solid black;
}

.FixedTableHead table tbody tr {
	height: auto;
	white-space: nowrap;
}

/* Prevent Mozilla scrollbar from hiding right-most cell content */
.FixedTableHead table tbody tr td:last-child {
	padding-right: 20px;

}

/* Fixed Header for IE (firefox uses the tbody overflow assignment, which is ignored by IE)   */
/* Note: In IE an element with a position property set to relative and is a child of         */
/* an element that has an overflow property set, the relative value translates into fixed.    */
.FixedTableHead table thead tr {
	position: relative;
	height: auto;
	/* this fixes IE header jumping bug when mousing over rows in the tbody */
	top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
}

/* Formatting Header Row */
.FixedTableHead table thead tr td {
	color: white;
	background-color: #303433;
}

Well, here are two different solutions for you. The first one uses straight forward “while loop” approach. Each character in the front of the string is checked. if it is a space then the string is changed to exclude it from the front. It does this until a non-space character is reached. The same is then done for the end of the string. Though in this case the string is searched from right to left.

First Solution

function trimSpace(sString) {
 while (sString.substring(0,1) == ' ') {
  sString = sString.substring(1, sString.length);
 }
 while (sString.substring(sString.length-1, sString.length) == ' ') {
  sString = sString.substring(0,sString.length-1);
 }
 return sString;
}

Example of how it would be used

X = '  Bob   ';
X = trimSpace(X);
//
// X is now equal to 'Bob'
//

The Second Solution

This next solution is both simpler and yet trickier for those who are not used to Regular Expressions in JavaScript.

Regular expressions are a form of pattern matching that you can apply on textual content. Take for example the DOS wildcards ? and * which you can use when you’re searching for a file. That is a kind of very limited subset of RegExp. For instance, if you want to find all files beginning with “fn”, followed by 1 to 4 random characters, and ending with “ht.txt”, you can’t do that with the usual DOS wildcards. RegExp, on the other hand, could handle that and much more complicated patterns….more

The scope of this article is not to discuss Regular Expression syntax in detail, for that please follow the link posted above. I simply want to show how powerful they can be by demonstrating their use in removing leading and trailing spaces from a string.

function trimSpace(s) {

  var SpcEnds = new RegExp("^\\s*|\\s*$", "g"); // Create Regular expression
  s = s.replace(SpcEnds, "");                   // Remove leading or trailing spaces.

  return s;
}

It would be called and used in the same way as the first solution.

Conclusion

Which solution should you use?

Note: Regardless of the number of lines used, neither solution executes measurably faster than the other.

Solution 1, the traditional while loop approach, is easy to read and this will allow for most developers to understand it more readily. This in turn makes it easier to debug if issues arise.

But – More code does offer more complexity. It’s easy to understand, yet introduces more lines of code which can lead to some inflexibility.

Solution 2, the Regular Expression approach, has the advantage of offering even more advanced pattern matching functionality if later on you needed to expand this to remove embedded spaces as well, or replace the space with a different character.

But – this flexibility comes at the cost of clarity which in term can impact the maintainability of the code. It’s powerful, yet relatively obscure.

Which should you use? Well, that decision will be up to you.