Skip to main content

Stupid Rollover Tricks

One neat little trick which I have found that users like is the ability to highlight a cell as you mouse over it. In HTML DB 1.6, the Highlight Row feature was introduced as a part of Themes. With just a couple of small changes to your report template, you can take things up a notch, and provide your users with the ability to change the cell color as they mouse around an HTML DB Report.

First of all, create a report based on any table or view. Be sure to use the "Standard" Report Template, not the one with "Alternating Color Rows." If you want to use an Alternating Color Row template, you’ll have to make the changes below for both Odd and Even rows.

Once you have created your report, edit the Report Template which is associated with it. If you edit the page that your report is on, you should be able to see a link to your Report Template under the Shared Components: Templates section of the Application Builder.

Scroll down to the Before Each Row section and replace what is there with the following:

<tr style="cursor: pointer">

We need to remove the #HIGHLIGHT_ROW# link in order for cell highlighting to work. Also, we’re going to change the mouse cursor from the standard “I-Bar” to the “pointer” as the user hovers over the report. No good reason for this, other than to illustrate how it can be done. A list of other valid mouse cursor options can be found here: http://www.marcato.org/luke/web/cursors.html

Next, let’s edit the Column Templates section. Replace what is in Column Template 1 with the following:

<td class="t12data"#ALIGNMENT#
onMouseover="this.style.background='#0f0'" onMouseout="this.style.background='#fff'">#COLUMN_VALUE#</td>

You can choose which color to use as a highlight color by replacing #0f0 with your color’s hex code.

Save your changes, and give it a try! You can view a working example here: http://htmldb.oracle.com/pls/otn/f?p=33582:1

Comments

Anonymous said…
Don't you know how this could be done with DIVs, background images and with onClick instead of onMouseOver?

I'm talking about this effect:
(click on the cells)

http://kabelszat2002.hu/~vulcan/Example/cell-highlight.html

but not with DIVs in table cells just pure DIVs and you change the background image of each otherwise visible DIV instead of making them visible, like in that code above.

Thanks
Jim
August 28, 2006 at 12:04 AM
Scott said…
Jim,

Yes, I realize that you can also achieve the same effect with DIVs. However, all of the built-in report templates in Apex use tables; thus my example based on tables.

Thanks,

- Scott -
August 28, 2006 at 8:21 AM
Anonymous said…
Actually I asked whether you know how to make it with DIVs and background images because I didn't have a clue. :)

But since then I've found a solution here:

http://www.webdeveloper.com/forum/showthread.php?p=628792

Jim
August 28, 2006 at 11:52 AM
Post a Comment

Popular posts from this blog

Custom Export to CSV

It's been a while since I've updated my blog. I've been quite busy lately, and just have not had the time that I used to. We're expecting our 1st child in just a few short weeks now, so most of my free time has been spent learning Lamaze breathing, making the weekly run to Babies R Us, and relocating my office from the larger room upstairs to the smaller one downstairs - which I do happen to like MUCH more than I had anticipated. I have everything I need within a short walk - a bathroom, beer fridge, and 52" HD TV. I only need to go upstairs to eat and sleep now, but alas, this will all change soon... Recently, I was asked if you could change the way Export to CSV in ApEx works. The short answer is, of course, no. But it's not too difficult to "roll your own" CSV export procedure. Why would you want to do this? Well, the customer's requirement was to manipulate some data when the Export link was clicked, and then export it to CSV in a forma...
76 comments
Read more

Manipulating Images with the... Database?

A recent thread on the OTN HTML DB Forum asked about how to determine the width & height of an image stored as a BLOB in an Oracle table. I mentioned in that thread that I have some code to manipulate an image stored in a BLOB column. This is particularly useful if you’re going to let users upload images, and you want to re-size them to display as a thumbnail. Thanks to Oracle interMedia , it is trivial to manipulate the width, height, and other attributes of images stored in an Oracle table. I’ve created a sample application here which demonstrates Oracle interMedia and HTML DB in action. Feel free to have a look. You can download this application from HTML DB Studio as well. Basically, this application allows you to upload images and perform an operation on the image as it is inserted into the PHOTO_CATALOG table. There are two places where some PL/SQL code is required: an After Submit process on page 2, and a procedure to display the images. Here is the PL/SQL for the After...
33 comments
Read more

Refreshing PL/SQL Regions in APEX

If you've been using APEX long enough, you've probably used a PL/SQL Region to render some sort of HTML that the APEX built-in components simply can't handle. Perhaps a complex chart or region that has a lot of custom content and/or layout. While best practices may be to use an APEX component, or if not, build a plugin, we all know that sometimes reality doesn't give us that kind of time or flexibility. While the PL/SQL Region is quite powerful, it still lacks a key feature: the ability to be refreshed by a Dynamic Action. This is true even in APEX 5. Fortunately, there's a simple workaround that only requires a small change to your code: change your procedure to a function and call it from a Classic Report region. In changing your procedure to a function, you'll likely only need to make one type of change: converting and htp.prn calls to instead populate and return a variable at the end of the function. Most, if not all of the rest of the code can rem...
5 comments
Read more