Hi, > I have multiple instances of the same html. Around 10 I think. So > like:
No, both your jQuery and my translation handle that. > I have > tried the awesome solution you put together and while I don't get any > errors, I also don't get any action on the page. Can you put together a self-contained, minimalist test case?[1] (See the link for what I mean, and the rationale.) [1] http://proto-scripty.wikidot.com/self-contained-test-page HTH, -- T.J. Crowder Independent Software Consultant tj / crowder software / com www.crowdersoftware.com On May 7, 7:37 pm, Pixelflips <[email protected]> wrote: > 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" <[email protected]> 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 <[email protected]> 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 > > > [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.
