As usual, I should have added "but Kangax probably does this in one
line of code". :)

On Sep 17, 5:32 am, Matt <[EMAIL PROTECTED]> wrote:
> On Sep 16, 5:29 pm, Diodeus <[EMAIL PROTECTED]> wrote:
>
>
>
> > One way would be to grab the nodes, use a loop, and skip over the
> > element that has the special class.
>
> > Something like this:
>
> > <div id='container'>
> >         <div>X</div>
> >         <div>X</div>
> >         <div class='special'>don't hide me</div>
> >         <div>X</div>
> > </div>
> > <a href='javascript://' onclick='hideExcept("special")'>hide most</a>
> > <script type="text/javascript">
> > function hideExcept(notMe) {
> >         myNodes = $('container').select('div')
> >         for(x=0;x<myNodes.length;x++) {
> >                 if(!$(myNodes[x]).hasClassName(notMe)) {
> >                         Element.hide(myNodes[x])
> >                 }
> >         }}
>
> > </script>
>
> Thanks for this. I've had some success, but also some new issues.
> Here's my function - it's supposed to show a child box and shrink its
> parent, as well as shrink other boxes on the same level as the parent,
> but smaller. Essentially, say you have three boxes on level 1 and you
> click box 3, I want the script to then shrink box 1 and 2 to 20% and
> shrink box 3 to 30% (so you know which one was clicked) and then
> display a new box that's a child of box3.
>
> function showBox(boxToShow, boxToHide)
> {
>
>         // hide any existing level 2 box containers
>         Element.hide('level2');
>
>         // show the relevant box in a fancy way
>         Effect.toggle(boxToShow, 'appear');
>         new Effect.Grow(boxToShow, 120);
>
>         myNodes = $('level1').select('div') // grab all divs inside
> 'container'
>         for(x=0;x<myNodes.length;x++) { // loop through each div
>                 if(!$(myNodes[x]).hasClassName(boxToHide)) { // if class is 
> called
> in function name, don't hide it
>                         new Effect.Scale(myNodes[x], 30, {scaleX: true, 
> scaleY: true,
> scaleContent: false}); // scales everything except boxToHide
>                 }
>         }
>
>         // shrink the parent box down too, but not as much
>         new Effect.Scale(boxToHide,40,{scaleX: true, scaleY: true,
> scaleContent: false});
>
> }
>
> I'm calling the function like this:
>
> <div class="box green 1A"> <a href="javascript://"
> onclick="showBox('level2a', this.parentNode)">
> <div class="box green 1B"> <a href="javascript://"
> onclick="showBox('level2b', this.parentNode)">
>
> The end result is that when clicking on the first box, div 1A shrinks
> to 40% and div 1B shrinks to 30%, but when clicking the second box,
> they scale down properly (with div 1B remaining 10% bigger than div 1A
> but then when the animation ends, div 1B flickers down to 30% so it's
> the same size as 1A still. I've probably made this more complex
> sounding than it is, but does anyone have any ideas?
>
> 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