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 this.styleEl is the element we're looking at:

    grabLength : function (length) {
        var temp = document.createElement("DIV");
        temp.style.width = length;
        this.styleEl.parentNode.appendChild(temp);
        length = Math.round(temp.offsetWidth);
        this.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 4/16/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've been tested in Internet Explorer 6 & 7, Firefox, Safari and Opera.

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

<script type="text/javascript">
//<![CDATA[

function getWidth(/* 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(/opera/i.test(navigator.userAgent)) {
            // opera 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 -= Math.round(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 -= Math.round(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 -= Math.round(temp.offsetWidth);
            temp.style.width = paddingRightCSS;
            width -= Math.round(temp.offsetWidth);
            el.parentNode.removeChild(temp);
        }
    }
    
    return width;
}

function getHeight(/* 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(/opera/i.test(navigator.userAgent)) {
            // opera 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 -= Math.round(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 -= Math.round(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 -= Math.round(temp.offsetWidth);
            temp.style.width = paddingBottomCSS;
            height -= Math.round(temp.offsetWidth);
            el.parentNode.removeChild(temp);
        }
    }
    
    return height;
}

//]]>
</script>

Auto-Selecting Text in Various HTML Elements With Javascript

Updated on 3/18/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.

<script type="text/javascript">
//<![CDATA[

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

//]]>
</script>

Once this function is in your javascript code, all you have to do is add the following line inside of each HTML element you want the auto-select feature for: onclick="autoSelect(this);"

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 (6kb) 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.

103 Javascript DHTML Events! Oh My

After scouring the Internet for any useful DHTML/DOM events I could find, I have finally compiled what hopefully is a complete list of current javascript events. More of a reference than anything else, I've listed each event with some links providing more information and specification.

Please take note that many of these events are only supported in either IE or Mozilla and not both -- however one good indicator of cross browser support is whether or not the event is a W3C standard. Keep in mind that one browser may implement a particular event differently from the next browser.

First, some good general resources:

• Document Object Model Events - Level 2 Specification - A good overview
• W3C Javascript Event Reference
• MSDN DHTML Events List - A good IE overview
• Mozilla XUL Events
• Wikipedia - DOM Events
• Javascript Event Order Overview

13 Web Development Tips You Should Know

Web developer? Smart thinkin'. Here are some tips you should know if you don't already:

1. If your site's content can be turned into a widget somehow, such as with an RSS feed or just a mini version of your site (ex. the puzzles widget on this site) - do so - and then submit your widget to all the major widget-oriented websites such as iGoogle, Netvibes, Pageflakes, Facebook, Live, Widgetbox and Widgipedia - it will help drive a LOT of traffic to your site - think of it as a great form of content syndication.
2. Do NOT: have a public link exchange on your site, sign your site up on link farms or on SEO directories - this will lower your rankings on Google a lot - take it from experience.
3. Though CSS can replicate the styling brought from these tags, search bots love them - so they're worth using for SEO purposes: <h1> - <h5>, <strong>, <em>.
4. Make sure your site supports the big four: Internet Explorer 6+, Firefox 1.5+, Opera, and Safari.
5. Make sure your site fits down to a 1024 x 768 monitor resolution.
6. Use the color wheel when creating layout themes. Try to keep your site layout down to three distinct colors.
7. Create a website shell (a.k.a. template), so that if you decide to make another website down the road, it will be a lot quicker to make because you'll already have a framework set up.
8. Create a to-do list for your site so you don't forget anything as it grows bigger - I like to jot sudden ideas I get down on it too.
9. A successful website provides a service to its users - such as teaching (Wikipedia) and/or social networking (Facebook).
10. Whenever possible, use onmousedown instead of onclick - it's ~100ms faster.
11. Use file compression for your javascript and web page files so that your pages load faster - also if you can, put the script include tags at the bottom of your page - this will give the illusion that your site loads faster because browsers usually comb through an entire js file before continuing on with loading the rest of your page.
12. If you have a rails site, I suggest checking out Mongrel and Monit for Mongrel (or God) if you are currently using Apache with FastCGI. You may notice your app is a lot faster with Mongrel clustering than on FastCGI.
13. This one is more of a for-your-health point, but our eyes naturally look slightly downwards - so if your computer screen is straight in front of you at eye level or higher, trying moving it down to neck or chest level - you may notice that your eyes feel more relaxed -- (I learned this last point from an eye doctor and feel that it helps me.)

Well that's it - a quick read - hopefully you've learned something new!

Also, if you think I'm missing a good tip, please let me and everyone else know and comment below (and hey - it''ll be some good free SEO if you have a web development website.)