2008/9/17 Diodeus <[EMAIL PROTECTED]>

>
> 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
> >
>
Its disgusting what Kangax can do in 1 line!

-- 
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

--~--~---------~--~----~------------~-------~--~----~
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