JavaScript – Page 2 – Peter Velichkov's Blog

Something that really stops tableless layouts is the lack of ability to make two or three columns the same height. There are a lot of tricks but the solution I prefer is with Javascript.

Description of the solution: I used the mootools framework since it provides lots of useful predefined methods, selectors etc.

Usage: Just include the latest mootools js file (don’t need ajax, json, fx and other) and the following js. Than add the class defined in the function (class=”equals” in the example) to the columns you want to be in equal height.

// This Javascript is written by Peter Velichkov (www.creonfx.com)// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks

function equalHeight(cl){
	var className = '.' + cl;
	var maxHeight = 0;
	$$(className).each(function(el) {
	if (el.offsetHeight & gt; maxHeight) {
		maxHeight = el.offsetHeight;
	}
	});
	
	if ($$('.dummyExtender') != '') {
	$$('.dummyExtender').each(function(el) {
		el.setStyle('height', maxHeight - el.getParent().offsetHeight + el.offsetHeight);
	});
	} else {
	$$(className).each(function(el) {
		var curExtender = new Element('div', {
		'class': 'dummyExtender'
		});
		curExtender.injectInside(el);
		curExtender.setStyle('height', maxHeight - el.offsetHeight);
	});
	}
}

window.addEvent('load',function() {
    equalHeight('equals');
});

// This Javascript is written by Peter Velichkov (www.creonfx.com)// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/

// Use and modify all you want just keep this comment. Thanks

function equalHeight(cl){

var className = '.' + cl;

var maxHeight = 0;

$$(className).each(function(el) {

if (el.offsetHeight & gt; maxHeight) {

maxHeight = el.offsetHeight;

}

});

if ($$('.dummyExtender') != '') {

$$('.dummyExtender').each(function(el) {

el.setStyle('height', maxHeight - el.getParent().offsetHeight + el.offsetHeight);

});

} else {

$$(className).each(function(el) {

var curExtender = new Element('div', {

'class': 'dummyExtender'

});

curExtender.injectInside(el);

curExtender.setStyle('height', maxHeight - el.offsetHeight);

});

}

window.addEvent('load',function() {

equalHeight('equals');

});

Example: Equal Height DIV Columns

Update: Also since Internet Explorer 6 adds silly spacing in DIVs add the following lines to your css:

.dummyExtender{
font-size:0;
line-height:0;
padding:0;
margin:0;
}

Have you ever wondered how people put text in their input fields and when you click on it, it disappears. This process is called input watermarking.

Bellow is the JavaScript I’m using on my sites. It is XHTML 1.0 transitional and WCAG priority 1,2 valid.

< script type = "text/javascript" > 

<!--
// This Javascript is written by Peter Velichkov (www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
// Defining array that holds the IDs or Names of the inputs and the default text to display
// If you are using Names remeber that I am taking only the first one.
// The format is : 'ID1','VALUE1','ID2','VALUE2'....var inputs = new Array('firstname','firstvalue','secondid','secondvalue','thirdid','thirdvalue')
// Defining "indexOf" function for Internet Explorer
// It returns the index of the first occurance of an item in the array

if (!Array.indexOf) {
    Array.prototype.indexOf = function(obj, start) {
        for (var i = (start || 0); i < this.length; i++) {
            if (this[i] == obj) {
                return i;
            }
        }
    }
}

// Defining addEvent function since Internet Explorer does not support the official way of adding events

function addEvent(obj, type, fn) {
    if (obj.addEventListener)
    obj.addEventListener(type, fn, false);
    else if (obj.attachEvent)
    {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
        obj.attachEvent("on" + type, obj[type + fn]);
    }
}

function inputWatermark() {
    if (inputs.length < 2 || inputs.length % 2 != 0) {
        alert('Wrong usage - please read the source comments!');
    }
    for (i = 0; i < inputs.length; i++) {
        if (i % 2 == 0 && (document.getElementById(inputs[i]) || document.getElementsByName(inputs[i])[0])) {
            var cur = (document.getElementById(inputs[i])) ? (document.getElementById(inputs[i])) : (document.getElementsByName(inputs[i])[0]);
            cur.value = inputs[i + 1];
            addEvent(cur, "focus", onFocusHandler);
            addEvent(cur, "blur", onBlurHandler);
        }
    }
}

function onFocusHandler() {
    var inpname = this.id ? this.id: this.name;
    if (this.value == '' || this.value == inputs[inputs.indexOf(inpname) + 1]) {
        this.value = '';
    }
}

function onBlurHandler() {
    var inpname = this.id ? this.id: this.name;
    if (this.value == '') {
        this.value = inputs[inputs.indexOf(inpname) + 1];
    }
}

addEvent(window, "load", inputWatermark);

//-->
< /script>

< script type = "text/javascript" >

<!--

// This Javascript is written by Peter Velichkov (www.creonfx.com)

// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/

// Use and modify all you want just keep this comment. Thanks

// Defining array that holds the IDs or Names of the inputs and the default text to display

// If you are using Names remeber that I am taking only the first one.

// The format is : 'ID1','VALUE1','ID2','VALUE2'....var inputs = new Array('firstname','firstvalue','secondid','secondvalue','thirdid','thirdvalue')

// Defining "indexOf" function for Internet Explorer

// It returns the index of the first occurance of an item in the array

if (!Array.indexOf) {

Array.prototype.indexOf = function(obj, start) {

for (var i = (start || 0); i < this.length; i++) {

if (this[i] == obj) {

return i;

}

// Defining addEvent function since Internet Explorer does not support the official way of adding events

function addEvent(obj, type, fn) {

if (obj.addEventListener)

obj.addEventListener(type, fn, false);

else if (obj.attachEvent)

{

obj["e" + type + fn] = fn;

obj[type + fn] = function() {

obj["e" + type + fn](window.event);

}

obj.attachEvent("on" + type, obj[type + fn]);

}

function inputWatermark() {

if (inputs.length < 2 || inputs.length % 2 != 0) {

alert('Wrong usage - please read the source comments!');

}

for (i = 0; i < inputs.length; i++) {

if (i % 2 == 0 && (document.getElementById(inputs[i]) || document.getElementsByName(inputs[i])[0])) {

var cur = (document.getElementById(inputs[i])) ? (document.getElementById(inputs[i])) : (document.getElementsByName(inputs[i])[0]);

cur.value = inputs[i + 1];

addEvent(cur, "focus", onFocusHandler);

addEvent(cur, "blur", onBlurHandler);

}

function onFocusHandler() {

var inpname = this.id ? this.id: this.name;

if (this.value == '' || this.value == inputs[inputs.indexOf(inpname) + 1]) {

this.value = '';

}

function onBlurHandler() {

var inpname = this.id ? this.id: this.name;

if (this.value == '') {

this.value = inputs[inputs.indexOf(inpname) + 1];

}

addEvent(window, "load", inputWatermark);

//-->

< /script>

Usage: Just fill the array with the IDs and the values. Instead of IDs you can use names

Input Watermark Example page

Category: JavaScript

Equal Height for Two / Three Columns DIV Layout

WAI / XHTML Valid Input Fields Watermark