JQuery fix for proper alternate table row highlighting -> Has Patch

[jeffsayre]

BuddyPress core's default theme has a simply JQuery script for providing alternate row highlighting of table rows, message inbox lists, and forum thread lists. However, this coding does not work properly for table rows. See attached screenshot One for visual explanation.

Why is this the case? Because BuddyPress generates the settings form output from multiple screen files, each one creating a new outputted table. Using the "table tr" selector does not properly select rows for each table. This coding will find every-other table row in the entire document. It is not relative to a single table Therefore, if you have more than one table output on a screen, the alternate highlighting will start off on the wrong count for every other table as seen in the screenshot.

How can this be fixed? By using the selector "tr:nth-child(even)". This will find every even table row relative to the table itself. See screenshot Two for corrected output.

NOTE: The included patch assumes that the alternate rows to be highlighted should be the even rows. This could easily be switched to odd rows if preferred. I chose highlighting of even rows because I prefer to output table head selectors "<th></th>" and provide a different highlight color for the table headers. Therefore, the first table row (the first non-header row) will be white the next grey, the next white and so on. The header then would be a contrasting, non white or grey color. See screenshot Three.

[jeffsayre]

JQuery alternating table row highlighting patch

[jeffsayre]

Screenshot of table row highlighting issue

[jeffsayre]

Screenshot of fixed table row highlighting issue

[jeffsayre]

Screenshot of table header highlighting

[hnla]

It's a good catch Jeff, it had bugged me too when I looked at styling those notification rows. I actually stuck with styling the tr:first-child and clearing the alt styling as that particular table is divided by the tr>th rows really.

Tested your patch quickly on local install WP 3.0 BP 1.2.4.1 and it appears to be fine.

One further addition that may or may not be over egging the pudding but could add the snippet below to your change just to provide extra class control for the tr>th rows?

jq('table tr >th').parent('tr').addClass('row-headers');

[johnjamesjacoby]

(In [3069]) Fixes #2465

[jeffsayre]

The alternate row highlighting of table rows is still not working. See the three new screenshots I've uploaded:

JQuery_fix_shot4.jpg --> A shot of what appears to be a properly highlighted table

JQuery_fix_shot45.jpg --> The issue rears its ugly head on the output of one of the privacy settings screens

JQuery_fix_shot6.jpg --> I added fictitious output to the core settings screens to demonstrate the problem

The new JQuery fix still does not select the tables properly. Instead, it is selecting the entire form, treating all <tbody> rows as if they were one giant table. My proposed patch fixes this issue by treating each table as a separate selection body. It allows for outputted table results with a differing number of even or odd rows. This results in the proper alternate highlighting of table rows.

[jeffsayre]

A shot of what appears to be a properly highlighted table

[jeffsayre]

The issue rears its ugly head on the output of one of the privacy settings screens

[jeffsayre]

I added fictitious output to the core settings screens to demonstrate the problem

[hnla]

Just for general information this thread covers some of the issues and may or may not be helpful:
http://buddypress.org/community/groups/requests-feedback/forum/topic/buddypress-1-2-5-tickets-are-cleared-out/

[DJPaul]

Why are we even using Javascript to add an alt class to achieve zebra striping?

table tr:nth-child(even) { background-color: pink; }

IE7/8 are the only mainstream browsers that doesn't support nth-child, and IE9 will/does have support for it. Progressive enhancement?

[johnjamesjacoby]

(In [3106]) Addresses #2465. I hate zebras now.

[jeffsayre]

Removal of the Alternate Highlighting JQuery code is also a viable option. With table headers <thead> now being highlighted, the <tbody> rows are fine as simple white rows. The forum rows are still highlighted with alternate rows via an "alt" class being appended in the core codebase, not via jQuery.

So, just cut out the entire JQ script for row highlighting and be done with it.

[hnla]

Progressive enhancement is the the approach that many standards based coders agree on when dealing with IE and it's total lack of any sense of worth, but striping is something that isn't simply a pretty visual bit of fluff it does help visualise crowded rows.

TBH never known such a simple thing as zebra striping cause so much trouble :)

I'm with JJJ, bloody Zebras I want spots now!

Yes can we either script it or php it; anything, something :(

Jeff the notification email rows can look ok with the tbody tr's plain as long as the thead tr is highlighted but I would still prefer the tr were classed.

fwiw I seem to have it working using my subtle sledgehammer approach, until such time as the 7 PHP developers manage a full solution :P

One thing please where is that damned table for the email notification screen hiding I need to add theads to it.

[jeffsayre]

I agree that alternate highlighting is visually useful. The current fix works for me but if it's causing too much of an issue with IE7 and 8 users, then we need to either find another way of doing it, or simply eliminate the alternate highlighting altogether.

By the way, the JQuery-powered giraffe striping on my dev site works like a charm! But, don't ask me for the code. It is top secret.

See JQuery_giraffe_striping.jpg

[johnjamesjacoby]

In future versions this will rely on straight PHP processing rather than jQuery, but until then this is fine enough for now.

Bumping this to 1.3 for another look then and to clear out the milestone.

[nuprn1]

Problem still there but opposite now
​http://files.etiviti.com/misc/backtoahorse.gif

[johnjamesjacoby]

(In [3111]) Fixes #2465 and #2475, for real this time.

[jeffsayre]

BP tagged 1.2.5 apparent alt highlighting fix

[jeffsayre]

BP tagged 1.2.5 issues with alt highlighting fix

[jeffsayre]

The alternate row highlighting issues still exists. See new screenshots made with the Tagged BP v1.2.5:

JQuery_issue_BP125_A.jpg
JQuery_issue_BP125_B.jpg

[jeffsayre]

Here is a JQuery document with more details on this issue. See the section at the very end entitled "A LIMITATION AND A WORKAROUND"

​http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

I do not run IE anymore. But based on what Paul Gibbs said, the tr:nth-child(even) fix is not supported by IE 7/8. Is this verified? --->Not that I don't trust Paul! :)

[jeffsayre]

Okay, according to these blog post, nth-child is supported in Internet Explorer 7 and 8 when using jQuery, but not in pure CSS. This means that the fix I suggested earlier, should work like a charm.

​http://blog.darkhax.com/2010/01/17/making-nth-child-work-everywhere

​http://css-tricks.com/forums/viewtopic.php?f=5&t=7106

[hnla]

I wish I had stated that earlier when replying to Pauls comment; yes the whole point is and should be that CSS3 not supported but jQuery selectors are transposed to work in the library core