//////////////////////////////////////////////////////////////////////////////
// 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");

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

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.

JavaScript Frameworks are cross-browser user interface JavaScript libraries designed to make it easier to develop complex Graphical User Interfaces (GUI’s) for web pages.

I’ve tended to stay away from JavaScript Frameworks. My view was that in an attempt to be generic libraries they have introduced complexity, making it harder to implement and debug. Frankly, I did not want to spend a lot of time learning proprietary syntax to a library which may not be around all that long. There seemed to be a new flavor-of-the month library coming out ever other month. Here is just a small list of the currently most popular:

The Yahoo! User Interface (YUI) – http://developer.yahoo.com/yui/
Prototype – http://www.prototypejs.org/
ExtJS – http://extjs.com/
script.aculo.us – http://script.aculo.us/
Dojo – http://dojotoolkit.org/
jQuery – http://jquery.com/
mootools – http://mootools.net/

And the list goes on …

BUT – Looking over some of the newer frameworks – such as Ext JS 2.0 : http://extjs.com/ it certainly looks like a lot of functionality and maturity is starting to creep into them.

So – Have JavaScript Frameworks now hit a level of maturity that a business can feel confident that if they use them that code will not be outdated and impossible to maintain in less than a year?

As a developer is it getting to the point where JavaScript Frameworks need to be taken more seriously?

CSS Text Drop Shadow

How to add cross browser drop shadow to text without the use of images using CSS and non-obtrusive JavaScript.

I’ve wanted to use drop shadows on text for quite awhile. Unfortunately there is just no easy way to do this on a web page without the use of a graphics program and I did not want to make a graphics image every single time I wanted to throw a drop shadow around a piece of text.

The Problem

I searched for a pure CSS approach without much luck. Internet Explorer has a CSS filter that makes dropshadows, but I wanted something that would work in both Firefox (my browser of choice) and Internet Explorer (Note: I’ve been told this solution works in Opera and Safari as well).

I have seen a few people fake a text drop shadow effect by typing the text twice. They used CSS to place one on top of each other, with slight offsets, making the bottom one black so it resembled a hard edged drop shadow.

It’s a neat idea, with a few problems.

1. The drop shadow has a hard edge and looks pretty 1980′ish
2. It’s a pain to set up. You have to type all your text twice, put each in separate DIV tags, position each separately or at least create two different CSS classes to position them for you.

Most people try this once and then drop it. It’s simply too cumbersome to use. I thought the concept had potential, but the problems had to be addressed.

A Solution

What I have come up with is a JavaScript function which runs automatically when your web page finishes loading. It looks through your web page and anywhere it sees an element with the class ‘dropshadow’ it will add a text drop shadow effect to it.

Examples

<h1 class="dropshadow">I am an H1 element with Drop Shadow</h1>

I am an H1 element with Drop Shadow

<div class="dropshadow" style="color:white; font-family:Impact; font-size:4em;">White Impact font in DIV</div>

A link to further examples: http://www.stansight.com/DropShadow2.html

Getting it to work

CSS Class

All you need to get this work is to define this minimal bit of CSS between the HEAD tags of your page:

  <style type="text/css">
  .dropshadow {
     position: relative;
     z-index:10;
  }
  </style>

JavaScript

Place the “DropShadow.js” code in a file called DropShadow.js which is then included in your web page by placing this bit of code between the HEAD tags of you page:

<script src="DropShadow.js"></script>

JavaScript DropShadow.js

Note: To make smaller drop shadows change the value of max_shadows in the CreateShadowChildren function to a smaller number.

   function MakeDropShadow() {

     var node = document;
     var tag = '*';
     var wantedClass = 'dropshadow';

     // Build a regular expression that will search specically for 'wantedClass'
     var pattern = new RegExp("(^|\\s)"+wantedClass+"(\\s|$)");

     // Scan through all tag elements in the document
     var scan_elem = node.getElementsByTagName(tag);
     for (i = 0; i < scan_elem.length; i++) {

       // If element has a class of 'wantedClass'
       if (pattern.test(scan_elem[i].className) ) {

         // Get the value from the element
         var text_value = scan_elem[i].innerHTML;

         // Create Shadow Children for this element
         CreateShadowChildren(scan_elem[i],text_value);
       }
     } // End for loop
   }

  function CreateShadowChildren(shadow_element,shadow_value) {

   var top_pos = .5;
   var left_pos = .5;

   // Assign starting color (in Hex notation) for the Red, Green, and Blue
   // Components (when they all have the same value you will alwys get a gray color).
   // For lighter shadows start with a "lighter" color of 66, 77, 88 99, aa, bb, etc..
   var starting_color = '44';
   var cRed = parseInt(starting_color,'16');
   var cGreen = parseInt(starting_color,'16');
   var cBlue = parseInt(starting_color,'16');

   // Set the max number of shadow elements to create.
   // This should never be set larger than the Z-Index value of dropshadow class
   var max_shadows = 10; 

   // Calculate color increament based on range of gray colors (from starting_color to
   // the lighest gray color of #fefefe) and max number of shadows you want
   var color_inc =  parseInt(( parseInt('fe','16') - parseInt(starting_color,'16') ) / max_shadows,'10');

   for (j = 1; j <= max_shadows; j++) {

     // Build full color Hex string from it's individual RGB values
     var full_color_value = cRed.toString(16) + cGreen.toString(16) + cBlue.toString(16);

     // Create a Shadow DIV
     var shadow_div = document.createElement('div');

     //  Add the shadow_value to Shadow DIV
     shadow_div.innerHTML = shadow_value;

     // Style Shadow DIV
     shadow_div.style.width=shadow_element.offsetWidth + "px";
     shadow_div.style.color = '#' + full_color_value;
     shadow_div.style.borderColor = '#' + full_color_value;
     shadow_div.style.display = "block";
     shadow_div.style.position = "absolute";
     shadow_div.style.top = top_pos + "px";
     shadow_div.style.left = left_pos + "px";
     shadow_div.style.zIndex = (-1) * j;

     // Apppend Shadow DIV to shadow element
     shadow_element.appendChild(shadow_div);

     // Increment positons and shadows individual RGB color values
     top_pos += .5;
     left_pos += .5;
     cRed += color_inc;
     cGreen += color_inc;
     cBlue += color_inc;
   }

  }

 // Run the MakeDropShadow function when the page finishes loading
 window.onload = MakeDropShadow;

Useful when validating input from a form prior to writing it to a database.

(Note the use of regular expressions used to validate the formatting)

/**
*  This function validates that the provided string is a phone number with
*  the format of 555-555-5555
*
*  @param  s the String containing the phone number
*  @return boolean
*/
function isValidPhoneNumber(s) {

 // See if it is empty
 if (s.length == 0) {
  alert("Please enter a value for the phone number.");
  return false;
 }

 // Make Regular expression for checking for correct phone number format
 rePhoneNumber = new RegExp(/^[1-9]\d{2}\-\d{3}\-\d{4}$/);

 // Test string using regular expression (return false if it fails)
 if (!rePhoneNumber.test(s)) {
  alert("Phone Number Must Be Entered As: 555-555-5555");
  return false;
 }

 return true;
}