Javascript for hiding and concealing parts of a page

May 8, 2006 - 19:04 UTC - Tags: CSS javascript For some pages you may want to add special effects to elements on the page. As an example, consider a WYSIWYG web page editor. In a this kind of editor, you may want to hide the editing capabilities of the different page elements, but show them when the user moves selectes the element for editing. An example web page can be found at the bottom of this entry.

Javascript
The javascript adds or removes classes depending on the state of the page element the user is working with. To enable an element (e.g. av div), the registerElement-function will be used. It attaches the scripts to the mouseover and clickevents of the element.

var CSS_HOVER = "hoverMode";
var CSS_EDIT = "editMode";

var currentEditElement = null;

function registerElement(elm) {
        elm.onmouseover = function() { setHoverMode(elm); }
        elm.onmouseout = function() { resetHoverMode(elm); }
        var oldFunc = elm.onclick;
        if (elm.nodeName == "INPUT" || elm.nodeName == "TEXTAREA") {
                elm.onfocus = function(event) { setEditMode(elm, event); }
                elm.onblur = function() { resetEditMode(elm); }
                elm.onclick = function(event) { if (oldFunc) oldFunc(); cancelBubble(event); }
        } else {
                elm.onclick = function(event) { if (oldFunc) oldFunc(); setEditMode(elm, event); }
        }
        elm.onmouseover();
}

function setEditMode(elm) {
	if (currentEditElement != elm && currentEditElement != null) {
		resetEditMode(currentEditElement);
	}
	resetHoverMode(elm);
	currentEditElement = elm;
	addClass(elm, CSS_EDIT);
}

function setHoverMode(elm) {
	if (!isInClass(elm, CSS_EDIT)) {
		addClass(elm, CSS_HOVER);
	}
}

The rest of the javascript can be found in the zip file attached at the bottom.

The CSS
The stylesheet is used to add different effects to the page elements. It basically allows on style for regular view, one for mouseover (hoverMode) and one for element activation (editMode). Also parts of an element can be hidden and shown depending on wether or not the element is in editmode.

.pageSection {
	padding: 4px 4px 5px 4px; border: 1px solid white;
}

.hoverMode {
	border: 1px solid #449944; background-color: #ccffcc;
} 

.editMode {
	border: 1px solid #004400; background-color: #449944;
	color: white;
}


.editMode .hideOnEdit {
	display: none;	
}

.showOnEdit {
	display: none;
}

.editMode .showOnEdit {
	display: block;
}

HTML
The HTML elements that should be enabled for hovering/editing are enabled using the registerElement-function. The easiest way to register an element is to use add an onMouseOver="registerElement(this)" to to the element.

Example
An example is available here: Example

The javascript, stylesheet and HTML can be downloaded here here.