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.

It turned out to be 5 lines of code,  and works exactly as desired. We have both put the solution into production and it is working beautifully. Along with showing you the 5 lines of code, today’s article will take you down the journey of discovery, so you can see how I disected the generated WB HTML code, and figured out the 5 lines of code needed, which is the real lesson for today, as the same method is used anytime you are trying to integrate advanced CSS, JavaScript or Jquery into your WebDev Application.

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.

So that left me with the need to use CSS, JavaScript, Jquery or a combinations of all three. The CSS code for hover is pretty simple. For every element you can apply CSS code to the :Hover event. The only question becomes what element do you apply it to?

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.

It is important to note, as I have shown you before, anytime you are working with advanced CSS, JavaScript or Jquery, you need to disable the JavaScript compact option so that the HTML elements will be generated with your control names, instead of the normal A1, A2, etc. that WebDev uses. You can do that at either the Project or the Page level.

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.

<style type="text/css">

Starts a CSS style block, telling the browser to treat the following as CSS code

div[id^="LOOPFAQ_"]:hover {

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.

}
</style>

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.

Again I hope this article not only inspires you to use this code for your loopers, but to start experimenting with the Inspect Element function of Chrome (or Firebug, etc) and start dissecting the generated HTML of your WB sites, and learning how to enhance you sites beyound the out of the box WB, with just a light peppering of CSS, JavaScript, and Jquery where needed. And as always if you get stuck or just need some help implementing some advanced CSS, JavaScript or Jquery, I am available on a consulting basis.

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.

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

• WEBDEV
• WX