You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by rahmoune patrick <js...@yahoo.fr> on 2006/07/24 23:43:55 UTC
Datatable and highlighting
Hi all,
I'm facing a problem with t:dataTable and highlighting
I have a t:dataTable with rowClasses="standardTable_Row1,standardTable_Row2" and would like to add highlighting
when the mouse goes over every row.
My first idea was to add some javascript on the onMouseOver/onMouseOut that changes the css class.
The pb in that I'm unable to restaure the old css class.
Another bad idea was to find a place to store the old css class name
Something like
rowOnMouseOver="this.title = this.className; this.className='highlighted';"
rowOnMouseOut="this.className = this.title;"
It works but a tooltip is displayed with the css class name :-).
Does someone have this problem? Do I have to store this in something like a hashmap index by the TR, or an array with index? How to generate the index?
Thank you for any help.
patrick
Re : Datatable and highlighting
Posted by rahmoune patrick <js...@yahoo.fr>.
Thank you tonio, this is the idea I have done.
----- Message d'origine ----
De : Tonio Caputo <to...@exeo.com.ar>
À : rahmoune patrick <js...@yahoo.fr>
Cc : users@myfaces.apache.org
Envoyé le : Mardi, 25 Juillet 2006, 12h23mn 23s
Objet : Re: Datatable and highlighting
Hi Patrick,
I use the javascript I send you below, hope it helps.
I know there is a MyFaces Extension that let you
set the onmouseover event for rows, but I don't
remember the exact name.
dt-row-hover -> is my CSS class for highlighting a row.
comp -> is the table row, or whatever component you like
I am not a javascript expert, but I may say a dummy
javascript user, so I won't be able to help you much more.
Hope it helps as it is, it works for me.
Tonio.
//------------------------------------------------------------------
// Provide hover and click effect to entire table rows.
// Usage:
// <table class="grid">
// <tr href="somelink.jsp" onmouseover="rowHover(this)">
// ...
//-----------------------------------------------------------------
function rowHover(comp)
{
comp.oldClassName = comp.className;
comp.className = 'dt-row-hover';
comp.onmouseout = function() {
this.className = this.oldClassName;
}
}
On Mon, 2006-07-24 at 21:43 +0000, rahmoune patrick wrote:
> Hi all,
>
> I'm facing a problem with t:dataTable and highlighting
>
> I have a t:dataTable with
> rowClasses="standardTable_Row1,standardTable_Row2" and would like to
> add highlighting
> when the mouse goes over every row.
>
> My first idea was to add some javascript on the onMouseOver/onMouseOut
> that changes the css class.
>
> The pb in that I'm unable to restaure the old css class.
>
> Another bad idea was to find a place to store the old css class name
>
> Something like
>
> rowOnMouseOver="this.title = this.className;
> this.className='highlighted';"
> rowOnMouseOut="this.className = this.title;"
>
> It works but a tooltip is displayed with the css class name :-).
>
> Does someone have this problem? Do I have to store this in something
> like a hashmap index by the TR, or an array with index? How to
> generate the index?
>
> Thank you for any help.
>
> patrick
>
Re: Datatable and highlighting
Posted by Tonio Caputo <to...@exeo.com.ar>.
Hi Patrick,
I use the javascript I send you below, hope it helps.
I know there is a MyFaces Extension that let you
set the onmouseover event for rows, but I don't
remember the exact name.
dt-row-hover -> is my CSS class for highlighting a row.
comp -> is the table row, or whatever component you like
I am not a javascript expert, but I may say a dummy
javascript user, so I won't be able to help you much more.
Hope it helps as it is, it works for me.
Tonio.
//------------------------------------------------------------------
// Provide hover and click effect to entire table rows.
// Usage:
// <table class="grid">
// <tr href="somelink.jsp" onmouseover="rowHover(this)">
// ...
//-----------------------------------------------------------------
function rowHover(comp)
{
comp.oldClassName = comp.className;
comp.className = 'dt-row-hover';
comp.onmouseout = function() {
this.className = this.oldClassName;
}
}
On Mon, 2006-07-24 at 21:43 +0000, rahmoune patrick wrote:
> Hi all,
>
> I'm facing a problem with t:dataTable and highlighting
>
> I have a t:dataTable with
> rowClasses="standardTable_Row1,standardTable_Row2" and would like to
> add highlighting
> when the mouse goes over every row.
>
> My first idea was to add some javascript on the onMouseOver/onMouseOut
> that changes the css class.
>
> The pb in that I'm unable to restaure the old css class.
>
> Another bad idea was to find a place to store the old css class name
>
> Something like
>
> rowOnMouseOver="this.title = this.className;
> this.className='highlighted';"
> rowOnMouseOut="this.className = this.title;"
>
> It works but a tooltip is displayed with the css class name :-).
>
> Does someone have this problem? Do I have to store this in something
> like a hashmap index by the TR, or an array with index? How to
> generate the index?
>
> Thank you for any help.
>
> patrick
>
Re : Datatable and highlighting
Posted by rahmoune patrick <js...@yahoo.fr>.
Thank you Andrew. It works fine.
I'm going to like javascript much more... bah...
----- Message d'origine ----
De : Andrew Robinson <an...@gmail.com>
À : MyFaces Discussion <us...@myfaces.apache.org>; rahmoune patrick <js...@yahoo.fr>
Envoyé le : Mardi, 25 Juillet 2006, 12h13mn 14s
Objet : Re: Datatable and highlighting
In Javascript you can create properties on the fly (at least in ie6
and firefox).
So instead of using title, use a custom property:
rowOnMouseOver="this.origClassName = this.className;
this.className='highlighted';"
rowOnMouseOut="if (this.origClassName) this.className = this.origClassName;"
-Andrew
On 7/24/06, rahmoune patrick <js...@yahoo.fr> wrote:
>
>
> Hi all,
>
> I'm facing a problem with t:dataTable and highlighting
>
> I have a t:dataTable with
> rowClasses="standardTable_Row1,standardTable_Row2" and
> would like to add highlighting
> when the mouse goes over every row.
>
> My first idea was to add some javascript on the onMouseOver/onMouseOut that
> changes the css class.
>
> The pb in that I'm unable to restaure the old css class.
>
> Another bad idea was to find a place to store the old css class name
>
> Something like
>
> rowOnMouseOver="this.title = this.className; this.className='highlighted';"
> rowOnMouseOut="this.className = this.title;"
>
> It works but a tooltip is displayed with the css class name :-).
>
> Does someone have this problem? Do I have to store this in something like a
> hashmap index by the TR, or an array with index? How to generate the index?
>
> Thank you for any help.
>
> patrick
>
Re: Datatable and highlighting
Posted by Andrew Robinson <an...@gmail.com>.
In Javascript you can create properties on the fly (at least in ie6
and firefox).
So instead of using title, use a custom property:
rowOnMouseOver="this.origClassName = this.className;
this.className='highlighted';"
rowOnMouseOut="if (this.origClassName) this.className = this.origClassName;"
-Andrew
On 7/24/06, rahmoune patrick <js...@yahoo.fr> wrote:
>
>
> Hi all,
>
> I'm facing a problem with t:dataTable and highlighting
>
> I have a t:dataTable with
> rowClasses="standardTable_Row1,standardTable_Row2" and
> would like to add highlighting
> when the mouse goes over every row.
>
> My first idea was to add some javascript on the onMouseOver/onMouseOut that
> changes the css class.
>
> The pb in that I'm unable to restaure the old css class.
>
> Another bad idea was to find a place to store the old css class name
>
> Something like
>
> rowOnMouseOver="this.title = this.className; this.className='highlighted';"
> rowOnMouseOut="this.className = this.title;"
>
> It works but a tooltip is displayed with the css class name :-).
>
> Does someone have this problem? Do I have to store this in something like a
> hashmap index by the TR, or an array with index? How to generate the index?
>
> Thank you for any help.
>
> patrick
>