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

Page 0 Branches

What? There's no way to put a Branch on Page 0 of an ApEx application! Or is there... Technically, no - page 0 does not support branches. But how many times do you wish it did? This scenario recently came up: I wanted to put a "Search" box on every page in my application, so no matter where a user is, they can search the site. Currently, it has 10 or so pages, but this will grow to closer to 50 by production. So, thought #1 was to put an text item on Page 0, call it search, and then ensure that each and every page had some sort of Branch to run the search. Not so fun, as this was a tedious task, even for just 10 pages. And each time a new page was added to the application - by myself or anyone else - the search branch would have to be added to the page. Clearly not a scalable solution. With a little bit of help from Raj from the ApEx team, I came up with this solution: Create Page 0, if you haven't already On page 0, create an item of type "Text Field (...
13 comments
Read more