By sunslayer on Apr 05, 2012this is an example of how to make a treeview without the use of javascript.
image files located here - Example
example html:
<section id="treeview">
<article>First Item</article>
<article>
<input type="checkbox" class="treeview" id="item2" /><label for="item2">Second Item</label>
<article>Child one</article>
<article>Child two</article>
<article>
<input type="checkbox" class="treeview" id="nested1" checked /><label for="nested1">Nested Parent 1</label>
<article>Nested Item 1</article>
</article>
</article>
<article>
<input type="checkbox" class="treeview" id="item3" disabled /><label for="item3">This treeview</label>
<article>is disabled</article>
</article>
</section>
note: the ID attribute for the input/label pairs must be identical and unique
adding a checked attribute to the input element will make it expand by default and the disabled attribute will disable toggling for that list
#treeview article * { padding-left: 10px; }
#treeview article *:not(:nth-child(2)) { margin-left: 10px; }
.treeview { display: none; }
.treeview:checked + label { background: URL("plus.png") left center no-repeat; }
.treeview:not(:checked) ~ label { background: URL("minus.png") left center no-repeat; }
.treeview:checked ~ *:not(:nth-child(2)) { display: none; }
.treeview:disabled ~ * { color: #707070; }
@gooshie You should try Chrome. I recently switched and really like it. The problem with IE8 is that it doesn't support CSS fully and has a lot of quirks. IE9 has much better support and will generally make the internet look nicer. Many webmasters are using the newer styling techniques that only IE9, Firefox, Safari and Chrome support. For example the buttons here on Hawkee won't appear rounded on IE8 as they should.
I couldn't duplicate the issue you described with the arrow key, but if it's only an IE8 issue it probably isn't worth addressing as only 6% of our users are still on IE8.
Anyway, good story.
Hawkee,
Yes, I'm on IE8 mainly because IE9 bites the big one.
I also have FF11 installed but on windows IE is my 'goto'
I wish FF would handle search engines and favorites like
IE does. Strike that last comment before a holy war erupts... again...
Yes, you did get it fixed for IE8 and it looks great! I'm worried tho
how it will be when someone post 1,000 lines of code and the first
many lines are longer than the window and we have to scroll.
OIC, I can just click on the line and [key=>] over to it.
BTW, that one shows like lots of extra space after the longest
line that could make you feel like there is a long line hiding somewhere.
Don't mean to be overly picky but while we got you on this and it's
fresh in your mind best to give you feed back now I hope..
Note: I was fixing a gals computer and during the conversation she asked
me if i was on facebook and I replied, "no, I'm on Hawee.com which is like
facebook for computer nerds... instead of posting pictures of getting drunk
and writing goofy crap about snooky and the situation we post screenshots
of programs and code we create on our computers and write tutorials on
how to use and modify the code." I do not understand why but then she asked
me if I was seeing anyone to which I replied enthusiastically, "Not when I take
my medication!" I never did figure out why she had such an interrest in my
hallucinations.
@sunslayer I found a hack for IE8 that fixes the max-height problem, so I was able to get the max-height back in there for people with more modern browsers.
sunslayer,
Nice! Thanks, I am needing some type menus about now.
Hawkee,
I like the new code blocks and hope you are thinking how to set the height/length
based on number of lines so you dont have a verticle scroll and not so much empty
space. A line or two more than needed would be nice up to like maybe one hundred
lines of code at which point you get the verticle scroll bar. Or much better would be
that the maximum size is about same as browser height as its tough to have to scroll
both ways if the code block is too much larger than available space. That part of the
original design was not really bad before. I do however like the addition of multiple
blocks exactly for code like what sunslayer posted here. Also of course the line numbers
are GREAT idea and will make referencing code sections easier. Syntax highlighting for
a seemingly infinite number of languages.... good luck with that... wouldnt want to be you..
LOL
@sunslayer Very good. I'm considering offering an iframe for demos such as this. Jsfiddle has a very easy way to embed a demo.
