Hi,

Haven't we already been talking about this over here?
http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/62de3b97abd9a6b8

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 / com
www.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 at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to