View Issue Details

IDProjectCategoryView StatusLast Update
0001379CSSFeature Request - Interfacepublic2009-07-25 01:41
Reporterpolariser Assigned Tofahrenheit  
PrioritynormalSeverityfeatureReproducibilityN/A
Status resolvedResolutionfixed 
Summary0001379: Add hover and checked effects to tables
DescriptionHover: When I hover over a row, I'd like a background colour to change to make it easier to follow.

Checked: When I tick the checkbox for a row, it'd be nice if the background colour changed and stayed changed until unticked.

When the background colour changes, it's very likely that the foreground colour will also need to be changed to a contrasting value to ensure that its content is visible.
Tagsjavascript, UI, usability

Activities

fahrenheit

2009-01-13 22:57

reporter   ~0002480

opera used to have performance issues with row hover and IE's performance is/was simply horrible.

but anyways at least for the hover you can do it for yourself, just go to your profile and put on your usercss something like this:

tr:hover { background-color: black; color: white; }

otherwise stylesheet mantainers will have to add it to the styles.

as for the checked part, i can add a "checked" class name to rows where checkboxes have been marked but once more, stylesheet mantainers will have to add it to the styles.

polariser

2009-01-18 11:40

reporter   ~0002484

Cheers - if you can add the checked class, then, I can, as you've suggested, also solve that issue via my user stylesheet.

ninjamask

2009-01-19 15:43

reporter   ~0002486

Doesn't work for me.

I'm using Firefox 3, sub-silver template and some custom rules:
.vote { font-weight: bold; }
.temp { font-weight: normal; font-style: italic; }

.high { color: rgb(0, 139, 0); }
.mid { color: rgb(0, 0, 139); }
.low { color: rgb(139, 0, 0); }

.verified.no { color: red; }
.verified.yes { color: green; }

*[type="text"]:hover { background-color:#aaaaff; }

adding tr:hover { background-color: black; color: white; } doesn't change the color of the rows on mylist while hovering

polariser

2009-01-20 12:47

reporter   ~0002487

Try something like
#layout-main tr:hover, #layout-main tr.g_odd:hover {}

Works for me.

fahrenheit

2009-01-23 22:35

reporter   ~0002492

Okay, added the following class name "checked" to TR's that contain checkboxes, ie:

If a checkbox is checked, it will check up to 3 nodes above itself if any node is a TR, if it finds one such node the TR will get a "checked" class name appended to its class name.
If a checkbox is unchecked the above process will be executed and if a "checked" class name on the parent TR exists it will be removed.

Note: of course i'll only check for the parent TR once.

I'll close this tracker item now, although i'm not uploading the changes right away, i'll do so in a couple of hours or so, after i've fixed other issues.

polariser

2009-01-28 05:16

reporter   ~0002519

Reopening only to state that I've not seen any issues with Opera and tr:hover.

fahrenheit

2009-01-29 18:30

reporter   ~0002533

css devs need to take this up then

polariser

2009-02-13 18:51

reporter   ~0002551

The checked class is not added to "range-checked" rows. Only the first and last rows have the class added.

Cheers.

polariser

2009-02-18 15:02

reporter   ~0002554

It should probably also not check "disabled" rows.

fahrenheit

2009-03-13 01:51

reporter   ~0002603

fixed and fixed

Issue History

Date Modified Username Field Change
2009-01-13 05:10 polariser New Issue
2009-01-13 05:10 polariser Tag Attached: javascript
2009-01-13 05:10 polariser Tag Attached: usability
2009-01-13 05:11 polariser Tag Attached: UI
2009-01-13 22:57 fahrenheit Note Added: 0002480
2009-01-18 11:40 polariser Note Added: 0002484
2009-01-19 15:43 ninjamask Note Added: 0002486
2009-01-20 12:47 polariser Note Added: 0002487
2009-01-22 16:40 fahrenheit Status new => assigned
2009-01-22 16:40 fahrenheit Assigned To => fahrenheit
2009-01-23 22:35 fahrenheit Status assigned => resolved
2009-01-23 22:35 fahrenheit Resolution open => fixed
2009-01-23 22:35 fahrenheit Note Added: 0002492
2009-01-28 05:16 polariser Status resolved => feedback
2009-01-28 05:16 polariser Resolution fixed => reopened
2009-01-28 05:16 polariser Note Added: 0002519
2009-01-29 18:30 fahrenheit Note Added: 0002533
2009-01-29 18:30 fahrenheit Status feedback => resolved
2009-01-29 18:30 fahrenheit Resolution reopened => fixed
2009-02-13 18:51 polariser Note Added: 0002551
2009-02-13 18:51 polariser Status resolved => feedback
2009-02-13 18:51 polariser Resolution fixed => reopened
2009-02-18 15:02 polariser Note Added: 0002554
2009-03-13 01:51 fahrenheit Note Added: 0002603
2009-03-13 01:51 fahrenheit Status feedback => resolved
2009-03-13 01:51 fahrenheit Resolution reopened => fixed
2009-07-25 01:41 DerIdiot Project HTML & PERL => CSS