Super Tables v0.30 Released

The latest version of Super Tables is out. I decided to call it version 0.30 instead of version 0.26 because I feel like it has earned the bigger jump speedwise. Enjoy!

Version 0.30 Change Log:

• Rendering speed increased significantly in Firefox and Internet Explorer.
• Required CSS styles have lessened dramatically.
• rowSpan and colSpan support added.
• onStart option added. onStart is a function run before the superTable script begins to re-render the table. Any this.variableNameHere variables you create here can be used later ( eg. onFinish function )
• Fixed various minor bugs.

Have a look, it's now much faster.

Simulating onResizeEnd, onScrollEnd and onMousemoveEnd

I ran across an issue the other week where an onScroll JavaScript function was being called too often and I needed to figure out a way to execute it only when needed. Knowing that the code was mainly intended for post-scrolling execution, I came up with this idea* of setting and resetting a timeout again and again until the actual event finished and the set timeout fired the real code. So far it seems to be working great so I thought I'd share.

The following code will execute the intended onWhatever function once the user stops resizing, scrolling or moving the mouse ( depending on how it's used ). Please check out the demo pages to see the simulated events in action.

This script was successfully tested in Windows versions of Internet Explorer 5.5 - 7, Firefox 1.5 - 3, Opera 9 and Safari 3.

Demos

var whateverEndFunc = function () {
    var delay = 50; // milliseconds
    var whateverTimeout;
    
    return function () {
        if (whateverTimeout) {
            clearTimeout(whateverTimeout);
        }
        
        whateverTimeout = setTimeout(function () {
            // YOUR [onResize, onScroll or onMousemove] CODE HERE
        }, delay);
    };
}();
 

If you decrease the variable delay the code inside of the timeout will be called more often and vice versa. To use this code, call it just like you would onResize, onScroll or onMousemove. Some basic examples:

window.onresize = function () {
    whateverEndFunc();
}

window.onscroll = function () {
    whateverEndFunc();
}

document.onmousemove = function () {
    whateverEndFunc();
}

* inspired by Ari Karp - who needs to make a damn blog : )

An IE getComputedStyle Method for Block Elements

One of the more useful methods found in Mozilla browsers is the getComputedStyle method. This method, when called on an element, can return the computed runtime value of a specified style property using the getPropertyValue method.

While each Mozilla browser has its own quirks, the basic implementations are similiar. For example, if for an element you call getComputedStyle with the intent to find its width; it will return a length in pixels regardless of whether or not the style property was specified in pixels or at all on the element. As you may tell, this information is most useful for javascript functions that need to know the size of elements as they actually are on the screen.

Unfortunately Microsoft did not put this method into Internet Explorer 7 and below. This has left developers with the task of finding workarounds to their problems that would otherwise be easily solved had they the method. Fortunately, I may have found a satisfactory solution to IE's lacking support. - At least, for retrieving dimension sizes on block elements...

The following javascript object can return, in pixels ( or as possibly auto ), the computed width, height, padding, border width and more for block elements. The object relies on a code snippet I used in my width and height getter functions post about a month ago. The snippet is fairly straightforward, in which styleEl is the element we're looking at:

    var grabLength = function (length) {
        var temp = document.createElement("DIV");
        temp.style.width = length;
        styleEl.parentNode.appendChild(temp);
        length = Math.round(temp.offsetWidth);
        styleEl.parentNode.removeChild(temp);
        return length;
    };

The argument "length" can be any sort of style value length such as 50px, 50em, 50pt, 50%, auto, etc. It will create a temporary DIV that will be placed in the same parent container as the element being called upon. This way relativity is maintained. The width is extracted and viola! - we have what we need.

One question you may be asking yourself is: why set the width every time and not the height? This is because even vertically-oriented styles such as margin-top, padding-top and border-top-width are based off of the horizontal. If you have a browser screen resolution of 800 x 600 and for an element, with parent element BODY with margin 0px, said that you wanted the padding-top to be 10%, it would be drawn 80px deep and not 60px. ( note: this does NOT apply to the height style )

Posted below is the full source code for the IE_computedStyle object. Please see the script's comments for usage. A demo is also available. ( please note that it was made for IE only and will return undefined purposefully in other browsers )

