Alternate Row MouseOver Color

Advanced Alternate MouseOver Row Color

This tutorial will show you how to make use of your CSS and JavaScript to create a advanced alternate row mouseover row color within your repeat region based on the Alternate Row Color code from UltraDeviant.

First of all we are going to create a repeated region as you normally do within Ultradev on a RecordSet (no explaination needed !).

The idea is to create some classes in your CSS that are going to used to set your alternate row color and the mouseover color.

First we set the link, link hover style and table style (can be anything):

A {
font-size : 10pt;
font-family : Arial, sans-serif;
color : #004080;
}
A:hover {
font-size : 10pt;
font-family : Arial, sans-serif;
color : #FFFFFF;
}
TABLE {
font-family: Arial, sans-serif;
font-size: 10pt;
color: #000000;
}

Second we create 3 classes:

• class for the odd tablerows
• class for the even table rows
• class for the selected table row (mouseover)

Class for the odd rows:

TR.RowOverOdd {
background-color : #FCFCFC;
}

Class for the even rows:

TR.RowOverEven {
background-color : #CFCFCF;
}

Class for the selected row:

TR.RowOverSelected {
color : #FFFFFF;
background-color : #8080FF;
}

So we now have the following CSS styles defined:

A {
font-size : 10pt;
font-family : Arial, sans-serif;
color : #004080;
}
A:hover {
font-size : 10pt;
font-family : Arial, sans-serif;
color : #FFFFFF;
}
TABLE {
font-family: Arial, sans-serif;
font-size: 10pt;
color: #000000;
}
TR.RowOverOdd {
background-color : #FCFCFC;
}
TR.RowOverEven {
background-color : #CFCFCF;
}
TR.RowOverSelected {
color : #FFFFFF;
background-color : #8080FF;
}

Next Page >>