Source Code of: collapsible_elements2.htm
Date Last Modified: May 02, 2009 - 01:59:20 AM
Size: 7 KB  |  230 lines  |  7,106 characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Collapsible Boxes Test</title>

<style type="text/css">

.collapsed
{
    display: none;
}

.expanded
{
    
}

.collapsetrigger
{
    cursor: pointer;
    cursor: hand;
}

.another {
    border: 1px dotted #999;
}

</style>

<!-- this file is source from http://mwarden.f2o.org/sandbox/eventlistener2.js 
inserted here only so users can easily view the full relevant source. I suggest
that this code still be made an external script. -->
<script type="text/javascript" language="javascript">
    /**
 * Javascript code to handle adding functions to event listeners of objects.
 * Includes helper functions to add elements to the body's onload. This is 
 * repeated all over Horde's JavaScript, and this allows for all the details of 
 * maintaining a list of functions to be called to be encapsulated in one 
 * function call. Usage: addObjectEventListener(window, 'load', functionobject);
 * and addBodyOnload(functionobject);
 * 
 * Copyright 2005 Matt Warden <mwarden@gmail.com>
 *
 * See the enclosed file COPYING for license information (LGPL). If you
 * did not receive this file, see http://www.fsf.org/copyleft/lgpl.html.
 * 
 *
 * @author Matt Warden <mwarden@gmail.com>
 */

function addObjectEventListener(obj, event, funct)
{
    // Assign new anonymous function if we're passed a js string
    // instead of a function reference.
    if (typeof funct == 'string') {
        funct = new Function(funct);
    }
    
    if (obj.addEventListener) {
        obj.addEventListener(event, funct, false);
    } else if (obj.attachEvent) {
        obj.attachEvent('on'+event, funct);
    }
    else {
        eval('var old = obj.on'+event+';');
        if (old != null) {
            eval('obj.on'+event+' = function() {'
                +'old();'
                +'funct();'
            +'};');
        }
        else {
            eval('obj.on'+event+' = funct;');
        } // end if
    } // end if
} // end function addListener


function addBodyOnload(funct)
{
    addObjectEventListener(window, 'load', funct);
} // end function addBodyOnload
</script>

<!-- end source from http://mwarden.f2o.org/sandbox/eventlistener2.js -->



<!-- this is source from an external javascript file, inserted here
only so users can see all the relevant source at once -->
<script type="text/javascript" language="javascript">

/**
 * See the enclosed file COPYING for license information (LGPL). If you
 * did not receive this file, see http://www.fsf.org/copyleft/lgpl.html.
 */

/**
 * Copyright Christian Heilmann (http://icant.co.uk)
 * eases the dynamic application of CSS classes via DOM
 * parameters: action a, object o and class names c1 and c2 (c2 optional)
 * actions: 
 *    swap exchanges c1 and c2 in object o
 *    add adds class c1 to object o
 *    remove removes class c1 from object o
 *    check tests if class c1 is applied to object o
 *
 * 
 * @author Christian Heilmann (http://icant.co.uk)
 * @author Matt Warden <mwarden@gmail.com>
 * @param string a action
 * @param object o object
 * @param string c1 class name
 * @param string c2 class name (needed only if a='swap')
 * @return void|boolean 
 * @usage cssjs('swap',document.getElementById('foo'),'bar','baz');
*/
function cssjs(a,o,c1,c2)
{
    switch (a){
        case 'swap':
            o.className=!cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
            break;
        case 'add':
            if(!cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
            break;
        case 'remove':
            var rep=o.className.match(' '+c1)?' '+c1:c1;
            o.className=o.className.replace(rep,'');
            break;
        case 'check':
            return new RegExp('\\b'+c1+'\\b').test(o.className)
            break;
    }
}

</script>


<script type="text/javascript" language="javascript">

    function initCollapsibleDivs()
    {
        // check if DOM is available, return if not
        if(!document.getElementsByTagName || !document.createTextNode){ return; }
          
        // get an array of all div elements
        var divs=document.getElementsByTagName('div');
        
        // loop over array elements looking for a class name of 'collapsible'
        for (var i=0; i<divs.length; i++)
        {
            if (divs[i] && divs[i].className && 
                (cssjs('check', divs[i], 'collapsible') 
                    || cssjs('check', divs[i], 'expandable') ))
            {
                // if it's collapsible, then it's initial state is expanded. if it's expandable
                // then its initial state is collapsed
                var childclass = (cssjs('check', divs[i], 'collapsible') ? 'expanded' : 'collapsed');
                
                // get all child divs of this div
                var childdivs = divs[i].getElementsByTagName('div');
                
                for (var j=0; j<childdivs.length; j++)
                {
                    // add the child's class
                    cssjs('add', childdivs[j], childclass);
                    
                    // insert the expand/collapse node before this child div
                    var p=document.createElement('p');
                    cssjs('add', p, 'collapsetrigger');
                    p.onclick = toggleExpanded;
                    p.appendChild(document.createTextNode('Expand/Collapse'));
                    divs[i].insertBefore(p, childdivs[j]);
                }// end for
                
            } // end if
        } // end for
        
    } // end initCollapsibleDivs

    function toggleExpanded(e)
    {
        var e = e || event;
        var source = e.srcElement || e.target;
        
        if (!document.getElementById || !document.getElementsByTagName) return;
        
        var parentdiv = source.parentNode;
        var childdiv = parentdiv.getElementsByTagName('div').item(0);
        
        if (childdiv && childdiv != null)
        {
            // toggle expanded/collapsed
            if (childdiv.className && childdiv.className != null)
                cssjs('swap', childdiv, 'collapsed', 'expanded');
            else
                cssjs('add', childdiv, 'collapsed');
            // end if
        } // end if
    }
    
    // add a call to this function to the list of functions called on page load
    addBodyOnload(initCollapsibleDivs);
</script>
</head>
<body>


<h1>Using Page Divisions</h1>

<div class="collapsible another class">
    <div class="another class">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam leo ante, vehicula tristique, egestas ut, commodo a, mauris. Aenean dictum elit ut sem. Sed ut lectus. Suspendisse non tellus. Sed mi leo, placerat vel, gravida et, facilisis et, ante. Integer augue est, semper nec, mattis id, facilisis et, tortor. Sed eu dolor eget nulla aliquam interdum. Nunc ante. Mauris nonummy placerat ante. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sed eros. Sed quis sem. Curabitur malesuada libero eu ante. Nulla nec ipsum. In vestibulum tempus orci. In laoreet molestie nisl. Fusce odio nulla, tincidunt vel, placerat nec, sollicitudin et, nulla.</p>
    </div>
</div>

<div>
This is text below the collapsible element, to demonstrate that the element 
actually collapses.
</div>

<p>
The parent and child DIVs in the collapsible segment can now have CSS classes unrelated to the collapsing feature, and it is not overwritten 
(and still works).
</p>

</body>
</html>

A Derivative Work of: PHP Source Code Utility - Version 1.0.0 Copyright © 0php.com 2002.