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