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