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:
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 )
Read more...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.
Read more...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 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).
getWidth(), getHeight():
<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>
Read more...
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.
autoSelect(el):
<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);"
Read more...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.
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.
Read more...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.
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.
You might need them if you have one or more large tables on your website and/or application and wish to:
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:
Web developer? Smart thinkin'. Here are some tips you should know if you don't already:
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.)
Read more...