View Issue Details
ID | Project | Category | View Status | Date Submitted | Last Update |
---|---|---|---|---|---|
0001379 | CSS | Feature Request - Interface | public | 2009-01-13 05:10 | 2009-07-25 01:41 |
Reporter | polariser | Assigned To | fahrenheit | ||
Priority | normal | Severity | feature | Reproducibility | N/A |
Status | resolved | Resolution | fixed | ||
Summary | 0001379: Add hover and checked effects to tables | ||||
Description | Hover: 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. | ||||
Tags | javascript, UI, usability | ||||
|
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. |
|
Cheers - if you can add the checked class, then, I can, as you've suggested, also solve that issue via my user stylesheet. |
|
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 |
|
Try something like #layout-main tr:hover, #layout-main tr.g_odd:hover {} Works for me. |
|
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. |
|
Reopening only to state that I've not seen any issues with Opera and tr:hover. |
|
css devs need to take this up then |
|
The checked class is not added to "range-checked" rows. Only the first and last rows have the class added. Cheers. |
|
It should probably also not check "disabled" rows. |
|
fixed and fixed |
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 |