Hi,

> I've been playin around the couple of days and came up with a solution
> in jQuery (see code below).

Right, because jQuery's `hover` is just a wrapper[1] around hooking up
handlers for the events I pointed you at, `mouseenter` and
`mouseleave` (which jQuery, like Prototype, provides for you on
browsers that don't support them natively). The equivalent Prototype
is:

var list = $$(li);
list.invoke('observe', 'mouseenter', function() {
    this.down("span:first").show();
});
list.invoke('observe', 'mouseleave', function() {
    this.down("span:last").hide();
});

...although I'm a bit perplexed by why your selector is span:first
when showing and span:last when hiding...

[1] http://api.jquery.com/hover/
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com

On Apr 16, 2:17 pm, Jermaine <jermaine2...@gmail.com> wrote:
> @T.J: Thanks for the insights. I was already familiar with the css
> only solution. But unfortunately I have to support IE6 for my users.
> I've been playin around the couple of days and came up with a solution
> in jQuery (see code below). It also works perfectly fine in IE6.
>
> Just paste the code below in your texteditor and fire it up in your
> browser to see how it works... pretty straightforward stuff.
>
> Now I'm looking for a way to port this code to Prototype. Can anyone
> help?
>
> <!DOCTYPE html>
> <html>
> <head>
>   <script src="http://code.jquery.com/jquery-latest.js";></script>
> </head>
> <body>
>         <ul>
>     <li>Foo  <span style="display:none"> <a href="#">Bar</a></span></
> li>
>     <li>Foo  <span style="display:none"> <a href="#">Bar</a></span></
> li>
>     <li>Foo  <span style="display:none"> <a href="#">Bar</a></span></
> li>
>     <li>Foo  <span style="display:none"> <a href="#">Bar</a></span></
> li>
>   </ul>
>
> <script>
> $("li").hover(
>   function () {
>    $(this).find("span:first").css("display", "inline");
>   },
>   function () {
>     $(this).find("span:last").css("display", "none");
>   }
> );
> </script>
> </body>
> </html>
>
> On 14 apr, 12:15, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
>
>
>
>
>
> > Hi again,
>
> > > 3. Unless you have to support IE6...
>
> > You could get the wrong impression from that statement, so just to
> > clarify, I'm not suggesting you *don't* have to support IE6. IE6 still
> > (!) has about 18% of the general market share[1], so despite Google's
> > recent moves (which I hope work!), publicly-facing websites still need
> > to think very hard about supporting IE6. I'm just saying, for apps
> > where you don't have to worry about it (intranets where the company
> > has upgraded; or you believe that your audience for whatever reason is
> > more likely than most to have upgraded [programmming websites, for
> > instance], etc.), it's nice that IE7+ and all the other major browsers
> > support the :hover pseudo-class. :-)
>
> > [1]http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2
>
> > -- T.J.
>
> > On Apr 14, 11:10 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
>
> > > Hi,
>
> > > `mouseover` and `mouseout` event bubble, and so when the mouse travels
> > > over descendant elements of the element you're watching on, you get
> > > `mouseover`s and `mouseout`s related to those descendant elements.
> > > (This can be very handy, if you're using event delegation, but as
> > > you're watching for the events on every row, it's messing up your
> > > logic.)
>
> > > You can solve this in three ways:
>
> > > 1. Use event delegation and watch for the events using handlers on
> > > just one element (probably the table) and keep track of which row is
> > > hovered in your handler logic. This has the advantage that you can add
> > > and remove rows without worrying about hooking up and unhooking
> > > handlers.
>
> > > 2. Use the `mouseenter` and `mouseleave` events instead. These are IE-
> > > specific events that do *not* bubble, designed specifically for your
> > > use case. Prototype kindly implements these events for you on browsers
> > > other than IE. I think if you just change your code to use these
> > > events, it'll suddenly start working, but I haven't read through it
> > > very carefully to be sure.
>
> > > 3. Unless you have to support IE6, you can do this entirely with CSS;
> > > no JavaScript required at all:
>
> > > tr.hover_area a {
> > >     display: none;}
>
> > > tr.hover_area:hover a {
> > >     display: inline;
>
> > > }
>
> > > HTH,
> > > --
> > > T.J. Crowder
> > > Independent Software Consultant
> > > tj / crowder software / comwww.crowdersoftware.com
>
> > > On Apr 14, 10:52 am, Jermaine <jermaine2...@gmail.com> wrote:
>
> > > > Hello Everyone,
>
> > > > I'm trying to show/hide hyperlinks with Prototypejs whenever a user
> > > > would hover a table row.
> > > > The code that I've put together, works. You can paste it in and see it
> > > > in action.
>
> > > > The problem however, when I hover the table row the link becomes
> > > > visible, but when I try to hover on that link, It disappears again.
> > > > Pretty annoying.
>
> > > > Any idea what I'm doing wrong here?
>
> > > > <html>
> > > >     <head>
> > > >         <title>Show link on mouseover</title>
> > > >         <script type="text/javascript"
> > > >                 src="http://ajax.googleapis.com/ajax/libs/prototype/
> > > > 1.6.0.2/prototype.js">
> > > >        </script>
>
> > > >        <style type="text/css">
> > > >             table {width:100%;}
> > > >             td {border-bottom:1px solid #000;}
> > > >         </style>
>
> > > >     </head>
> > > >     <body>
>
> > > >       <table>
> > > >           <tr class="hover_area">
> > > >               <td>
> > > >                  Foo: <span style="display:none"><a href="#">Bar</a></
> > > > span>
> > > >               </td>
> > > >           </tr>
> > > >           <tr class="hover_area">
> > > >               <td>
> > > >                   Foo: <span style="display:none"><a href="#">Bar</a></
> > > > span>
> > > >               </td>
> > > >           </tr>
> > > >       </table>
>
> > > > <script type="text/javascript">
>
> > > > function show_link(event) {
> > > >  var elem = event.element().down('span').show();
>
> > > > }
>
> > > > function hide_link(event) {
> > > >  var elem = event.element().down('span').hide();
>
> > > > }
>
> > > > Event.observe(window, 'load', function() {
>
> > > >    $$(".hover_area").each(function(elem) {
> > > >                 elem.observe('mouseover', show_link);
> > > >         });
>
> > > >         $$(".hover_area").each(function(elem) {
> > > >                 elem.observe('mouseout', hide_link);
> > > >         });
>
> > > > });
>
> > > > </script>
>
> > > > </body>
> > > > </html>
>
> --
> 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