That was it - I should have spotted it, sorry. Thank you so much, this
has really pulled me out of a rut!

Matt

On Sep 18, 2:46 pm, bluezehn <[EMAIL PROTECTED]> wrote:
> Well I think it may be this:
>
> if(!node.id == newBox)
>
> which should be this:
>
> if(node.id != newBox)
>
> other wise use console.log debugs to sort out whether or not
> the .each() loop is firing for every element, if it's passing the
> above if conditional etc. Essentially work out which line is wrong by
> printing out node.id at appropriate spots and go from there.
>
> On Sep 18, 2:40 pm, Matt <[EMAIL PROTECTED]> wrote:
>
> > 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 prototype-scriptaculous@googlegroups.com
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
-~----------~----~----~----~------~----~------~--~---

Reply via email to