While working on integrating the Stripe API into pcReminder.com, I notice that the look and feel of their FAQ section was really nice and clean. So I “liberated” it for another site I was working on. The only challenge in duplicating the interface was getting the looper rows to highlight as the mouse moves over them. Without the rows highlighting, the user doesn’t have a good indication that they there is further action available to them, in this case more details when clicking.
After trying a few things and contacting pcSoft and finding out that it was supported, I finally gave up, and change the subject link to a standard link and moved on. Meanwhile, Andy Stapleton had a similar need for one of his web applications. He was sending me information about different approaches he was trying (read bugging the crap out of me trying to get it to work <G>). And finally I woke up early one morning and decided to take another stab at it, based on a few of Andy’s approaches that didn’t quite work.
So let’s look at the my FAQ page, without the extra tweaking I did via CSS
As you can see in that short video, the FAQ is functional, but there is no indication to the user that they should click on a row to see the details.
Now lets look at the completed version with my CSS tweaks.
As you can see it, its not a big change but just a few small tweaks that make for a much better interface.
If you look at the style settings for a looper, you will see that there are settings for odd and even rows.
For each of these I have set the background to undefined, as I don’t want the normal “graybar” effect of the standard style.
Notice that there is a more options link on that screen. Clicking on that gets us to an area with more advanced configuration options for the style. Including an Over Section, which is the style to apply when the mouse hovers over the control.
Unfortunately, although the configuration screen is there, WB ignores that settings and doesn’t apply it. I have confirmed this with pcSoft and it has been submitted as a requested feature.
If you have followed any of my advanced WB presentations, you know that this is where Google Developer Tools and Inspect Element come into play. By inspecting the looper and looking at the generated HTML code we see that WB generate the looper as a Table with each Row being a table row. My looper has 3 rows and as you can see so does the generated HTML table.
If you expand one of those rows in the inspect elements screen you see, each row is a collection of yet more nested tables. Note I didn’t fully expand all of the code for one row, as it seems to nest almost indefinitely!
The line that actually interest us is the DIV that has an id=”LOOPFAQ_1″. If you were to expand the other rows, you would discover that each row of the looper is wrapped with a DIV, LOOPFAQ_1, LOOPFAQ_2, LOOPFAQ_3, etc. LOOPFAQ is the name of my looper control.
The reason that DIV is important is because to apply CSS we need something to apply it to. It would be nice to apply it to the TR that wraps each row, but that doesn’t have a class id, therefore I have no way to specifically target just those TR tags. But since the DIV is a wrapper for the entire row, and does have a ID, I can use it.
Now that I have an element that I can target with CSS code the rest is easy. I add some custom CCS code to the page via the Advanced Tab.
Let’s examine that code line by line.
Starts a CSS style block, telling the browser to treat the following as CSS code
div tells it to apply this CCS code only to DIV tags, everything inside the  is what is known as a CSS selector, in this case, it is telling it to only apply to DIV tags that have an id that starts with (^=) “LOOPFAQ_”, which is what each of our DIV tags for our rows will start with. And finally the :hover say this CSS code is for the hover event of that element.
background-color: #E2E2E2; cursor: pointer;
Now we just have some standard CSS code to change the background color, and to change the mouse cursor to indicate it is clickable.
The last 2 lines close out the CSS and the Style block. That is it, nearly a week of back and forth attempts, and at the end of it all, just a few lines of CSS code is all that is needed.
Uncle Pete’s Corner is webinar series on all things WX, to watch the watch the Uncle Pete’s corner webinar that is the companion to this article, and many other WX related webinars, go to the WinDev US YouTube Channel and be sure to also join the WxLive – US Community on Google+ to get notices about upcoming webinars. On the Google+ community you will find a active group developers discussing all things WX.