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 (more…)

Table Titles Float to stay in view
Tested to work in Firefox 3, Internet Explorer 7, 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>

(more…)

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. (more…)

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. (more…)

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?

Have you ever noticed that those people who vehemently argue for writing pages which work in Firefox frequently design pages which are totally unusable if viewed on a 800×600 video screen?

Yet almost the same number of people who use Firefox, 13% of the browser market as of September 2007, (http://www.thecounter.com/stats/2007/September/browser.php) browse the web on a computer with a video screen set to a 800×600 resolution (10% of the browser market: http://www.thecounter.com/stats/2007/September/res.php)

So - Why the lack of (loud) public support from the web design community?

Is it because web designers are loathed to give up their big header graphic images and navigation buttons which take up half the screen even on larger screens ? Is it because shouting for the cause of the 800×600 display can’t drum up the rabid fan-boyism of “stickin-it-to-microsoft” that supporters of the Firefox browser enjoy?

Or is it simply that the young web designer crowd do not have friends which browse the web at 800×600 and therefore do not consider it important (after all if their friends are not doing it why bother to design for it) ?

Text Drop Shadows

How to add cross browser drop shadow to text without the use of images using cascading stylesheets 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;

http://www.cssbasics.com/ - Learn everything you ever wanted to know about the basics of CSS
http://www.w3schools.com/css/ - CSS tutorials, references, examples for web building
http://www.htmldog.com/guides/cssbeginner/ - CSS Beginner Tutorial
BrainJar.com: Using Style Sheets - Overview of Cascading Style Sheets
Web Design 101 Articles - Each article covers a single subject in depth

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;
}

A tooltip is a small box containing which appears when you move your mouse over a hyperlink:
Hover over me to see

This visual element is useful in supplying additional information to the user without needing to take up addtional space on the screen. It is very easy to implement as well. All you need do is to use the “title” property of the anchor tag to display the addtional text message:

<a href="#" title="This is a standard tooltip">Hover over me to see</a>

One problem with the standard tooltip is that you can’t control how long the tool tip stays visible so you are limited to using very short messages.

Another problem is that using “title” in other HTML elements, such as an INPUT tag for a form, the implementation is not exactly what you would want to happen. It shows up if the user thinks to “hover” the mouse over the input field, but will not show up if they simply tab into it or move their mouse to another area of the screen.

That’s too bad because a forms input tag is the perfect place to have a tooltip. It could be used as a mini-help note. Letting the user know what the field is for, what format is expected, etc..

Since I do a lot of web development for data entry work I thought it would be a good idea to come up with a tooltip function that would work easily with a form, let me leave little helpful notes for the user, and one where I could control how long the tooltip would remain visible on the screen so longer messages could be left.

Note: In the below code I am using the FindPosition function to find the position of an object. I’ve included it here, but more information can be found about that function in the Finding the Position of an object article on this site.

To use the tool tip simply call it from the input tag of your form when focus is set to it

Example:

<form>
<input value="click here" onfocus="tooltips('Display a tool tip.');" type="text">
<input value="tab to here" onfocus="tooltips('Display a longer tooltip for 30 seconds. ',30);" type="text">
</form>

Function:

tooltips.js
tooltips demo page

