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