Thanks for the speedy reply!
I'm using Firebug actually, it's invaluable for this kind of thing,
but I didn't know about the log/console function - thanks.
I tried out your code like so:
// hide other boxes
$$('.box').each(function(node) { if(!node.id == newBox)
node.hide(); });
// show the relevant box
new Effect.Grow(newBox, 120);
This has slightly better results but now when I click the first box,
its children display, then I click the second box, and its children
appear below the first box's children. It seems like they're not being
hidden by the function. I used inline CSS to hide the boxes, so it
shouldn't be that - each child <div> has a 'box' class, so I'm stumped
as to what's causing it.
Thanks
Matt
On Sep 18, 2:25 pm, bluezehn <[EMAIL PROTECTED]> wrote:
> You should set style="display:none;" in the actual html rather than
> the css for it to be compatible with prototype.
>
> Your code at the bottom is very confusing at the moment as well. It's
> saying, toggle-fade the box and grow it (at the same time). I'd just
> go for Element#hide(), Effect.Grow(....).
>
> I've also rewritten the first part of your code, you can see what each
> bit is doing I'm sure, any q's let me know. Oh and it sounds like you
> don't have Firebug. Firebug, a firefox extension, is a lifesaver when
> it comes to JS. I really mean that - an absolute lifesaver. You can
> use console.log('string') in your scripts and it will print stuff to
> the console. Firebug will also give you details of any interpretation
> errors in your code. Chances are, you run this with Firebug, it tells
> you exactly what's going wrong.
>
> Anyway, so the ugly first block can actually be condensed down to
> this:
>
> // hide all childLevel box sets in case of previous clicks
> $('childLevel').select('div').each(function(node) { if(!
> node.hasClassName(newBox)) node.hide(); });
>
> Can I also suggest that you use id's to reference each individual box
> rather than separate class names - semantically it's better if a class
> name only ever refers to one node for that to instead be the node's
> id. Then all nodes can have classname "box" or something, which again
> makes things easier:
>
> $$('.box').each(function(node) { if(!node.id == newBox)
> node.hide(); });
>
> On Sep 18, 2:13 pm, Matt <[EMAIL PROTECTED]> wrote:
>
> > Hopefully this is an easy one...
>
> > I'm building a multi-level navigation system. You click on one box and
> > a set of sub-boxes displays underneath. Since there are multiple
> > possible sets of sub-boxes, I've tried to write a function to hide
> > them and only display the relevant one. Here's some code:
>
> > // hide all childLevel box sets in case of previous clicks
> > myNodes = $(childLevel).select('div'); // grab all box sets inside
> > childLevel
> > for(x=0;x<myNodes.length;x++) { // loop through each div
> > if(!$(myNodes[x]).hasClassName(newBox)) {
> > // hides everything except newBox
> > Element.hide(myNodes[x]);
> > }
> > }
>
> > // show the relevant box
> > new Effect.toggle(newBox, 'appear');
> > new Effect.Grow(newBox, 120);
>
> > In my page, I call the above code in order to show a div with the
> > newBox class and hide all the others, in case the user has already
> > selected one box (and thus displayed its children). When I click a box
> > for the first time, its children are displayed, but when I click a
> > different box, the first box's children disappear but nothing else
> > shows up. All the possible children are set to display:none and I know
> > Prototype has issues with this - can anyone advise me on how to get
> > this to work?
>
> > Thanks
> > Matt
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
