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 <philliplovel...@gmail.com> 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" <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 
> 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.

Reply via email to