A Quick Way to View the Generated Source Code

While each major browser has its own scripts and plugins for viewing the generated source code, there's nothing really universal except for the innerHTML/outerHTML method (from what I've found online).

The following bit of code is that very method presented in an easy to use way. It's CSS/HTML code that you can throw in and out of your page while developing. The code will allow you to view, select and copy the generated source code in IE, Firefox, Safari and Opera.

One note: After you click on 'View Source' a text area will appear. Press CTRL + A to select all of the text or just scroll through it. To close the text area, click anywhere on the page. (to bring it back, press the 'View Source' button again)

<style type="text/css">
textarea#doc_source { position:fixed;z-index:1000;bottom:10px;right:20px;width:600px;height:300px;display:none;overflow:scroll; }
input#doc_button { position:fixed;z-index:1000;top:10px;right:20px;width:120px; }
</style>
<!--[if lte IE 6]> <style type="text/css"> textarea#doc_source { position:absolute; } input#doc_button { position: absolute; } </style> <![endif]-->

<textarea id="doc_source" onblur="this.style.display='none';"></textarea>
<input id="doc_button" type="button" onclick="document.getElementById('doc_source').style.display='block';document.getElementById('doc_source').value='';document.getElementById('doc_source').value=document.documentElement.innerHTML;document.getElementById('doc_source').focus();" value="View Source" />

I should mention that in IE6 and below the button and text area do not follow you as you scroll down the page due to IE6's fixed position bug. Bleh.

Width and Height Getter Functions for HTML Elements

Updated on 7/13/2008.

The following are two similiar functions you may find useful. When called on an element, they can return (in pixels) either:

• The width/height
• The width/height including padding
• The width/height including borders
• The width/height including padding and borders (basically offsetWidth/offsetHeight)

The functions work on any(?) block element, regardless of whether or not it has a predefined width/height. They have been successfully tested in Windows versions of Internet Explorer 6 - 7, Firefox 1.5 - 3, Opera 9 and Safari 3.

Below this function is a small demo and here you can find the test page (with an additional dynamic style change test).

///////////////////////////////////////////////////////////////////////////////////////////////////
// USED FOR GETTING THE COMPUTED WIDTH OF AN ELEMENT IN PIXELS
///////////////////////////////////////////////////////////////////////////////////////////////////
var getWidth = function (/* Object */ el, /* boolean */ includePadding, /* boolean */ includeBorder) {
    var width;
    el = (typeof(el) === "string") ? document.getElementById(el) : el;	
    
    if (window.getComputedStyle) { /* FF, Safari, Opera */
        var style = document.defaultView.getComputedStyle(el, null);
        if (style.getPropertyValue("display") === "none")
            return 0;
        width = parseInt(style.getPropertyValue("width"));
        
        if (window.opera && !document.getElementsByClassName) {
            /* Opera 9.25 includes the padding and border when reporting the width/height - subtract that out */
            width -= parseInt(style.getPropertyValue("padding-left"));
            width -= parseInt(style.getPropertyValue("padding-right"));
            width -= parseInt(style.getPropertyValue("border-left-width"));
            width -= parseInt(style.getPropertyValue("border-right-width"));
        }
        
        if (includePadding) {
            width += parseInt(style.getPropertyValue("padding-left"));
            width += parseInt(style.getPropertyValue("padding-right"));
        }
        
        if (includeBorder) {
            width += parseInt(style.getPropertyValue("border-left-width"));
            width += parseInt(style.getPropertyValue("border-right-width"));
        }
    } else { /* IE */
        if (el.currentStyle["display"] === "none")
            return 0;
        var bRegex = /thin|medium|thick/; /* Regex for css border width keywords */
        width = el.offsetWidth; /* Currently the width including padding + border */
        
        if (!includeBorder) {
            var borderLeftCSS = el.currentStyle["borderLeftWidth"];
            var borderRightCSS = el.currentStyle["borderRightWidth"];
            var temp = document.createElement("DIV");
            if (el.offsetWidth > el.clientWidth && el.currentStyle["borderLeftStyle"] !== "none") {
                if (!bRegex.test(borderLeftCSS)) {
                    temp.style.width = borderLeftCSS;
                    el.parentNode.appendChild(temp);
                    width -= temp.offsetWidth;
                    el.parentNode.removeChild(temp);
                } else if (bRegex.test(borderLeftCSS)) {
                    temp.style.width = "10px";
                    temp.style.border = borderLeftCSS + " " + el.currentStyle["borderLeftStyle"] + " #000000";
                    el.parentNode.appendChild(temp);
                    width -= Math.round((temp.offsetWidth-10)/2);
                    el.parentNode.removeChild(temp);
                }
            }
            if (el.offsetWidth > el.clientWidth && el.currentStyle["borderRightStyle"] !== "none") {
                if (!bRegex.test(borderRightCSS)) {
                    temp.style.width = borderRightCSS;
                    el.parentNode.appendChild(temp);
                    width -= temp.offsetWidth;
                    el.parentNode.removeChild(temp);
                } else if (bRegex.test(borderRightCSS)) {
                    temp.style.width = "10px";
                    temp.style.border = borderRightCSS + " " + el.currentStyle["borderRightStyle"] + " #000000";
                    el.parentNode.appendChild(temp);
                    width -= Math.round((temp.offsetWidth-10)/2);
                    el.parentNode.removeChild(temp);
                }
            }
        }
        
        if (!includePadding) {
            var paddingLeftCSS = el.currentStyle["paddingLeft"];
            var paddingRightCSS = el.currentStyle["paddingRight"];
            var temp = document.createElement("DIV");
            temp.style.width = paddingLeftCSS;
            el.parentNode.appendChild(temp);
            width -= temp.offsetWidth;
            temp.style.width = paddingRightCSS;
            width -= temp.offsetWidth;
            el.parentNode.removeChild(temp);
        }
    }
    
    return width;
};