// *****************************************************************************
// ** tooltips.js
// **
// ** Unobtrusive JavaScript function which will display a tool tip when called
// **
// ** Author: Stan Slaughter
// ** Web: http://www.StanSight.Com/
// *****************************************************************************

  //////////////////////////////////////////////////////////////////////////////
  // tooltips - Find object which called tooltip then show the tooltip message
  //  @param msg - Message to display
  //  @param displayseconds - *Optional* Number of seconds to display the tool tip
  //  @return void
  //////////////////////////////////////////////////////////////////////////////
  function tooltips(msg,displayseconds) {

    // Get object reference to element which triggered this event
    var event = (this.event) ? this.event : tooltips.caller.arguments[0] || window.event;
    var obj = event.target ? event.target : event.srcElement;

    // If not passed in set the default value for the optional displayseconds parameter
    displayseconds = (typeof(displayseconds)=="undefined") ? 10 : displayseconds;

    // Show Tooltip
    showTooltips(obj,msg,displayseconds)
  }

  //////////////////////////////////////////////////////////////////////////////
  // showTooltips - Function to display a tool tip.
  //  @param obj - Object to display the tool tip for
  //  @param msg - Message to display
  //  @param displayseconds - Number of seconds to display the tool tip
  //  @return void
  //////////////////////////////////////////////////////////////////////////////

  var HideTipTimer = 0;
  function showTooltips(obj,msg,displayseconds) {

    // Figure out where the input field object is on the screen by adding
    // up all the offsets for all the containing parent objects
    var obj_pos = FindPosition(obj);
    var tip_left = obj_pos[0];
    var tip_top = obj_pos[1];

    // Add obj height to top position so tip box DIV will show up underneath "obj"
    tip_top += obj.offsetHeight;

    // Create DIV tag object through DOM to hold the "tip" message (if it does not already exist)
    if (document.getElementById("tip") == null) {

      // Create tip box DIV
      tipdiv = document.createElement("div");
      document.body.appendChild(tipdiv);
      tipdiv.setAttribute("id", "tip");

      // Format appearance of tip box DIV (Note: could have just used a CSS
      // class, but I wanted to make this idependent of external files)
      tipdiv.style.zIndex = "500";
      tipdiv.style.position = "absolute";
      tipdiv.style.fontFamily = "Arial";
      tipdiv.style.color = "black";
      tipdiv.style.backgroundColor = "#FFFFE6";
      tipdiv.style.border = "1px solid #7F7F7F";
      tipdiv.style.padding = "0px";
      tipdiv.style.textAlign = "left";
      tipdiv.style.cursor = "pointer";

      // Create Paragraph to hold message contents
      tipdivP = document.createElement("p");
      tipdiv.appendChild(tipdivP);
      tipdivP.setAttribute("id", "tipP");
      tipdivP.style.margin = "8px";

      // Create shadow tip box
      shadowdiv = document.createElement("div");
      shadowdiv.setAttribute("id", "shadowTip");
      document.body.appendChild(shadowdiv);

      // Format appearance of shadow tip box (Note: could have just used a CSS
      // class, but I wanted to make this idependent of external files)
      shadowdiv.style.zIndex = "499";
      shadowdiv.style.position = "absolute";
      shadowdiv.style.opacity = ".5";
      shadowdiv.style.backgroundColor = "#DFDFDF";
      shadowdiv.style.border = "2px solid #EFEFEF";
      shadowdiv.innerHTML = " "

      // Allow a click on the "tip" div to hide the message.
      tipdiv.onclick = function (aEvent){
        document.getElementById("shadowTip").style.display="none";
        document.getElementById("tip").style.display="none";
      }

    } else {
      // Div Tag allready esists, clear out old timer then get reference to tip box
      clearTimeout(HideTipTimer);
      tipdiv = document.getElementById("tip");
      tipdiv.style.display="none"; // Hide any old message

      tipdivP = document.getElementById("tipP");
      tipdivP.innerHTML = "";

      shadowdiv = document.getElementById("shadowTip");
      shadowdiv.style.display="none";
    }

    // Roughly figure how how wide to make tip box DIV based on the number
    // of characters in the message. If max width is exceeded then just use max width
    var iFontSize = 10;
    var iCharWidth = iFontSize / 2; // Assume characters are half as wide as they are tall
    var iMaxWidth = 350;
    var iNumChars = msg.length;
    var tip_width = (iNumChars * iCharWidth + 6 > iMaxWidth ) ? iMaxWidth : iNumChars * iCharWidth + 6;

    // Set tip box width and font size
    tipdiv.style.width  = tip_width + "px";
    tipdiv.style.fontSize = iFontSize + "px";

    // If message is not empty then postion and show tip box
    var display_type = "none";
    if (msg != "") {
      display_type = "block";      

      // Assign the message to the tip box
      tipdivP.innerHTML = msg;
      var tipdivWidth = parseInt(tipdiv.style.width);

      // Keep tip box from running off right of screen
      var widthPad = 25; // scroll bar and shadow offset
      if (tip_left + widthPad + tipdivWidth > document.body.offsetWidth) {
        var diff = (tip_left + widthPad + tipdivWidth) - document.body.offsetWidth;
        tip_left -= diff;
      }

      // Position tip box DIV
      tipdiv.style.top = tip_top + "px";
      tipdiv.style.left = tip_left + "px";

      // Position shadow DIV
      shadowdiv.style.top = (2 + tip_top) + "px";
      shadowdiv.style.left = (4 + tip_left) + "px";

      // Show tip box and shadow
      tipdiv.style.display = display_type;
      shadowdiv.style.display = display_type;

      // Set shadows width and height based in tip box *after* message is assigned
      shadowdiv.style.width = tipdivWidth + "px";
      shadowdiv.style.height = (tipdiv.offsetHeight + 2) + "px";

      // If tip is being displayed then wait 'displayseconds' seconds then
      // hide the tip box DIV
      if (display_type == "block") {
        var hideTipCmd = 'document.getElementById("shadowTip").style.display="none";' +
                         'document.getElementById("tip").style.display="none";';
        displayseconds = displayseconds * 1000;
        HideTipTimer = setTimeout(hideTipCmd,displayseconds);
      }
    }

  }

  //////////////////////////////////////////////////////////////////////////////
  // 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];
  }