xoxo-compact-sample: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
No edit summary
 
(reverted spam)
 
(14 intermediate revisions by 6 users not shown)
Line 1: Line 1:
= XOXO 'compact' sample =
= XOXO 'compact' sample =


Sample CSS and JS that demonstrates how to style and dynamically show XOXO outlines subtrees.
Sample CSS and JS that demonstrates how to style and dynamically show [[xoxo|XOXO]] outlines subtrees.


__TOC__
__TOC__
Line 9: Line 9:
* Written by Maciej Stachowiak.
* Written by Maciej Stachowiak.
* Minor validation tweaks by Tantek Çelik.
* Minor validation tweaks by Tantek Çelik.
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.
== Notes ==
This code will currently only work in Safari and other WebKit-based browsers. In Firefox and other Gecko-based browsers, the behavior is right but the layout is wrong because Gecko doesn't handle the negative margin-top properly on generated content. In Opera, it displays properly but does not behave right, because Opera doesn't appear to support attribute selectors. It does not work at all in Internet Explorer (any platform) because IE does not support generated content nor attribute selectors.
Workarounds for other browsers are welcome.


== Markup Sample ==
== Markup Sample ==
Line 15: Line 23:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (C) 2006 Maciej Stachowiak. All rights reserved.
You may redistribute this code freely under Simple BSD
<http://microformats.org/wiki/simple-bsd-license> or CC-by-2.0
<http://creativecommons.org/licenses/by/2.0/> so long as you
preserve the copyright notice.
<html>
<html>
<head>
<head>

Latest revision as of 20:16, 3 January 2009

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.

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

Notes

This code will currently only work in Safari and other WebKit-based browsers. In Firefox and other Gecko-based browsers, the behavior is right but the layout is wrong because Gecko doesn't handle the negative margin-top properly on generated content. In Opera, it displays properly but does not behave right, because Opera doesn't appear to support attribute selectors. It does not work at all in Internet Explorer (any platform) because IE does not support generated content nor attribute selectors.

Workarounds for other browsers are welcome.

Markup Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 

Copyright (C) 2006 Maciej Stachowiak. All rights reserved.

You may redistribute this code freely under Simple BSD 
<http://microformats.org/wiki/simple-bsd-license> or CC-by-2.0 
<http://creativecommons.org/licenses/by/2.0/> so long as you 
preserve the copyright notice.

<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>
Retrieved from "http://microformats.org/wiki/index.php?title=xoxo-compact-sample&oldid=37128"