> Are there any guides to the style of markup and coding that Prototype
> assumes?

Prototype doesn't assume or require any markup or particular coding
style.  Just about the only thing Prototype requires is that you
declare a doctype in your document so IE behaves (vaguely) correctly.

What I was pointing out on the UL thing is that you currently have
this structure:


...which means you have a UL as a *direct child* of a UL, which is not
valid HTML (see the previous validator link).

As for the other, all I was saying was that if doc.gif could be the
background image on the LI rather than inline content, it would reduce
the size of your markup and it would mean that the only content in the
LI was the content you wanted to edit -- and so you could do that
directly.  Your original idea of using SPANs will work fine if there's
other stuff in the LI you don't want to edit.

T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

On Mar 14, 6:18 pm, "P. Douglas Reeder" <reeder...@gmail.com> wrote:
> I'm not clear on what you're suggesting I do with the <ul> elements
> inside <li> elements -- Element#update would replace them, and if you
> move the <ul> elements outside the <li> elements it's no longer valid
> HTML (as I think you meant).
> I should have noted that elements with the class "toggle" are used to
> open and close (expand and contract) items in the tree.  They don't
> have to be images, but some tag in each <li> has to be usable to open
> and close items.
> Are there any guides to the style of markup and coding that Prototype
> assumes?  The API docs cover what each function does individually, and
> contain some useful examples, but it's far from clear how to use
> different parts of Prototype together.
> On Mar 14, 6:38 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> > Another option would be to
> > remove those images from within the list items; instead, make them the
> > background graphic on the li.  E.g., this:
> > <li><img class='toggle' src="doc.gif" alt="">Tags, Tags, Tags</li>
> > becomes:
> > <li>Tags, Tags, Tags</li>
> ...
> > That lets you use Element#update on the li element directly without
> > having to worry about the image, as well as saving you a fair bit of
> > repeated markup.  Another nice thing about using background images for
> > this sort of thing is that you can toggle the image easily by changing
> > the class of the li -- for instance, to show plus.gif or minus.gif
> > depending on whether things are expanded.  Downside (you knew there'd
> > be one) is that the background image can't take focus for the purposes
> > of keyboard navigation.  There are ways to handle that, though.  In a
> > lightweight tree I did recently, I was able to make the first line of
> > the node a link that also did the expand/contract, for instance, which
> > provided a nice big mouse target and also a keyboard mechanism.
> > Obviously your click-and-edit means you wouldn't do quite the same
> > thing in this case, but FWIW...
> > (An OT point: I'm not at all sure UL is allowed as a direct child of
> > UL; certainly not in XHTML transitional.  Might be worth rejigging a
> > bit.  http://validator.w3.org/isuseful.)
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to