xoxo-compact-sample: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
No edit summary
 
Line 121: Line 121:
</html>
</html>
</nowiki></pre>
</nowiki></pre>
You may redistribute this code freely under [http://microformats.org/wiki/simple-bsd-license Simple BSD] or [http://creativecommons.org/licenses/by/2.0/ CC-by-2.0] so long as you preserve the copyright notice.

Revision as of 02:43, 27 January 2006

XOXO 'compact' sample

Sample CSS and JS that demonstrates how to style and dynamically show XOXO outlines subtrees.

Contributors

  • Written by Maciej Stachowiak.
  • Minor validation tweaks by Tantek Çelik.

Markup Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

li {
    list-style: none;
}

ul, ol {
    padding-left: 20px;
}

ul[compact="compact"], ol[compact="compact"] {
    top: 0px;
    left: 0px;
    line-height: 0px;
}

ul[compact="compact"] *, ol[compact="compact"] * {
    display: none;
}

li ol:before, li ul:before {
    content: url('http://homepage.mac.com/ctholland/thelab/outlines/img/triangle_down.gif');
    float: left;;
    height: 0px;
    margin-top: -1em;
    margin-left: -40px;
}

li ol[compact="compact"]:before, li ul[compact="compact"]:before {
    content: url('http://homepage.mac.com/ctholland/thelab/outlines/img/triangle.gif');
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
function tickleStyle(e)
{
    var parent = e.parentNode;
    var after = e.nextSibling;
    parent.removeChild(e);
    parent.insertBefore(e, after);
}

function clickHandler(event)
{
    if (event.target != this) {
        return;
    }

    var list = this.firstChild.nextSibling;
    if (list.getAttribute("compact") == "compact") {
        list.removeAttribute("compact");
    } else {
        list.setAttribute("compact", "compact");
    }
    tickleStyle(list);
    event.stopPropagation();
}

function attachClickHandlers()
{
    var uls = document.getElementsByTagName("ul");
    for (var i = 0; i < uls.length; i++) {
        if (uls[i].parentNode.tagName == "LI") {
            uls[i].parentNode.addEventListener("click", clickHandler, false);
        }
    }

    var ols = document.getElementsByTagName("ol");
    for (var i = 0; i < ols.length; i++) {
        if (ols[i].parentNode.tagName == "LI") {
            ols[i].parentNode.addEventListener("click", clickHandler, false);
        }
    }
}
window.addEventListener("load", attachClickHandlers, false);
/*]]>*/
</script>

</head>

<body>

<ul class="xoxo">
<li>First
    <ul>
    <li>Second</li>
    <li>Nested
        <ol compact="compact">
        <li>Items</li>
        <li>Rock</li>
        </ol>
    </li>
    </ul>
</li>
</ul>

</body>
</html>

You may redistribute this code freely under Simple BSD or CC-by-2.0 so long as you preserve the copyright notice.

Retrieved from "http://microformats.org/wiki/index.php?title=xoxo-compact-sample&oldid=4459"