Mouse-over delete button

[Adonix]

Hi,

I am wondering if it is possible, with Prototype, to have something
like what Facebook does: When you mouse-over a post on your 'wall', a
little 'x' appears on the top right of that post to delete it. So
basically, i have a table consisting of a bunch of rows, and on the
top right i want to have a small delete button.

Right now i have all these buttons hardcoded in html, but it would be
nicer to just move them to the mouse-over thing to clear up some
space. I have no idea what the technique is called, so i hope i worded
it correctly :)

Are there any examples out there on how to do this?

[Jarkko Laine]

It is possible using the onmouseover event, but personally I would just use CSS for it:

.row .delete { display: none; }
.row:hover .delete { display: block; }

This doesn't work reliably in ie6 but there are several hacks around it (http://www.xs4all.nl/~peterned/csshover.html, http://dean.edwards.name/IE7/ for example).

--
Jarkko Laine
http://jlaine.net
http://notkea.fi
http://odesign.fi

Check out my latest book, Unobtrusive Prototype, fresh off the Peepcode oven:
http://peepcode.com/products/unobtrusive-prototype-js

[Julien Lenne]

Hello,

Personnaly, I like to use CSS only as soon as possible. But when the
behaviour differs depending on the browser, I'd rather use a generic
solution.

As said before, you must use the "onmouseover" event, in which you use
the "show()" method, and with "onmouseout" event, the "hide()" method.
Prototype handles this very well AFAIK.

Some help on the events observers : http://api.prototypejs.org/dom/Event/

Regards,
Julien.

On 6 mai, 09:20, Jarkko Laine <jar...@jlaine.net> wrote:
> On 6.5.2011, at 0.12, Adonix wrote:
>
> > Hi,
>
> > I am wondering if it is possible, with Prototype, to have something
> > like what Facebook does: When you mouse-over a post on your 'wall', a
> > little 'x' appears on the top right of that post to delete it. So
> > basically, i have a table consisting of a bunch of rows, and on the
> > top right i want to have a small delete button.
>
> > Right now i have all these buttons hardcoded in html, but it would be
> > nicer to just move them to the mouse-over thing to clear up some
> > space. I have no idea what the technique is called, so i hope i worded
> > it correctly :)
>
> It is possible using the onmouseover event, but personally I would just use CSS for it:
>
> .row .delete { display: none; }
> .row:hover .delete { display: block; }
>
> This doesn't work reliably in ie6 but there are several hacks around it (http://www.xs4all.nl/~peterned/csshover.html,http://dean.edwards.name/IE7/for example).
>
> --

> Jarkko Lainehttp://jlaine.nethttp://notkea.fihttp://odesign.fi

[Eric]

Hello,

On May 6, 9:35 am, Julien Lenne <tyrsen...@gmail.com> wrote:
> Hello,
>
> Personnaly, I like to use CSS only as soon as possible. But when the
> behaviour differs depending on the browser, I'd rather use a generic
> solution.

Unless you want to support IE6 or below, CSS's :hover pseudo class is
portable enough.

> As said before, you must use the "onmouseover" event, in which you use
> the "show()" method, and with "onmouseout" event, the "hide()" method.
> Prototype handles this very well AFAIK.

If you really want to use Javascript, you'd better implement your
own :hover pseudo class :
- observe on the whole document the mouseover, and when it is trigered
by a TR, add a custom class to it
- same thing for the mouseout to remove the custom class
- on your CSS, have something like this:
.row .delete { display: none; }
.row.myHoverCustomClass .delete { display: block; }

This way you only have one event handler and you don't have to create/
release a new one every time you add/remove a line to your table.

Some thoughts :
- If you use prototype 1.7, the "on" method will make your life easy
(http://api.prototypejs.org/dom/Event/on/)
- As I said, this is an overkill solution who is useless unless your
application is used in China or South Korea (http://
www.theie6countdown.com). IMHO, it wont hurt people using IE6 if the
delete button doesn't disappear when the mouse is not hover the line
(they're probably used to website looking bad)
- You may prefer using CSS's "visibility" instead of "display" to
avoid your page layout changing on mouseover (it depends of how your
page is made)
- You may observe only the table instead of the document if your table
is always in the DOM.

Kind regards,
Eric

>
> Some help on the events observers :http://api.prototypejs.org/dom/Event/
>
> Regards,
> Julien.
>
> On 6 mai, 09:20, Jarkko Laine <jar...@jlaine.net> wrote:
>
> > On 6.5.2011, at 0.12, Adonix wrote:
>
> > > Hi,
>
> > > I am wondering if it is possible, with Prototype, to have something
> > > like what Facebook does: When you mouse-over a post on your 'wall', a
> > > little 'x' appears on the top right of that post to delete it. So
> > > basically, i have a table consisting of a bunch of rows, and on the
> > > top right i want to have a small delete button.
>
> > > Right now i have all these buttons hardcoded in html, but it would be
> > > nicer to just move them to the mouse-over thing to clear up some
> > > space. I have no idea what the technique is called, so i hope i worded
> > > it correctly :)
>
> > It is possible using the onmouseover event, but personally I would just use CSS for it:
>
> > .row .delete { display: none; }
> > .row:hover .delete { display: block; }
>

> > This doesn't work reliably in ie6 but there are several hacks around it (http://www.xs4all.nl/~peterned/csshover.html,http://dean.edwards.name...example).