///////////////////////////////////////////////////////////////////////////////////////////////////
// USED FOR GETTING THE COMPUTED HEIGHT OF AN ELEMENT IN PIXELS
///////////////////////////////////////////////////////////////////////////////////////////////////
var getHeight = function (/* Object */ el, /* boolean */ includePadding, /* boolean */ includeBorder) {
    var height;
    el = (typeof(el) === "string") ? document.getElementById(el) : el;
    
    if (window.getComputedStyle) { /* FF, Safari, Opera */
        var style = document.defaultView.getComputedStyle(el, null);
        if (style.getPropertyValue("display") === "none")
            return 0;
        height = parseInt(style.getPropertyValue("height"));
        
        if (window.opera && !document.getElementsByClassName) {
            /* Opera 9.25 includes the padding and border when reporting the width/height - subtract that out */
            height -= parseInt(style.getPropertyValue("padding-top"));
            height -= parseInt(style.getPropertyValue("padding-bottom"));
            height -= parseInt(style.getPropertyValue("border-top-width"));
            height -= parseInt(style.getPropertyValue("border-bottom-width"));
        }
        
        if (includePadding) {
            height += parseInt(style.getPropertyValue("padding-top"));
            height += parseInt(style.getPropertyValue("padding-bottom"));
        }
        
        if (includeBorder) {
            height += parseInt(style.getPropertyValue("border-top-width"));
            height += parseInt(style.getPropertyValue("border-bottom-width"));
        }
    } else { /* IE */
        if (el.currentStyle["display"] === "none")
            return 0;
        var bRegex = /thin|medium|thick/; /* Regex for css border width keywords */
        height = el.offsetHeight; /* Currently the height including padding + border */
    
        if (!includeBorder) {
            var borderTopCSS = el.currentStyle["borderTopWidth"];
            var borderBottomCSS = el.currentStyle["borderBottomWidth"];
            var temp = document.createElement("DIV");
            if (el.offsetHeight > el.clientHeight && el.currentStyle["borderTopStyle"] !== "none") {
                if (!bRegex.test(borderTopCSS)) {
                    temp.style.width = borderTopCSS;
                    el.parentNode.appendChild(temp);
                    height -= temp.offsetWidth;
                    el.parentNode.removeChild(temp);
                } else if (bRegex.test(borderTopCSS)) {
                    temp.style.width = "10px";
                    temp.style.border = borderTopCSS + " " + el.currentStyle["borderTopStyle"] + " #000000";
                    el.parentNode.appendChild(temp);
                    height -= Math.round((temp.offsetWidth-10)/2);
                    el.parentNode.removeChild(temp);
                }
            }
            if (el.offsetHeight > el.clientHeight && el.currentStyle["borderBottomStyle"] !== "none") {
                if (!bRegex.test(borderBottomCSS)) {
                    temp.style.width = borderBottomCSS;
                    el.parentNode.appendChild(temp);
                    height -= temp.offsetWidth;
                    el.parentNode.removeChild(temp);
                } else if (bRegex.test(borderBottomCSS)) {
                    temp.style.width = "10px";
                    temp.style.border = borderBottomCSS + " " + el.currentStyle["borderBottomStyle"] + " #000000";
                    el.parentNode.appendChild(temp);
                    height -= Math.round((temp.offsetWidth-10)/2);
                    el.parentNode.removeChild(temp);
                }
            }
        }
    
        if (!includePadding) {
            var paddingTopCSS = el.currentStyle["paddingTop"];
            var paddingBottomCSS = el.currentStyle["paddingBottom"];
            var temp = document.createElement("DIV");
            temp.style.width = paddingTopCSS;
            el.parentNode.appendChild(temp);
            height -= temp.offsetWidth;
            temp.style.width = paddingBottomCSS;
            height -= temp.offsetWidth;
            el.parentNode.removeChild(temp);
        }
    }
    
    return height;
};
 

