Implementing Dynamic Styles for Popups based on Query

Question

I have a page with multiple report regions which are individually displayed depending upon values assigned to variables via a search page. On the resulting report region, I display the results of my SQL query as text, text fields, select lists, textarea, and popups. These fields are editable and will be submitted to update the data displayed and stored in the database. To maintain database referential integrity, obviously some fields will be reuired and some will have default values. I want to visually emphasize these two characteristics to the user by changing the field background color and font color depending upon whether the element is required or whether a default value is being displayed.
I have tried to accomplish as much as possible via inline styling and can accomplish everything except the popups. If I hard-code the style values for the popup IDs, I can affect the styles. The problem is that the number of rows which need to be addressed is dependent upon the number of rows in my table. Popup IDs are indexed by the row number (e.g. f01_0001 is the ID for the popup field for row 1; f01_0002 is the ID for the popup field for row 2, etc). Changing the template would affect all popups and I only want to address specific ones. I have tried to implement a JavaScript function (FORMAT_DEFAULT_AND_REQUIRED_COLUMNS(formItem1,formItem2,formItem3)) on the page HTML Header section which is called by onload="jvascript:FORMAT_DEFAULT_AND_REQUIRED_COLUMNS('P30_DATA_TYPE','P30_VIEW_OR_EDIT','P30_SOURCE');" from the "On Load - Page HTML Body Attribute."
Basically, I want this function to execute each time the page is loaded to dynamically assign style values to the popups (and potentially other columns as well). Depending upon the values of the three formItems, the function would know which column tags would need to be affected. From within the JavaScript function, I would call:
document.getElementById(f01tag).style.setExpression("background-color", "blue", "JavaScript");
This would occur within a loop from 1 to the number of rows to be displayed on the report region and the f01tag would be incremented by the loop counter.
Any ideas, assistance, or direction would be greatly appreciated. Thank you.

Answer 1

Ed
Taken a look at it using the developer access you provided. Think you were nearly there!
The style sheet wasn't being picked up because of the link href in the page template. Think you must have cut and pasted the existing link for the theme CSS and left in the themes/theme_10/ component? That would apply for style sheets stored there in the file system. For your ApEx CSS from the database you just need #WORKSPACE_IMAGES#pdam.css.
To get the styles defined in the CSS appearing for all of the items - including the popups - I added class="default|required|default_required" attributes using the p_attributes parameter in the APEX_ITEM package methods referenced in your report source query. (Probably possible to do this in the Tabular Form Element section of the report definition too, but if you've got dynamic requirements as to which classes are needed where, the former approach is more likely to be useful - you can control which classes using DECODE, CASE, scalar subqueries etc.)
Seems to be working in Windows IE 5.5/6/7 and Opera 9; Mac Firefox 2 and Safari 3 beta. Safari 2 doesn't support styling of the select lists, as I mentioned in my previous post.
Few points on your CSS:
1. Setting font size in pixels causes accessibility issues, both due to Win IE lacking support for user resizing of pixel sized text, and because of general variation in display resolutions. Use a different method for real world use.
2. Always specify a generic font family as a fallback in case your preferred fonts are not available: font-family: "Times New Roman", Times, serif;
3. text-shadow is not yet a widely supported CSS 3 property. Although it is working in Safari 3 - even (to my surprise!) in a form control - it looks kind of unreadable, and I doubt that even when widely available it will be universally supported for forms controls. Anyway, note that text-shadow properties are not specified enclosed in quotes.
Hope this lets you progress.