Oh and I just had another thought. I have multiple instances of the same html. Around 10 I think. So like:
<div class="recent-question"> <img src="images/new/img-sample.gif" alt="" width="70" height="60" /> <div class="question-text"> <h3>Heading</h3> <p><a href="#">Yadda Yadda Yadda</p> </div> <div class="interact" style="display:none;"> <ul> <li><a href="#">Choice1</a></li> <li><a href="#">Choice2</a></li> <li><a href="#">Choice3</a></li> </ul> </div> </div> <div class="recent-question"> <img src="images/new/img-sample.gif" alt="" width="70" height="60" /> <div class="question-text"> <h3>Heading</h3> <p><a href="#">Yadda Yadda Yadda</p> </div> <div class="interact" style="display:none;"> <ul> <li><a href="#">Choice1</a></li> <li><a href="#">Choice2</a></li> <li><a href="#">Choice3</a></li> </ul> </div> </div> <div class="recent-question"> <img src="images/new/img-sample.gif" alt="" width="70" height="60" /> <div class="question-text"> <h3>Heading</h3> <p><a href="#">Yadda Yadda Yadda</p> </div> <div class="interact" style="display:none;"> <ul> <li><a href="#">Choice1</a></li> <li><a href="#">Choice2</a></li> <li><a href="#">Choice3</a></li> </ul> </div> </div> <div class="recent-question"> <img src="images/new/img-sample.gif" alt="" width="70" height="60" /> <div class="question-text"> <h3>Heading</h3> <p><a href="#">Yadda Yadda Yadda</p> </div> <div class="interact" style="display:none;"> <ul> <li><a href="#">Choice1</a></li> <li><a href="#">Choice2</a></li> <li><a href="#">Choice3</a></li> </ul> </div> </div> And so on... Would that cause any issues? On May 7, 10:28 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote: > Hi, > > Haven't we already been talking about this over > here?http://groups.google.com/group/prototype-scriptaculous/browse_thread/... > > Here's a rough, untested translation -- but again, there is no > substitute for sitting down and reading the API[1] front to back. It > really does not take very long. > > document.observe("dom:loaded", function(){ > > // Hook up handlers for `mouseenter` and `mouseleave` > $$(".recent-question").each(function(element) { > element.observe('mouseenter', recentQuestionEnter); > element.observe('mouseleave', recentQuestionLeave); > }); > > // The `mouseenter` handler > function recentQuestionEnter() { > // Call script.aculo.us' #appear on each child .interact > element > this.select(".interact").invoke('appear', {duration: 2.0}); > } > > // The `mouseleave` handler > function recentQuestionLeave() { > // Call script.aculo.us' #fade on each child .interact element > this.select(".interact").invoke('fade', {duration: 2.0}); > } > > }); > > That uses these Prototype functions > * document.observe > * $$ > * Enumerable#each > * Element#observe (which is just a wrapper for Event.observe) > * Element#select > * Enumerable#invoke > > ...and these script.aculo.us functions: > * Effect.Appear (as Element#appear)[2] > * Effect.Fade (as Element#fade)[3] > > [1]http://api.prototypejs.org > [2]http://wiki.github.com/madrobby/scriptaculous/effect-appear > [3]http://wiki.github.com/madrobby/scriptaculous/effect-fade > > HTH, > -- > T.J. Crowder > Independent Software Consultant > tj / crowder software / comwww.crowdersoftware.com > > On May 7, 6:04 pm, Pixelflips <philliplovel...@gmail.com> wrote: > > > > > I may get killed for this but I have been trying for a few days using > > Prototype to show a hidden div when hovering over another div. I have > > this working fine in jquery but I could use some help porting it over > > to prototype. > > > The code sample: > > > <script type="text/javascript"> > > $(document).ready(function(){ > > $(".recent-question").hover(function(){ > > $(this).find(".interact").fadeIn(2.0); > > }, function(){ > > $(this).find(".interact").fadeOut(2.0); > > });}); > > > </script> > > > <div class="recent-question"> > > <img src="images/new/img-sample.gif" alt="" width="70" height="60" /> > > <div class="question-text"> > > <h3>Heading</h3> > > <p><a href="#">Yadda Yadda Yadda</p> > > </div> > > <div class="interact" style="display:none;"> > > <ul> > > <li><a href="#">Choice1</a></li> > > <li><a href="#">Choice2</a></li> > > <li><a href="#">Choice3</a></li> > > </ul> > > </div> > > </div> > > > So basically when I hover over a recent-question div i would like the > > div.interact to fade in or appear at all. The above code is for jquery > > but I am required to use prototype for this project. Any help would be > > greatly appreciated. > > > Thanks! > > > -- > > 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-scriptacul...@googlegroups.com. > > To unsubscribe from this group, send email to > > prototype-scriptaculous+unsubscr...@googlegroups.com. > > 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 prototype-scriptacul...@googlegroups.com. > To unsubscribe from this group, send email to > prototype-scriptaculous+unsubscr...@googlegroups.com. > 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 prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.