Auto-Selecting Text in Various HTML Elements With Javascript

Updated on 7/13/2008.

Here is a function that when called on a particular HTML element will auto-select all of its inner text. The function works on elements such as INPUT (text), TEXTAREA, DIV, SPAN, TD, and PRE. It is also cross browser compatible.

Below this code is a working demo.

var autoSelect = function (el) {
    if(el.tagName === "TEXTAREA" || (el.tagName === "INPUT" && el.type === "text")) {
        el.select();
        return;
    }
    
    if (window.getSelection) { // FF, Safari, Opera
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection) { // IE
        document.selection.empty();
        var range = document.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
};
 

Example function call: autoSelect(document.getElementById("myDiv"));

Number Validation with Javascript Regular Expressions

Rather than rewrite what is already on many websites such as this one, I'm simply going to post some regular expressions that you may find useful for things such as form validation and file parsing.

• Positive Integer Values: /^(0|[1-9][0-9]*)$/
• Positive Decimal Values: /(^(0?|[1-9][0-9]*)\.(0*[1-9][0-9]*)$)|(^[1-9]+[0-9]*\.0+$)|(^0\.0+$)/
• Positive Integer and Decimal Values: /(^(0|[1-9][0-9]*)$)|((^(0?|[1-9][0-9]*)\.(0*[1-9][0-9]*)$)|(^[1-9]+[0-9]*\.0+$)|(^0\.0+$))/
• Signed Integer and Decimal Values: /(^[+]?0(\.0+)?$)|(^([-+]?[1-9][0-9]*)$)|(^([-+]?((0?|[1-9][0-9]*)\.(0*[1-9][0-9]*)))$)|(^[-+]?[1-9]+[0-9]*\.0+$)/
• Signed Floating Point Numbers: /^([-+]?[0-9]*\.?[0-9]+)$/   --Source: http://www.regular-expressions.info/floatingpoint.html

You may notice that some of these are really long. This is because they are rather strict when matching valid values. To see why by example, select a tab in the demo below.

Super Tables - HTML Tables with Fixed Headers and More

What are Super Tables?

Something that's not really that super yet but may be someday. Super Tables are large HTML tables enhanced with cross-browser fixed vertical and horizontal scrolling headers with custom skins and features.

How do they work?

Using a small (10kb uncompressed) javascript file and an equally small (4kb) CSS skin file, a rendered HTML table is taken by the superTables.js script and is turned into a Super Table using only a single line of javascript code.

Why would I need them?

You might need them if you have one or more large tables on your website and/or application and wish to:

• Enhance the user experience.
• Constrain tables sizes while still keeping the headers in view.
• Turn static tables into web-based spreadsheets.
• Avoid having to rewrite old HTML table code into javascript or XML for use in similiar products.