|
| |
|
|
skrile
Posts: 59
Joined: 1/28/2002
From: Novi MI USA
Status: offline
 |
Super Hover Effect for Table rows - 1/22/2004 14:44:37
I've been circling around this one for a while, and finally found some code that nails it.
I write a lot of .asp pages that display tables of information. It is very hard to read this data so I came up with a simple bit of vbscript/css styles that would draw alternating colors in my table. Well, I wanted to add that last bit of dynamic flash by having a rollover effect without having to do some sort of onMouseOver coding in every line. So, here are the components you will need to pull this off. First, the css:
<style>
.EvenRow {
background-color: #D7D7D7;
}
.OddRow {
background-color: #EEEEEE;
}
.HOT {
background-color: #FFFFFF;
}
</style>
-----------------------------
Now, the vbScript that I put in my include.inc file that's plunked onto the top of every page on every one of my sites.
<%
dim strRow
strRow = "OddRow"
function ToggleRow
if (InStr(strRow, "OddRow")) then
strRow = "EvenRow " & """ onMouseover=""this.className='HOT'"" onMouseout=""this.className='EvenRow'"
else
strRow = "OddRow " & """ onMouseover=""this.className='HOT'"" onMouseout=""this.className='OddRow'"
end if
ToggleRow = strRow
end function
%>
--------------------------------------
Finally, there's the table code. I generally have a looping function drawing my tables, so the following line is written over and over again for each line in my database call.
<tr class="<%=ToggleRow()%>">
...some td's and information...
</tr>
That's it. The beauty of this approach is that when I'm writting my .asp page, I simply have to put that "class=<%=togglerow()%>" bit in the row that's going to be repeated, and don't have to worry about formatting again.
Also, if you want to change the colors of every alternating table in your web site, it's a matter of changing two styles (evenrow, and oddros) and voila, your entire site is changed.
I'm just happy to be able to contribute to this site. I've learned so much from you all. Hope someone out there finds this to work for them.
_____________________________
Steve Krile
Ergonomist posing as web developer - or visa versa
|
|
|
|
Giomanach
Posts: 6091
Joined: 11/19/2003
From: England
Status: offline
|
RE: Super Hover Effect for Table rows - 1/23/2004 3:39:14
It doesn't work on the hover because you haven't used the command hover. Add something like the following:
EvenRow:hover {
background-color: #FFFFFF;
}
Obviously edit the colour to suit, but you will need to create on for the rest of it. Then see what happens
Dan
< Message edited by Giomanach -- 1/23/2004 8:39:33 >
_____________________________
| |
|
|
|
skrile
Posts: 59
Joined: 1/28/2002
From: Novi MI USA
Status: offline
|
RE: Super Hover Effect for Table rows - 1/23/2004 9:24:34
Actually, the code I posted works perfectly (in multiple browsers no less). The code you posted does not. Hover is not supported by classes, so you can't use it, you have to write OnMouseOver and OnMouseOut in the html for the effect. My code just writes that for you.
_____________________________
Steve Krile
Ergonomist posing as web developer - or visa versa
| |
|
|
|
skrile
Posts: 59
Joined: 1/28/2002
From: Novi MI USA
Status: offline
|
RE: Super Hover Effect for Table rows - 1/29/2004 14:23:20
NP bobby.
I've tweaked this a little more so I have a choice between the rollover version, and the static version. To do this, I've added the following to my vbScript include:
'====================Alternating table colors script for ids===========
dim nstrRow
nstrRow = "OddRow"
function ToggleRowStatic
If nstrRow = "OddRow" Then
nstrRow = "EvenRow"
Else
nstrRow = "OddRow"
End If
ToggleRowStatic = nstrRow
end function
Then I put the following in my page:
<tr class="<%=ToggleRowStatic()%>">
This is nice because is give consistency of feel and display, and allows me to programmatically "turn off" the rollover effect while maintaining the alternating behavior.
_____________________________
Steve Krile
Ergonomist posing as web developer - or visa versa
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
