Re: [Wicket-user] MouseOver Effect on DataTable
Note to future generations (that is, those who only care about FireFox and
IE7+): just add tr:hover to your CSS, for example:
tr.even {
background-color: #d6ddee;
}
tr.even:hover {
background-color: #8fa4d1;
}
tr.odd {
}
tr.odd:hover {
background-color: #8fa4d1;
}
But beware that for IE7 you need to specify a strict doctype. See
http://www.bernzilla.com/item.php?id=762
http://www.bernzilla.com/item.php?id=762
--
View this message in context:
http://www.nabble.com/MouseOver-Effect-on-DataTable-tf2226740.html#a10324964
Sent from the Wicket - User mailing list archive at Nabble.com.
-
This SF.net email is sponsored by DB2 Express
Download DB2 Express C - the FREE version of DB2 express and take
control of your XML. No limits. Just data. Click to get it now.
http://sourceforge.net/powerbar/db2/
___
Wicket-user mailing list
Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user
[Wicket-user] MouseOver Effect on DataTable
Dear all, I have implemented a Page where I use the DefaultDataTable to display a list of data. It is inspired by the Phonebook example and works perfect. Now I have seen the cdapp example from wicket-contrib and I like the mouse-over effect when I move the mouse over the table. How can I implement such an effect in my Page? Thanks in advance /thomas - Using Tomcat but need to do more? Need to support web services, security? Get stuff done quickly with pre-integrated technology to make your job easier Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642 ___ Wicket-user mailing list Wicket-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/wicket-user
Re: [Wicket-user] MouseOver Effect on DataTable
It looks to be a combination of adding the CSS classes to your .css file
.litupRow {
}
.litupRowOver {
background-color: #66;
cursor: pointer;
}
and the JavaScript to set the class in the markup.
e.g. in SearchPage.html
tr wicket:id=results class=litupRow
onmouseover=this.className='litupRowOver';
onmouseout=this.className='litupRow';
I'm not sure enought of CSS and tables to be able to say if there's
going to be any issues with trying to have both this and the Odd/Even
classes working in the table row, though!
/Gwyn
On 06/09/06, Thomas Küchenthal [EMAIL PROTECTED] wrote:
Dear all,
I have implemented a Page where I use the DefaultDataTable to display a
list of data. It is inspired by the Phonebook example and works perfect.
Now I have seen the cdapp example from wicket-contrib and I like the
mouse-over effect when I move the mouse over the table. How can I
implement such an effect in my Page?
Thanks in advance
/thomas
--
Download Wicket 1.2.2 now! - http://wicketframework.org
-
Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642
___
Wicket-user mailing list
Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user
Re: [Wicket-user] MouseOver Effect on DataTable
The combination won't work. Try this for the even rows: tr wicket:id=results class=even onmouseover=this.className='litupRowOver'; onmouseout=this.className='even'; and for the odd rows: tr wicket:id=results class=odd onmouseover=this.className='litupRowOver'; onmouseout=this.className='odd'; I removed the class litupRow as it contains no style in your example. If you want to maintain it do this: tr wicket:id=results class=litupRow even onmouseover=this.className='litupRowOver'; onmouseout=this.className='litupRow even'; and for the odd rows: tr wicket:id=results class=litupRow odd onmouseover=this.className='litupRowOver'; onmouseout=this.className='litupRow odd'; There are also javascript functions available on the net that allow you to add and remove classes from an element. Regards, Erik. -- Erik van Oosten http://www.day-to-day-stuff.blogspot.com/ Gwyn Evans schreef: I'm not sure enought of CSS and tables to be able to say if there's going to be any issues with trying to have both this and the Odd/Even classes working in the table row, though! /Gwyn - Using Tomcat but need to do more? Need to support web services, security? Get stuff done quickly with pre-integrated technology to make your job easier Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642 ___ Wicket-user mailing list Wicket-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/wicket-user
Re: [Wicket-user] MouseOver Effect on DataTable
The problem you've not addressed is how you set the different 'onmouseout' functions in the repeater... I expect it can be done by extending the way that the OddEvenItem itself extends things, though. What I was thinking about was if there'd be a way of putting in a span or similar, such that the mouseovers could just do their set clear, leaving the odd/even being set on the tr? While I don't know, I've got the impression that I'd run into issues as to what tags would actually be allowed where I'd need them in order to do that... /Gwyn On 06/09/06, Erik van Oosten [EMAIL PROTECTED] wrote: The combination won't work. Try this for the even rows: tr wicket:id=results class=even onmouseover=this.className='litupRowOver'; onmouseout=this.className='even'; and for the odd rows: tr wicket:id=results class=odd onmouseover=this.className='litupRowOver'; onmouseout=this.className='odd'; I removed the class litupRow as it contains no style in your example. If you want to maintain it do this: tr wicket:id=results class=litupRow even onmouseover=this.className='litupRowOver'; onmouseout=this.className='litupRow even'; and for the odd rows: tr wicket:id=results class=litupRow odd onmouseover=this.className='litupRowOver'; onmouseout=this.className='litupRow odd'; There are also javascript functions available on the net that allow you to add and remove classes from an element. Regards, Erik. -- Erik van Oosten http://www.day-to-day-stuff.blogspot.com/ Gwyn Evans schreef: I'm not sure enought of CSS and tables to be able to say if there's going to be any issues with trying to have both this and the Odd/Even classes working in the table row, though! /Gwyn - Using Tomcat but need to do more? Need to support web services, security? Get stuff done quickly with pre-integrated technology to make your job easier Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642 ___ Wicket-user mailing list Wicket-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/wicket-user -- Download Wicket 1.2.2 now! - http://wicketframework.org - Using Tomcat but need to do more? Need to support web services, security? Get stuff done quickly with pre-integrated technology to make your job easier Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642 ___ Wicket-user mailing list Wicket-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/wicket-user
Re: [Wicket-user] MouseOver Effect on DataTable
Thank you for your help!!
I did it that way now:
public class MyDataTable extends DefaultDataTable
{
public MyDataTable(String id, List columns, SortableDataProvider
dataProvider, int rowsPerPage)
{
super(id, columns, dataProvider, rowsPerPage);
}
protected Item newRowItem(String id, int index, IModel model)
{
return new MyOddEvenElement(id, index, model);
}
}
public class MyOddEvenElement extends OddEvenItem
{
private String CLASS_EVEN = even;
private String CLASS_ODD = odd;
private String ON_MOUSE_OVER = this.className='litupRowOver';;
private String ON_MOUSE_OUT_ODD = this.className='odd';;
private String ON_MOUSE_OUT_EVEN = this.className='even';;
public MyOddEvenElement(String id, int index, IModel model)
{
super(id, index, model);
}
protected void onComponentTag(ComponentTag tag)
{
super.onComponentTag(tag);
tag.put(class, (getIndex() % 2 == 0) ? CLASS_EVEN :CLASS_ODD);
tag.put(onmouseover, ON_MOUSE_OVER);
tag.put(onmouseout, (getIndex() % 2 == 0) ? ON_MOUSE_OUT_EVEN :
ON_MOUSE_OUT_ODD);
}
}
What do you think? Is that a reasonable approach?
/thomas
Gwyn Evans wrote:
The problem you've not addressed is how you set the different
'onmouseout' functions in the repeater... I expect it can be done by
extending the way that the OddEvenItem itself extends things, though.
What I was thinking about was if there'd be a way of putting in a
span or similar, such that the mouseovers could just do their set
clear, leaving the odd/even being set on the tr? While I don't
know, I've got the impression that I'd run into issues as to what tags
would actually be allowed where I'd need them in order to do that...
/Gwyn
On 06/09/06, Erik van Oosten [EMAIL PROTECTED] wrote:
The combination won't work.
Try this for the even rows:
tr wicket:id=results class=even
onmouseover=this.className='litupRowOver';
onmouseout=this.className='even';
and for the odd rows:
tr wicket:id=results class=odd
onmouseover=this.className='litupRowOver';
onmouseout=this.className='odd';
I removed the class litupRow as it contains no style in your example. If
you want to maintain it do this:
tr wicket:id=results class=litupRow even
onmouseover=this.className='litupRowOver';
onmouseout=this.className='litupRow even';
and for the odd rows:
tr wicket:id=results class=litupRow odd
onmouseover=this.className='litupRowOver';
onmouseout=this.className='litupRow odd';
There are also javascript functions available on the net that allow you
to add and remove classes from an element.
Regards,
Erik.
--
Erik van Oosten
http://www.day-to-day-stuff.blogspot.com/
Gwyn Evans schreef:
I'm not sure enought of CSS and tables to be able to say if there's
going to be any issues with trying to have both this and the Odd/Even
classes working in the table row, though!
/Gwyn
-
Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642
___
Wicket-user mailing list
Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user
--
Thomas Küchenthal
Technical Director
- Business Domain Management -
LEMARIT Domain Management GmbH
Werkstrasse 12
D - 24955 Harrislee / Flensburg
-
Tel.Nr: +49 (0)461 / 5050 35 - 90
Fax Nr: +49 (0)461 / 5050 35 - 35
E-Mail: [EMAIL PROTECTED]
Domain: www.lemarit.com
-
Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642
___
Wicket-user mailing list
Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user
Re: [Wicket-user] MouseOver Effect on DataTable
that row has become needless, of course
//tag.put(class, (getIndex() % 2 == 0) ? CLASS_EVEN : CLASS_ODD);
/thomas
Thomas Küchenthal wrote:
Thank you for your help!!
I did it that way now:
public class MyDataTable extends DefaultDataTable
{
public MyDataTable(String id, List columns, SortableDataProvider
dataProvider, int rowsPerPage)
{
super(id, columns, dataProvider, rowsPerPage);
}
protected Item newRowItem(String id, int index, IModel model)
{
return new MyOddEvenElement(id, index, model);
}
}
public class MyOddEvenElement extends OddEvenItem
{
private String CLASS_EVEN = even;
private String CLASS_ODD = odd;
private String ON_MOUSE_OVER = this.className='litupRowOver';;
private String ON_MOUSE_OUT_ODD = this.className='odd';;
private String ON_MOUSE_OUT_EVEN = this.className='even';;
public MyOddEvenElement(String id, int index, IModel model)
{
super(id, index, model);
}
protected void onComponentTag(ComponentTag tag)
{
super.onComponentTag(tag);
tag.put(class, (getIndex() % 2 == 0) ? CLASS_EVEN :CLASS_ODD);
tag.put(onmouseover, ON_MOUSE_OVER);
tag.put(onmouseout, (getIndex() % 2 == 0) ? ON_MOUSE_OUT_EVEN :
ON_MOUSE_OUT_ODD);
}
}
What do you think? Is that a reasonable approach?
/thomas
Gwyn Evans wrote:
The problem you've not addressed is how you set the different
'onmouseout' functions in the repeater... I expect it can be done by
extending the way that the OddEvenItem itself extends things, though.
What I was thinking about was if there'd be a way of putting in a
span or similar, such that the mouseovers could just do their set
clear, leaving the odd/even being set on the tr? While I don't
know, I've got the impression that I'd run into issues as to what tags
would actually be allowed where I'd need them in order to do that...
/Gwyn
On 06/09/06, Erik van Oosten [EMAIL PROTECTED] wrote:
The combination won't work.
Try this for the even rows:
tr wicket:id=results class=even
onmouseover=this.className='litupRowOver';
onmouseout=this.className='even';
and for the odd rows:
tr wicket:id=results class=odd
onmouseover=this.className='litupRowOver';
onmouseout=this.className='odd';
I removed the class litupRow as it contains no style in your example. If
you want to maintain it do this:
tr wicket:id=results class=litupRow even
onmouseover=this.className='litupRowOver';
onmouseout=this.className='litupRow even';
and for the odd rows:
tr wicket:id=results class=litupRow odd
onmouseover=this.className='litupRowOver';
onmouseout=this.className='litupRow odd';
There are also javascript functions available on the net that allow you
to add and remove classes from an element.
Regards,
Erik.
--
Erik van Oosten
http://www.day-to-day-stuff.blogspot.com/
Gwyn Evans schreef:
I'm not sure enought of CSS and tables to be able to say if there's
going to be any issues with trying to have both this and the Odd/Even
classes working in the table row, though!
/Gwyn
-
Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job
easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642
___
Wicket-user mailing list
Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user
--
Thomas Küchenthal
Technical Director
- Business Domain Management -
LEMARIT Domain Management GmbH
Werkstrasse 12
D - 24955 Harrislee / Flensburg
-
Tel.Nr: +49 (0)461 / 5050 35 - 90
Fax Nr: +49 (0)461 / 5050 35 - 35
E-Mail: [EMAIL PROTECTED]
Domain: www.lemarit.com
-
Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642
___
Wicket-user mailing list
Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user
Re: [Wicket-user] MouseOver Effect on DataTable
I don't know about this particular class, but in general, an
alternative is to use attribute modifiers:
protected Item newRowItem(String id, int index, IModel model) {
Item item = super.newRowItem(id, index, model);
item.add(new SimpleAttributeModifier(class, (index % 2 == 0) ?
even : odd);
return new MyOddEvenElement(id, index, model);
}
Providing a custom class that overrides onComponentTag is slightly
more efficient btw.
Eelco
On 9/6/06, Thomas Küchenthal [EMAIL PROTECTED] wrote:
Thank you for your help!!
I did it that way now:
public class MyDataTable extends DefaultDataTable
{
public MyDataTable(String id, List columns, SortableDataProvider
dataProvider, int rowsPerPage)
{
super(id, columns, dataProvider, rowsPerPage);
}
protected Item newRowItem(String id, int index, IModel model)
{
return new MyOddEvenElement(id, index, model);
}
}
public class MyOddEvenElement extends OddEvenItem
{
private String CLASS_EVEN = even;
private String CLASS_ODD = odd;
private String ON_MOUSE_OVER = this.className='litupRowOver';;
private String ON_MOUSE_OUT_ODD = this.className='odd';;
private String ON_MOUSE_OUT_EVEN = this.className='even';;
public MyOddEvenElement(String id, int index, IModel model)
{
super(id, index, model);
}
protected void onComponentTag(ComponentTag tag)
{
super.onComponentTag(tag);
tag.put(class, (getIndex() % 2 == 0) ? CLASS_EVEN :CLASS_ODD);
tag.put(onmouseover, ON_MOUSE_OVER);
tag.put(onmouseout, (getIndex() % 2 == 0) ? ON_MOUSE_OUT_EVEN :
ON_MOUSE_OUT_ODD);
}
}
What do you think? Is that a reasonable approach?
/thomas
Gwyn Evans wrote:
The problem you've not addressed is how you set the different
'onmouseout' functions in the repeater... I expect it can be done by
extending the way that the OddEvenItem itself extends things, though.
What I was thinking about was if there'd be a way of putting in a
span or similar, such that the mouseovers could just do their set
clear, leaving the odd/even being set on the tr? While I don't
know, I've got the impression that I'd run into issues as to what tags
would actually be allowed where I'd need them in order to do that...
/Gwyn
On 06/09/06, Erik van Oosten [EMAIL PROTECTED] wrote:
The combination won't work.
Try this for the even rows:
tr wicket:id=results class=even
onmouseover=this.className='litupRowOver';
onmouseout=this.className='even';
and for the odd rows:
tr wicket:id=results class=odd
onmouseover=this.className='litupRowOver';
onmouseout=this.className='odd';
I removed the class litupRow as it contains no style in your example. If
you want to maintain it do this:
tr wicket:id=results class=litupRow even
onmouseover=this.className='litupRowOver';
onmouseout=this.className='litupRow even';
and for the odd rows:
tr wicket:id=results class=litupRow odd
onmouseover=this.className='litupRowOver';
onmouseout=this.className='litupRow odd';
There are also javascript functions available on the net that allow you
to add and remove classes from an element.
Regards,
Erik.
--
Erik van Oosten
http://www.day-to-day-stuff.blogspot.com/
Gwyn Evans schreef:
I'm not sure enought of CSS and tables to be able to say if there's
going to be any issues with trying to have both this and the Odd/Even
classes working in the table row, though!
/Gwyn
-
Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job
easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642
___
Wicket-user mailing list
Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user
--
Thomas Küchenthal
Technical Director
- Business Domain Management -
LEMARIT Domain Management GmbH
Werkstrasse 12
D - 24955 Harrislee / Flensburg
-
Tel.Nr: +49 (0)461 / 5050 35 - 90
Fax Nr: +49 (0)461 / 5050 35 - 35
E-Mail: [EMAIL PROTECTED]
Domain: www.lemarit.com
-
Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere
Re: [Wicket-user] MouseOver Effect on DataTable
in this case not. depending on itemreuse strategy a row item can be even or odd - thats why oncomponenttag polls the item's index attribute.-IgorOn 9/6/06,
Eelco Hillenius [EMAIL PROTECTED] wrote:
I don't know about this particular class, but in general, analternative is to use attribute modifiers:protected Item newRowItem(String id, int index, IModel model) {Item item = super.newRowItem(id, index, model);
item.add(new SimpleAttributeModifier(class, (index % 2 == 0) ?even : odd);return new MyOddEvenElement(id, index, model);}Providing a custom class that overrides onComponentTag is slightly
more efficient btw.EelcoOn 9/6/06, Thomas Küchenthal [EMAIL PROTECTED] wrote: Thank you for your help!! I did it that way now:
public class MyDataTable extends DefaultDataTable { public MyDataTable(String id, List columns, SortableDataProvider dataProvider, int rowsPerPage) {
super(id, columns, dataProvider, rowsPerPage); } protected Item newRowItem(String id, int index, IModel model) { return new MyOddEvenElement(id, index, model);
} } public class MyOddEvenElement extends OddEvenItem { private String CLASS_EVEN = even; private String CLASS_ODD = odd;
private String > private String > private String
this.className='even';; public MyOddEvenElement(String id, int index, IModel model) { super(id, index, model); } protected void onComponentTag(ComponentTag tag)
{ super.onComponentTag(tag); tag.put(class, (getIndex() % 2 == 0) ? CLASS_EVEN :CLASS_ODD); tag.put(onmouseover, ON_MOUSE_OVER);
tag.put(onmouseout, (getIndex() % 2 == 0) ? ON_MOUSE_OUT_EVEN : ON_MOUSE_OUT_ODD); } } What do you think? Is that a reasonable approach?
/thomas Gwyn Evans wrote: The problem you've not addressed is how you set the different 'onmouseout' functions in the repeater... I expect it can be done by
extending the way that the OddEvenItem itself extends things, though. What I was thinking about was if there'd be a way of putting in a span or similar, such that the mouseovers could just do their set
clear, leaving the odd/even being set on the tr?While I don't know, I've got the impression that I'd run into issues as to what tags would actually be allowed where I'd need them in order to do that...
/Gwyn On 06/09/06, Erik van Oosten [EMAIL PROTECTED] wrote: The combination won't work.
Try this for the even rows: tr wicket:id=results class=even
; > and for the odd rows: tr wicket:id=results class=odd
> > I removed the class litupRow as it contains no style in your example. If
you want to maintain it do this: tr wicket:id=results class=litupRow even
; even'; and for the odd rows: tr wicket:id=results class=litupRow odd
> odd'; There are also _javascript_ functions available on the net that allow you
to add and remove classes from an element. Regards, Erik. -- Erik van Oosten
http://www.day-to-day-stuff.blogspot.com/ Gwyn Evans schreef: I'm not sure enought of CSS and tables to be able to say if there's
going to be any issues with trying to have both this and the Odd/Even classes working in the table row, though! /Gwyn
- Using Tomcat but need to do more? Need to support web services, security? Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642
___ Wicket-user mailing list Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user-- Thomas Küchenthal
Technical Director - Business Domain Management -LEMARIT Domain Management GmbHWerkstrasse 12D - 24955 Harrislee / Flensburg-
Tel.Nr: +49 (0)461 / 5050 35 - 90Fax Nr: +49 (0)461 / 5050 35 - 35E-Mail: [EMAIL PROTECTED]Domain:
www.lemarit.com - Using Tomcat but need to do more? Need to support web services, security? Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642
___ Wicket-user mailing list Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user-Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job easierDownload IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
http://sel.as-us.falkag.net/sel?cmd=lnkkid=120709bid=263057dat=121642___Wicket-user mailing list
