gnuherds-app-dev
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

JavaScript to hide / show items

From: Victor Engmark
Subject: JavaScript to hide / show items
Date: Wed, 18 Apr 2007 11:12:04 +0200
Hi all,

Here's a script we can use if we need to hide / show anything, e.g. form fields. This specific code will just hide any elements with class "secondary". Most of it is written by me ( CC licensed, but I can change it if necessary); the addEvent part is LGPL licensed. Copied verbatim from my CV :) It works (with XHTML 1.1, should work for HTML) in at least Firefox 2, Opera 9, and IE6 (haven't tested any others).

var fullTitle = "Display the full contents of the CV";
var minTitle = "Display shorter CV";

window.>
    //Initialize display toggling
    var el = document.createElement ("a");
    el.setAttribute("id", "display_toggle");
    el.setAttribute("href", "#");
    el.setAttribute ("title", minTitle);
    el.appendChild(document.createTextNode(''));
    document.getElementById("contents").insertBefore(el, document.getElementById("contents").firstChild);
    addEvent(el, 'click', function(){ display_toggle();} );
    display_toggle();
}

function display_toggle() {
    var el = document.getElementById("display_toggle");
    var styleSheet = document.styleSheets[1];
    if (el.getAttribute('title') == minTitle) {
        //Minimalize display
        if (styleSheet.insertRule) {
            styleSheet.insertRule ('.secondary {display: none !important;}', 0);
        } else if (styleSheet.addRule) {
            styleSheet.addRule('.secondary', 'display: none !important;');
        }

        //Change link
        el.setAttribute("title", fullTitle);
        el.lastChild.nodeValue = 'Show full';
    } else {
        //Maximalize display
        if (styleSheet.deleteRule) {
            styleSheet.deleteRule(0);
        } else if (styleSheet.removeRule ) {
            styleSheet.removeRule(0);
        }
       

        //Change link
        el.setAttribute("title", minTitle);
        el.lastChild.nodeValue = 'Show minimal';
    }
    return true;
}

function view_source_link(target, text){
    if (typeof target != "undefined") {
        if (typeof text != "undefined") {
            var contents = document.createTextNode(text);
        } else {
            var contents = document.createTextNode("View source");
        }
        var el = document.createElement("a");
        if (navigator.userAgent.search(/firefox/i) != -1) { //Supports view-source protocol
            el.setAttribute("href", "view-source:" + window.location);
        } else if (navigator.userAgent.search(/msie/i) == -1 || navigator.userAgent.search(/opera/i) != -1) { //All except IE
            el.setAttribute("href", "_javascript_:c=unescape(document.documentElement.outerHTML);c=c.replace(/&/g,'&amp;');c=c.replace(/</g,'&lt;');c=c.replace(/>/g,'&gt;');document.write('<html><head><title>Source of Page</title></head><body><code><pre>' + c + '</pre></code></body></html>');");
        }
        el.setAttribute("title", "View the source of this page");
        el.appendChild(contents);
        document.getElementById(target).appendChild(el);
        return true;
    }
    return false;
}

/* From http://www.dustindiaz.com/rock-solid-addevent/ */
function addEvent( obj, type, fn ) {
    if (obj.addEventListener) {
        obj.addEventListener( type, fn, false );
        EventCache.add(obj, type, fn);
    }
    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] );
        EventCache.add(obj, type, fn);
    }
    else {
        obj["on"+type] = obj["e"+type+fn];
    }
}
var EventCache = function(){
    var listEvents = [];
    return {
        listEvents : listEvents,
        add : function(node, sEventName, fHandler){
            listEvents.push(arguments);
        },
        flush : function(){
            var i, item;
            for(i = listEvents.length - 1; i >= 0; i = i - 1){
                item = listEvents[i];
                if(item[0].removeEventListener){
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };
                if(item[1].substring(0, 2) != "on"){
                    item[1] = "on" + item[1];
                };
                if(item[0].detachEvent){
                    item[0].detachEvent(item[1], item[2]);
                };
                item[0][item[1]] = null;
            };
        }
    };
}();

--
Victor Engmark
Quidquid latine dictum sit, altum videtur - What is said in Latin, sounds profound
reply via email to
[Prev in Thread] Current Thread [Next in Thread]