special wiki stuff

Laptops Daddy · **Posted:** Sun Feb 05, 2012 5:11 pm

Quote:

...a collapsable layout for the page. any thoughts?

armor asked me about collapsible items in an html page that shows xml examples. i'll put my thoughts here in case anyone else wants a go.

armor, in principle, there's not a lot to it. something like jquery would take care of click events and dom traversal for us almost automatically:

Code:

$('.xmlclick').click(function() {
    if($(this).html() == '+') {
        $(this).parent().next().hide();
        $(this).html('-');
    }
    else {
        $(this).parent().next().show();
        $(this).html('+');
    }
});

the html side is the problem. you're going to run into a world of cumbersomeness. this is a 'simple' example that excludes styles (syntax highlighting) for attributes and strings:

Code:

<span class="xmltag"><span class="xmlclick">+</span>&lt;accessories&gt;</span>
<span class="xmlcont">
    <span class="xmltag"><span class="xmlclick">+</span>&lt;accessory&gt;</span>
        <span class="xmlcont">
            <span class="xmltag">&lt;armslevel&gt;</span><span class="xmlcont_noclear">9</span><span class="xmltag_close_noclear">&lt;/armslevel&gt;</span>
            <span class="xmltag">&lt;icon&gt;</span><span class="xmlcont_noclear">missile.bmp</span><span class="xmltag_close_noclear">&lt;/icon&gt;</span>
            <span class="xmltag">&lt;bundlesize&gt;</span><span class="xmlcont_noclear">5</span><span class="xmltag_close_noclear">&lt;/bundlesize&gt;</span>
            <span class="xmltag">&lt;cost&gt;</span><span class="xmlcont_noclear">cost</span><span class="xmltag_close_noclear">&lt;/cost&gt;</span>           
        </span>    
    <span class="xmltag_close">&lt;/accessory&gt;</span>
</span>
<span class="xmltag_close">&lt;/accessories&gt;</span>

there are probably a load of different ways you could make it look good, but i cant imagine any that won't leave you bald and with a nicotine habit by the time youre done.

i used floats and clear there to save messing around with line break tags, which'd add complexity to sibling selection.

Code:

.xmltag{
clear: both;
float: left;
color: #AA00BB;
}
.xmltag_close{
clear: both;
float: left;
color: #AA00BB;
margin-left: 16px;
}
.xmltag_close_noclear{
float: left;
color: #AA00BB;
}
.xmlclick{
float: left;
width: 16px;
cursor: pointer;  
}
.xmlcont{
clear: both;
float: left;
margin-left: 32px;
}
.xmlcont_noclear{
float: left;
}

i dont have wiki privs, so i cant check, but i dont expect it'll let you add script to the page, and, usually any code snippets you add will be in 'pre' elements, which'll stop this working.

it's probably a no go all around, but you asked, so...

here's a jsfiddle: http://jsfiddle.net/Rc2uF/

special wiki stuff

Who is online