http://langref.net/xhtml<p>Short version:<p>This is what I envisioned as my ideal HTML reference when I was teaching myself web design. I couldn't find something close enough to what I wanted, so I made it and now wonder if anyone else would find it useful.<p>Longer version:<p>This is a side project I've been working on for a little while. The intention was originally to have a complete reference for XHTML that can be viewed as a hierarchy. Starting with a list of all elements, which can be clicked to expand the attributes and other information beneath it. Which can then be clicked to view information beneath them, and so on.<p>As I've gone along I've tried to keep it simple so that it could potentially be used to navigate through other hierarchical information. For example I plan to do other HTML versions and CSS as well, but with some tweaking I think it could be used for non-web design data.<p>It's quite basic at the moment. I have ideas for other features, like being able to resize column widths and an easy way to zoom in and out. Also, some of the descriptions I've added are a bit rushed because I just wanted to see what it would look like finished.<p>Would anyone else find this kind of reference useful? Or have any other thoughts/suggestions?<p>(Note: only tested in Firefox, Opera and IE7. IE messes up the widths.)
You should make the clickable target area larger, i.e. to select the "<a>"-tag I have to click on the little "a"; it would be much easier to just click on the gray box surrounding the "a".<p>Still, I'm not really happy with menus in webpages. It takes several clicks to get the needed information. Maybe you should consider making the information text beyond each tag visible all the time; I'm talking about the "This element defines an anchor..." kind of text. It's always easier just to scroll than having to click.
* the newly expanded columns should line up on top.<p>* the elements should not be pushed lower when a taller child element is introduced. This hides the elements on the left column(s).<p>* to keep a visual track of how I arrived at the current level, set background of the clicked elements to a different colour. This should provide the same functionality provided by point 1 above, without taking away the visual cue.<p>In summary, please take a look at how Apple Finder implements directory browsing using vertical columns.
Very simple and easy to use, I would suggest 2 things though:<p><pre><code> 1. Remove the ajax interface, so it's possible to use the reference offline, also it means you can tell the client to cache the entire thing (as it is static).
2. Abstract the javascript code into a framework that lets you just pass in a heirarchical js array of definitions.
</code></pre>
In fact, it's a perfect idea for a webapp, you provide the interface, and people can plug in their own 'definition' list for whatever they are working on. So if a person is developing an app, he can document the usage of it in a simple js array and plug it in to get a snazzy interface.
The menus are cool but for practical use this kind of reference information is better presented using pre-ajax techniques such as a single page of html (or possibly a frameset) with the appropriate hyperlinking. The way it is now you can't use the browser's text search.<p>You should also add a NOSCRIPT tag with the appropriate message. All I got when I visited your site was a big empty window since I keep JavaScript disabled by default.
dfens, top notch! i've been looking for something more approachable than the w3c spec gooblety-gook for a while now. i've been trying to encourage the ui/html/js/css folks on my project to think about the specs. they come from varied non-engineering backgrounds, so a gentler spec navigation is crucial than scary xml (pasted below for comparison). word.<p><pre><code> <!ENTITY % InputType
"(TEXT | PASSWORD | CHECKBOX |
RADIO | SUBMIT | RESET |
FILE | HIDDEN | IMAGE | BUTTON)"
>
<!-- attribute name required for all but submit and reset -->
<!ELEMENT INPUT - O EMPTY -- form control -->
<!ATTLIST INPUT
%attrs; -- %coreattrs, %i18n, %events --
type %InputType; TEXT -- what kind of widget is needed --
name CDATA #IMPLIED -- submit as part of form --
value CDATA #IMPLIED -- Specify for radio buttons and checkboxes --
checked (checked) #IMPLIED -- for radio buttons and check boxes --
disabled (disabled) #IMPLIED -- unavailable in this context --
readonly (readonly) #IMPLIED -- for text and passwd --
size CDATA #IMPLIED -- specific to each type of field --
maxlength NUMBER #IMPLIED -- max chars for text fields --
src %URI; #IMPLIED -- for fields with images --
alt CDATA #IMPLIED -- short description --
usemap %URI; #IMPLIED -- use client-side image map --
ismap (ismap) #IMPLIED -- use server-side image map --
tabindex NUMBER #IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
onselect %Script; #IMPLIED -- some text was selected --
onchange %Script; #IMPLIED -- the element value was changed --
accept %ContentTypes; #IMPLIED -- list of MIME types for file upload --
>
"</code></pre>
really really awesome. Thoughts:<p>* allow us to link to exact references<p>* when you click a link (eg "title") - make it scroll the page so the entire <i>next</i> menu is on screen.<p>* enlarge the buttons that can be clicked, add a rollover color.<p>* change the tags " " blank dropdown to "all" - also when selection "all" it should reset the menus<p>* I think it'd be handy to somehow a "go to top" button on the page somewhere - scroll to "var" then try look up "a" faff :)<p>* also clicking the "Elements" box at the top should reset menu<p>* can you make the example box wider? (and more of them, they're awesome!)
I think it's useful, it reminds me of <a href="http://www.visualjquery.com/" rel="nofollow">http://www.visualjquery.com/</a>.<p>The cascade-on-select on langref seems a little clunkier.