[Proto-Scripty] Hovering Div Shows a Hidden Div - Prototype

[Pixelflips]

I have a few sets of divs that contain three divs set up in the
following way:

<div class="outer-div">
<div class="inner1"></div>
<div class="inner2" style="display:none;"></div>
</div>

<div class="outer-div">
<div class="inner1"></div>
<div class="inner2" style="display:none;"></div>
</div>

<div class="outer-div">
<div class="inner1"></div>
<div class="inner2" style="display:none;"></div>
</div>

I have the second inner div of each hidden via the inline style. What
I am trying to accomplish is that when the outer div of any, or
basically any of the content is hovered over then the inner2 would
appear but only one at a time within the outer-div.

I am unfamilar with Prototype and having a terrible time trying to get
my head around it.

Thanks in advance for any help!!

--
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-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[T.J. Crowder]

Hi,

If I'm understanding you, you want to hide the "inner2" divs, but then
show them if the "outer-div" divs are hovered. The `mouseenter` and
`mouseleave` events can help you with that:

$$('div.outer-div').each(function(div) {
div.observe('mouseenter', function() {
this.down('div.inner2').show();
});
div.observe('mouseleave', function() {
this.down('div.inner2').hide();
});
});

You don't have to worry about two "inner2" divs showing at the same
time unless the "outer-div" divs are overlapping, which I suspect they
aren't, since `mouseleave` will fire to hide the previous one.

What I used there:

$$ to find the outer-divs[1]
Enumerable#each to loop through them[2]
Event#observe (indirectly through Element#observe) to hook up event
handlers[3]
Element#down to find the "inner2" div within the outer div[4]
Element#show[5] and Element#hide[6]

[1] http://api.prototypejs.org/language/dollardollar/ (that link will
only work for a little while, it *should* be http://api.prototypejs.org/dom/dollardollar/
but right now it's wrong)
[2] http://api.prototypejs.org/language/enumerable/prototype/each/
[3] http://api.prototypejs.org/dom/event/observe/
[4] http://api.prototypejs.org/dom/element/down/
[5] http://api.prototypejs.org/dom/element/show/
[6] http://api.prototypejs.org/dom/element/hide/

If you haven't already, it's very, very much worth your time to read
through the entire API front-to-back. It only takes about an hour.

HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com

[Pixelflips]

Thanks so much for your great response and all the links.

I have tried the solution but so far it doesn't seem to work. I will
be reviewing everything on my end to make sure I didn't cause the
problem myself. I will comment again with more info if I cant get it
to work.

Thanks again!!

On May 6, 12:07 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi,
>
> If I'm understanding you, you want to hide the "inner2" divs, but then
> show them if the "outer-div" divs are hovered. The `mouseenter` and
> `mouseleave` events can help you with that:
>
>     $$('div.outer-div').each(function(div) {
>         div.observe('mouseenter', function() {
>             this.down('div.inner2').show();
>         });
>         div.observe('mouseleave', function() {
>             this.down('div.inner2').hide();
>         });
>     });
>
> You don't have to worry about two "inner2" divs showing at the same
> time unless the "outer-div" divs are overlapping, which I suspect they
> aren't, since `mouseleave` will fire to hide the previous one.
>
> What I used there:
>
> $$ to find the outer-divs[1]
> Enumerable#each to loop through them[2]
> Event#observe (indirectly through Element#observe) to hook up event
> handlers[3]
> Element#down to find the "inner2" div within the outer div[4]
> Element#show[5] and Element#hide[6]
>

> [1]http://api.prototypejs.org/language/dollardollar/(that link will
> only work for a little while, it *should* behttp://api.prototypejs.org/dom/dollardollar/

[T.J. Crowder]

No worries, glad to help.

Looking at it again, I did see a substantial inefficiency. This code:

$$('div.outer-div').each(function(div) {
div.observe('mouseenter', function() {
this.down('div.inner2').show();
});
div.observe('mouseleave', function() {
this.down('div.inner2').hide();
});
});

Creates separate functions for *each* div's mouseenter and mouseleave
handlers. There's no reason for that, so:

$$('div.outer-div').each(function(div) {
div.observe('mouseenter', outerDivMouseEnter);
div.observe('mouseleave', outerDivMouseLeave);
});

function outerDivMouseEnter() {
this.down('div.inner2').show();
};

function outerDivMouseLeave() {
this.down('div.inner2').hide();
};

FWIW,

-- T.J. :-)

> > [1]http://api.prototypejs.org/language/dollardollar/(thatlink will