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. :-)
On May 6, 4:51 pm, Pixelflips <[email protected]> wrote:
> 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" <[email protected]> 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/(thatlink will
> > only work for a little while, it *should*
> > behttp://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 / comwww.crowdersoftware.com
>
> > On May 6, 2:05 am, Pixelflips <[email protected]> wrote:
>
> > > 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
> > > [email protected].
> > > To unsubscribe from this group, send email to
> > > [email protected].
> > > For more options, visit this group
> > > athttp://groups.google.com/group/prototype-scriptaculous?hl=en.
>
> > --
> > 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
> > [email protected].
> > To unsubscribe from this group, send email to
> > [email protected].
> > For more options, visit this group
> > athttp://groups.google.com/group/prototype-scriptaculous?hl=en.
>
> --
> 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 [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group
> athttp://groups.google.com/group/prototype-scriptaculous?hl=en.
--
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 [email protected].
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.
