Spry Regions display only in Opera

This should be simple, but it's making me crazy - simple spry
master/detail set (course titles/descriptions) display okay in
Opera but NOT in Firefox, Safari, IE (Mac or Windows!). Anyone have
any clues where to start looking for problems? (CS3)
Thanks,
-ar

Hi Robyn_cpl,
No its not a typical SVG browser implemenation problem, as this only effects Opera when used through a high resolution Retina display. Opera running on OSX on a non-retina display aren't affected.
Equally all other browsers running on a Retina display arent impacted by this glitch.
Regards,
Dan

Similar Messages

Region - Display only on form layout page

Hi,
1) I have defined regions on table-form layout style. How ever I want the regions to be displayed only on the Form layout and not on the table layout page that has the search functionality. Is there a way to hide the regions on the search page?
2) Also for display type "textinput" (read-only), eventhough I checked the "Column wrap?" checkbox, the text still spans across the page and not wrapping.
Please help!
Thanks.

Regions enclose items. You can set the Display in Form Layout, Display in Table Layout and Include in Advanced Search properties on the items within the regions, but you are probably asking how to also hide the region title and line for items that are not displayed on the table/search page.
Although there may be a better way to handle this, we've created a custom template for the Regions node under the group. The template is attached to the VERTICAL_REGION_CONTAINER template on that node. The template has code that turns off generation of the region if the region name is a certain string,
We copied the current verticalRegionContainer.vm and added conditional code to the top of it like this:
#if (((($subRegion.title=="Title1") || ($subRegion.title=="Title2")) && (${JHS.current.pageComponent.processingAdvancedSearchArea}))
          || (($subRegion.title=="SearchTitle") && !${JHS.current.pageComponent.processingAdvancedSearchArea}))
       ## do nothing
    #else
## the usual stuff in this template
#endIn this example, the Title1 and Title2 regions are not being displayed on the search form (Advanced search)/table page but are displayed on the Form (Insert/update) page. The SearchTitle region is displayed on the Advanced Search/ table page but not on the Form (insert/update) page. Something like that may work in your case.
If you want some fields to appear on both, but in different regions, copy the items and drop them under the appropriate regions.
Peter Koletzke

How do I display on-the-fly generated XML on a web page using DW CS4 Spry regions?

On a main web page I'm trying to display formatted data from an ASP page that generates XML on-the-fly from a query.
When I run the ASP page from the browser, the XML formatting of the data works. But when I run the main web page, the data doesn't display.
I'm using DW CS4 Spry regionsto display the data on the main page from the XML data generated by the ASP page. Here's the main page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache" >
<html>
<head>
<script type="text/javascript" src="SpryAssets/xpath.js"></script>
<script type="text/javascript" src="SpryAssets/SpryData.js"></script>
<script type="text/javascript" src="SpryAssets/SpryUtils.js"> </script>
<script type="text/javascript">var A1D1xml = new Spry.Data.XMLDataSet("A1D1ACRs_testWxmlCode.asp", "tests/test");</script>
<title>Test XML Main</title>
</head>
<body>
      <div id="A1D1xml" spry:region="A1D1xml">
                                <table id="A1D1">
            <tr>
            <th>ID</th>
            <th>Last Name</th>
            <th>Final Status</th>
            </tr>
            <tr spry:repeat="A1D1xml">
                   <td>{acr_id}</td>
                <td>{acr_lastName}</td>
                <td>{acr_final_status}</td>
            </tr>
              </table>
         </div>
</body>
</html>
Here's the code for the page that generates the XML: A1D1ACRs_testWxmlCode.asp
<html>
<%
set objConn=server.CreateObject("ADODB.Connection")
objConn.Open application("web_test")
set rs = objConn.Execute( "SELECT acr_id, acr_lastName, acr_final_status from acr_records_grid_view where acr_changeOption = 'A1D1'")
Response.ContentType = "text/xml"
Response.AddHeader "Pragma", "public"
Response.AddHeader "Cache-control", "private"
Response.AddHeader "Expires", "-1"
%>
<?xml version="1.0" encoding="utf-8"?>
<tests>
<%While (NOT rs.EOF)%>
                <test>
                                <ID><%=(rs.Fields.Item("acr_id").Value)%></ID>
                                <acr_lastName><![CDATA[<%=(rs.Fields.Item("acr_lastName").Value)%>]]></acr_lastName>
                                <acr_final_status><![CDATA[<%=(rs.Fields.Item("acr_final_status").Value)%>]]></acr_final_s tatus>
                </test>
    <%
              rs.MoveNext()
                Wend
%>
</tests>
<%
rs.Close()
Set rs = Nothing
%>
</html>
Thanks.

Thanks, but no; I'm using the correct case and folder.
With this code on the main page, The region flashes the table column header names
and the code as written for the spry repeat; then instantly disappears from the screen.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="SpryAssets/xpath.js"></script>
<script type="text/javascript" src="SpryAssets/SpryData.js"></script
<script type="text/javascript">var A1D1x = new Spry.Data.XMLDataSet("A1D1ACRs_testWxmlCode.xml", "tests/test");</script>
<title>Test XML Main</title>
</head>
<body>
      <div id="A1D1" spry:region="A1D1x">
               <table id="A1D1a">
            <tr>
            <th>ID</th>
            <th>Last Name</th>
            <th>Final Status</th>
            </tr>
            <tr spry:repeat="A1D1x">
                <td>{acr_id}</td>
                <td>{acr_lastName}</td>
                <td>{acr_final_status}</td>
            </tr>
              </table>
         </div>
</body>
</html>

Accessing form elements within a Spry region.

Since nested Spry regions isn't yet support, can someone tell
me how to access and modify form elements within a existing region?
For example, I have a region that displays a form based on
data I defined in a javascript array. On of the form elements is a
select with some options. I want to added and remove options to
this select depending on the number of objects in the data array.
The select is not defined when I try to access it after spry
has finished rendering the form, eg
document.forms[0].selOrder1.options.length = 0;
How are Spry regions attached to the browser's DOM? Does Spry
create it's own DOM subordinate to the main DOM?
Is it possible to make changes to a Spry region without using
Spry?
thx
pwp

Actually, there are a couple of ways to get access to the DOM
underneath a region container. If you have a region, you can put an
ID attribute on the region container node, or if you are using a
region observer, the data passed into the observer has a regionNode
property. So if you want access to the region DOM anytime the
region is re-generated, do something like this:
function myRegionObserver(notificationType, notifier, data)
// We only want to do something after the region is
re-generated,
// for all other notifications, do nothing.
if (notificationType != "onPostUpdate")
return;
// If your region container element has an ID on it, just
use
// getElementByID. This is useful in the case where your
observer
// is only ever registered with one region.
var rgnElement1 = document.getElementById("headerRegion");
alert(rgnElement1.innerHTML);
// Or you can simply use the regionNode property of the data
// that is passed in. This is useful if you've registered
the same
// observer on multiple regions. The regionNode property
will
// contain the region container node for the region that is
currently
// being updated.
var rgnElement2 = data.regionNode;
alert(rgnElement2.innerHTML);
Spry.Data.Region.addObserver("headerRegion",
myRegionObserver);
<div id="headerRegion" spry:region="ds1">
</div>
--== Kin ==--

Using spry:state="loading" only after a certain interval

Hi everyone ,
I need a feature for spry regions. I want my loading spry state to show only loading of data takes 0.5 seconds and more.
Is it possible with this version of spry?
Ps1 : you can find a live example of my need in google webmaster tools' content section,content by title page. There is an ajax listview with paging on page and loading div only apeears if loading of data takes more than a certain milliseconds.
Ps2 : Spry rulezzzz

vw2ureg wrote:
Hi,
Go here and scroll down to ErrorState, LoadingState and ReadyState.
I hope this helps.
Ben
That will only tell Spry that it should should use different "state" as loading state. But it doesn't display a loading state after a certain interval. This functionality does not exist in the Spry library. But you could create a custom "loading" state that you automatically trigger using setTimeout if your haven't gotten a onPostUpdate through your region observer.
But i'm curious why you would wanna do create a have the loading state after a certain interval.

IE8 Spry Region Throws "Expected ':' "

Anyone know what might cause IE8 (and as far a I can tell, only IE8 - haven't tested in IE7) to throw a javascript error saying "Expected ':'" within a spry:region / spry:repeat variable? A la:
<LI spry:repeat="listsdata">
                  <span onclick="getLists({listsdata::ID})">{listsdata::name}</span>
                  <input type="button" value="-Group" onclick="deleteListGroup({listsdata::ID})" />
          </LI>
You can see the behavior here: http://www.listcosa.com/
I've been using Spry on and off for some time, including a very similar project - with no such issues.

Well, I'm not sure where you're replicating that. That's not the lines or error IE8 gives me. IE8 gives me:
Message: Expected ':'
Line: 132
Message: Expected ':'
Line: 134
Message: Expected ':'
Line: 148
Message: Expected ':'
Line: 151
Message: Expected ':'
Line: 152
Message: Expected ':'
Line: 153
Message: Expected ':'
Line: 160
Message: Expected ':'
Line: 165
Message: Expected ':'
Line: 169
Which refers to these lines:
<span onclick="getLists({listsdata::ID})">{listsdata::name}</span>
<LI spry:repeat="listdata"> {name} <input type="button" value="-List" onclick="deleteList({ID})" />
<span ondblclick="displayEditItem({itemdata::ID})" id="display{itemdata::ID}" class="showitem">{itemdata::name}
<input type="button" value="E" onclick="displayEditItem({itemdata::ID})" />
<input type="button" value="-Item" onclick="deleteItem({itemdata::ID},{ID},{groupid})" />
<input type="button" value="Save" onclick="editItem({itemdata::ID},{ID},{groupid})" />
<input type="button" value="+Item" onclick="addItem({ID},{groupid})" />
<input type="button" value="+List" onclick="addList({listheader::groupid})" />
Which is an odd subset of variable binding within Spry regions. Other browsers show no error, IE8 displays no further errors (this is only on the initial loading of the XMLDataSets).

Dissapearing Spry regions

I have two Spry:regions coming from two different datasets
(vars I loaded in the head), NOT nested (they are independant,
self-contained, spry:regions (divs)). When I render, only the first
dataset is showing. However if I repeat the one dataset showing, it
shows twice. How do I get the second spry:region to appear and stay
onscreen? It appears briefly on the screen as the page loads, but
this entire spry:region of the different dataset, dissapears
completely, after retrieval of the XML, with no javascript errors.
This is happenign in both Netscape8.1 and IE7.

part of The CSS for center divs:
/* center column divs
===================================================*/
#centerColumn {
margin:0px;
padding:0px;
display:block;
position:absolute;
width:497px;
left:219px;
top:150px;
height:100%;
#welcomeStoryArea {
margin:0px;
padding:0px;
display:block;
position:relative;
float:left;
width:497px;
height:136px;
background-image:url(../images/RM_welcome_bkgrd.jpg);
background-repeat:no-repeat;
#wakeUpCall {
display:block;
float:left;
clear:left;
margin:10px 0 0 0;
padding:0px;
position:relative;
left:0px;
width:491px;
#DundeeCoverageUniverse {
display:block;
float:left;
clear:left;
margin:10px 0 0 0;
padding:0px;
position:relative;
left:0px;
width:491px;
#dsRecentDundee {
display:block;
float:left;
clear:left;
margin:10px 0 0 0;
padding:0px;
position:relative;
left:0px;
width:491px;
visibility:visible;
/* Welcome Story area styles
===================================================*/
The Head part of HTML for laoding the variables:
<head>
<title>Dundee Research</title>
<link rel=stylesheet type="text/css"
href="../css/research.css" />
<script type="text/javascript"
src="../js/xpath.js"></script>
<script type="text/javascript"
src="../js/SpryData.js"></script>
<script type="text/javascript"
src="../js/research.js"></script>
<script language="javascript" type="text/javascript"
src="/js/dwm_functions.js"></script>
<script language="javascript" type="text/javascript"
src="/js/dwm_toggle.js"></script>

<script type="text/javascript">
var wakeUpCall = new
Spry.Data.XMLDataSet("../data/wakeUp.xml",
"wakeUp/report",{useCache:false});
var dsRecentDundee = new
Spry.Data.XMLDataSet("../data/RecentDundeeResearch.xml",
"recent/dundee", {useCache:true});
var dsDundeeUniverse = new
Spry.Data.XMLDataSet("../data/DocumentServlet.xml",
"DundeeUniverse/Record");
</script>
</head>
The DIv that is causing the problem:

<div id="centerColumn">

<div id="welcomeStoryArea">
<h3>Welcome to Dundee Research</h3>
<P>jdlfgkjd ldfkjg ldfkjg ldfkgj ldfkgj ldfkgj ldfkjg
ldfkjgld kfjgld kjdlfgkjd lfkgjdlfk gjdlfkgjd lkjgldfkgjdl
fkjg</P>
</div>



<div spry:region="wakeUpCall" id="wakeUpCall">
<p class="tbl_title">Wake-up Call</p>
<table border="0" cellpadding="5" cellspacing="2"
width="491">
<tr>
<th class="tbl_header" scope="col"
onclick="wakeUpCall.sort('date'); " width="97">Date
Published</th>
<th class="tbl_header" scope="col"
onclick="wakeUpCall.sort('title'); "
width="379">Title</th>
</tr>
<tr spry:repeat="wakeUpCall">
<td class="tbl_cell">{wakeUpCall::date}</td>
<td class="tbl_cell"><a
href="#">{wakeUpCall::title}</a></td>
</tr>
</table>
<p class="more"><a
href="#">more</a></p>
</div>


<div id="DundeeCoverageUniverse">
<p class="tbl_title">Dundee Coverage Universe</p>
<table border="0" cellpadding="5" cellspacing="2"
width="491">
<tr>
<th class="tbl_header_noSort" width="97">Date
Published</th>
<th class="tbl_header_noSort"
width="379">Title</th>
</tr>
<tr>
<td class="tbl_cell">23-20-2007</td>
<td class="tbl_cell"><a href="#">Esitimates and
Recommendations 23-Feb-07</a></td>
</tr>
</table>
</div>



<div spry:region="dsRecentDundee" id="dsRecentDundee">
<p class="tbl_title">Recent Dundee Research</p>
<table border="0" cellpadding="5" cellspacing="2"
width="491">
<tr>
<th class="tbl_header" scope="col"
onclick="dsRecentDundee.sort('date'); " width="97">Date
Published</th>
<th class="tbl_header" scope="col"
onclick="dsRecentDundee.sort('title'); "
width="379">Title</th>
</tr>
<tr spry:repeat="dsRecentDundee">
<td class="tbl_cell">{dsRecentDundee::date}</td>
<td class="tbl_cell"><a
href="#">{dsRecentDundee::title}</a></td>
</tr>
</table>
<p class="more"><a
href="#">more</a></p>
</div>

</div>

Text
Text
The sample XML file of RecentResearch:
<?xml version="1.0" encoding="iso-8859-1"?>
<recent>
<dundee id="1">
<date>28-02-2007</date>
<title>Focus on the Juniors - 2007: Dundee's Mineral
Exploration Stock Watch</title>
</dundee>
<dundee id="2">
<date>23-02-2007</date>
<title>Canadian Banks - No Need to Fear the
Future</title>
</dundee>
<dundee id="3">
<date>19-02-2007</date>
<title>Aeroplan Income Fund - Set to
Soar</title>
</dundee>
<dundee id="4">
<date>13-02-2007</date>
<title>Mirabela Nickel Limited - Succeeding at Santa
Rita</title>
</dundee>
<dundee id="5">
<date>07-02-2007</date>
<title>Breaker Energy Ltd. - Stable & Consistent
Growth in a Wave of Uncertainty</title>
</dundee>
</recent>
The sample XML file that is working:
<?xml version="1.0" encoding="iso-8859-1"?>
<wakeUp>
<report id="1">
<date>08-03-2007</date>
<title>CCL, Current Market Statisitics, Daily Summary,
Estimate Tables</title>
</report>
<report id="2">
<date>08-03-2007</date>
<title>CCL, Current Market Statisitics, Daily Summary,
Estimate Tables</title>
</report>
<report id="3">
<date>07-03-2007</date>
<title>SW, Current Market Statisitics, Daily Summary,
Estimate Tables</title>
</report>
<report id="4">
<date>06-03-2007</date>
<title>ACG, TET.UN, Current Market Statisitics, Daily
Summary, Estimate Tables</title>
</report>
<report id="5">
<date>05-03-2007</date>
<title>Current Market Statisitics, Coming Events,
Daily Summary, Estimate Tables</title>
</report>
</wakeUp>
Text

Animated gif does not work in spry region

Trying to display an animated gif while xml file is loading.
The gif displays while loading but does not animate in the spry region.
<div spry:region="dslistings">
<div id="loadXML" spry:state= "loading"><img src="loadinganimated.gif"/></div>
<div spry:state="ready" </div>
Thank you in advance for any help.
Jeff

I believe you are correct, I tried to place the same animated gif outside of the spry region
and it also did not animate until the xml (approximately 500 records) loaded and completed displaying.
Once the xml loaded, the gif outside of the spry region started to animate.
So how then could you display some sort of animated loading indication?
Thank you
jeff

Date Field Displaying and DML Operations

Hi all,
I have an issue with displaying and updating date columns that I'm hoping someone can assist me with.
I'm using APEX 3.0.1.
I have a Form page with a number of fields sourced from one database table that are being populated by an Automatic Row Fetch On Load - After Header.
The Item P6_MONTHFOR is stored as a Date datatype in the table and displayed on the form using the Date Picker (use Item Format Mask). I have a Format Mask set as 'MON-RR'. I want to ensure that the last day of the month is saved back to the database table so have been trying various calculation techniques to try and achieve this but am experiencing a variety of SQL errors!
I have tried using LAST_DAY(:P6_MONTHFOR) in the Post Calculation Computation, or as a separate Computation After Submit.
I have also tried having P6_MONTHFOR as a hidden column and using display Items and then trying Item calculations to then update the value of P6_MONTHFOR column prior to DML operations but to no avail.
The only DML operations allowed on these rows are DELETE and UPDATE and I'm using an Automatic Row Processing (DML) On Submit - After Computations and Validations process to control these operations.
Any help or suggestions greatly appreciated :-)
Kind Regards,
Gary.

the function LAST_DAY is a date function, expecting a date as input. Since it is all web, the values of items are as string/varchar2. In order to use date-function, you have to first make it a date with to_date() with the format-mask (DD-MON-RR).
In my opinion Dates are still tricky, it would be great if ApEx would have a DV() function, next to the V() and NV() functions, It is in ApExLib (of Patrick Wolf)
Simon

CSS and Spry not displaying

Hi, I have recently created a website using Dreamweaver. I don't know much coding at all so I did it using the design view. It is a very basic site. Just one page, styled with CSS and with Spry Tabbed Panels to reveal 4 different 'pages'
I have uploaded my website folder to the server via ftp but none of the CSS, images or spry are displaying.
I uploaded one folder which contained 2 subfolders and one html file
-SubFolder 1: Spry Assets
-SubFolder 2: Images
-index.html (with internal .css)
I can see that the folders have been uploaded but for some reason they are not being read. I would really appreciate some help as my web host says they can't help me. I can send you the html file or whatever you need if you would like to take a look. It really is a very simple website so i'm sure it wouldn't take one of you geniuses very long to figure it out!
Cheers

Thanks for your quick responses guys! Hopefully I can reach a solution with this.
In answer to your questions:
- Yes, I defined a local site folder in Dreamweaver. That is the folder I uploaded via ftp.
-Am I working with valid code? I don't know. I have not touched any of the code. I used 'design view' in Dreamweaver. Previewed in Firefox, Safari and IE and it works with no problems.
Below is the code for index.html and below that is the css code for spry tabbed panels.
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DMH Window Cleaning</title>
<style type="text/css">
.main {
    background-color: #0e414f;
    height: 480px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
.right {
    background-color: #FFF;
    float: left;
    height: 440px;
    width: 460px;
    border-right-width: 20px;
    border-right-style: solid;
    border-right-color: #0e414f;
    margin-top: 20px;
.logo {
    float: left;
    border-right-width: 20px;
    border-left-width: 20px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #0e414f;
    border-left-color: #0e414f;
    margin-top: 20px;
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main"><img src="images/DMHLogo.png" width="440" height="440" class="logo" />
<div class="right">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">HOME</li>
        <li class="TabbedPanelsTab" tabindex="0">SERVICES</li>
        <li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
        <li class="TabbedPanelsTab" tabindex="0">CONTACT</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <h1>DMH Window Cleaning is your local window cleaning service for Ipswich, Martlesham and Kesgrave. </h1>
          <p> </p>
          <p>DMH offers an interior and exterior window cleaning service for domestic and commercial properties. </p>
          <p>We have been providing a professional, reliable and regular window cleaning service to hundreds of happy customers for the past 16 years. </p>
          <p>            Just use the links above find out more, alternatively <br />
          send us an email or request a free quote</p>
          <h2> </h2>
</div>
        <div class="TabbedPanelsContent">
          <h1>We offer a range of services to domestic and commercial properties</h1>
          <p>Services: </p>
          <ul>
            <li> Window Cleaning Interior and Exterior</li>
            <li> Guttering</li>
            <li> UPVC Cleaning</li>
            <li> Conservatories          </li>
            <li>Domestic Properties </li>
            <li> All sills included free</li>
          </ul>
<p> </p>
<p><span class="servicesHeading"><strong>Domestic Properties<br />
</strong></span>
- Services offered on a once a month basis          </p>
<p><span class="servicesHeading"><strong>Commercial Properties<br />
</strong>          </span>
          - Services offered on a weekly, two weekly or monthly basis.</p>
        </div>
        <div class="TabbedPanelsContent">
          <h1>We have been providing a professional and reliable window cleaning service for the past 16 years</h1>
          <p class="quoteboxes">"DMH has been our window cleaner for many years and<br />
I would have no hesitation in recommending him. David<br />
is quick, reliable and does a great job!"<br />
<strong class="QuoteName">Ruth Carley, General Manager, Punch and Judy, Ipswich</strong></p>
          <p class="quoteboxes">"David works to a high standard and is professional, he<br />
cleans the inside and outside of Jamie Cann House. David <br />
is punctual and reliable"<br />
          <strong class="QuoteName">Teresa Page, Jamie Cann House, Ipswich</strong></p>
</div>
        <div class="TabbedPanelsContent">
          <h1>Request a free, no obligation quote<br />
          </h1>
<p>If you would like to request a no obligation quote then please do so by email or phone. </p>
          <p>email: [email protected]<br />
            phone: xxx</p>
          <p><strong>Payment</strong></p>
          <p>Please make cheques made payable to:<br />
            'DMH Window Cleaning'</p>
          <p>and post to:<br />
            6 Bramley Hill<br />
            Ipswich<br />
            IPX XXX</p>
          <p>We also accept cash in person. Details will be posted through your door once the job has been completed.</p>
        </div>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Then I also have a separate 'Spry Assets' folder which has 2 files in it.
1. SpryTabbedPanels.js
2. SpryTabbedPanels.css
the css code for tabbed panels is:
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    background-color: #0e414f;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    background-color: #d7df25;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    text-align: center;
    width: 115px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #0e414f;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
    background-color: #d7df25;
    font-size: 12px;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
    background-color: #0e414f;
    color: #d7df25;
    font-size: 12px;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
    color: black;
    text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
    clear: both;
    background-color: #EEE;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
    overflow: hidden;
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible .quoteboxes strong {
    padding-top: 5px;
.QuoteName {
    padding-top: 20px;
    line-height: 20px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
.TabbedPanelsContent h1 {
    color: #0e414f;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 20px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #d7df25;
    padding-bottom: 10px;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #d7df25;
    padding-top: 10px;
li {
    color: #0e414f;
.servicesHeading {
.TabbedPanelsContent h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0e414f;
.quoteboxes {
    background-image: url(../images/quotebox2.png);
    height: 105px;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
    width: 400px;
.quoteRight {
    background-image: url(../images/quoteboxright.png);
    background-repeat: no-repeat;
    height: 100px;
.TabbedPanelsContent P {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0e414f;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
    overflow: hidden;
    zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
    overflow: visible !important;
.TabbedPanelsContentGroup {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
.TabbedPanelsContent {
    overflow: visible !important;
    display: block !important;
    clear:both !important;
.TabbedPanelsTab {
     overflow: visible !important;
     display: block !important;
     clear:both !important;
h1 {
    font-weight: bold;
.bottomBox {
    background-color: #0e414f;
    width: 1020px;
    margin-right: auto;
    margin-left: auto;
.box {
    background-color: #0e414f;
    width: 900px;

Air and spry (adding observer and addEventListener to spry regions links to open for a new window)

I'm trying to add a region.addobserver and addEventListener to spry regions so the links; that come for a external feed, opens in a new(default browser) window when clicked. The on* events in regions do not work in AIR so, is there a way to do this?
I have read a lot of the documentation on spry regions, addObserver and the addEventlistener but the samples don't deal with anything about external xml feeds with links in a spry region for a AIR app.
The closiest i saw was the gallery http://labs.adobe.com/technologies/spry/articles/air/photo_gallery.html, but it doesn't deal with:
links,
in a external RSS feed,
in the spry region,
to a new default browser.
Has anybody tried this before? Can it be done?
Ex:
          <div spry:region="rssDataNews" class="SpryHiddenRegion">
          <div spry:state="loading" id="notification2">Loading feeds, please wait ...<img src="assets/spinner.gif"></div>
          <div spry:state="error">Failed to load data! Please try again later</div>
            <table width="100%" spry:state="ready">
              <tr spry:repeat="rssDataNews" class="{ds_EvenOddRow}" spry:select="mySelectClass">
                <td class="cellPad">
                <span style="font-weight:bold">{title}</span><br /><br />
                {description}<br />
                 <a href="{link}" target="_blank">[Read full article]</a><br /><br />
                </td>
              </tr>
            </table>
      <div>
The <a href > only opens the url in the native AIR window. I need it to open in a web browser.
Message was edited by: dee12345654321

About on* events
They do work, but not as attribute on your HTML elements, you will need to use eventlisteners to attach them on the relevant nodes.
How: http://labs.adobe.com/technologies/spry/samples/dom_utils/add_event_listener.html
About links
Currently in Adobe AIR, its not (easily) possible to open or execute other programs on the users PC. I have seen die hard hacker user Java to get around this limitation. But i suggest you check out the Adobe AIR forum to confirm that you cant open links in the users browser.
But, Adobe AIR is basically a browser

Spry region drop-down list problems in IE

Can someone please help me determine the reason that IE does not display the correct item in a spry region drop-down list when first opening the site. You can see the problem at http://www.minursemap.org/agedistnurse.html. The initial item in the drop-down list should be Alcona with the corresponding graphic displayed in the detail region. In Firefox, this works correctly. When first opening the page in IE, the graphic is Alcona, but the drop-down list displays Wexford (the last item in the list). From then on, all of the links work correctly.
The code for the two regions is below. Thanks in advance for assisting someone new to spry.
<div id="ctyname">
     <div spry:region="dsChartNurse">
       <select name="name" spry:repeatchildren="dsChartNurse" onchange="dsChartNurse.setCurrentRow(this.value)">
         <option value="{ds_RowID}">{name}</option>
       </select>
</div> 
</div>
<div id="image">
   <div spry:detailregion="dsChartNurse">
        <div align="center" style="padding-bottom:15px"><img src="{dataimage}" width="405" height="202" />
        </div>
   </div>
</div>

Try the following code to replace yours:
       <select name="name" spry:repeatchildren="dsChartNurse" onchange="dsChartNurse.setCurrentRow(this.value)">
         <option spry:if="{dsChartNurse::ds_RowID}=={dsChartNurse::ds_CurrentRowID}" spry:selected="selected" value="{ds_RowID}">{name}</option>
         <option spry:if="{dsChartNurse::ds_RowID}!={dsChartNurse::ds_CurrentRowID}" value="{ds_RowID}">{name}</option>
       </select>
I hope this helps.
Ben

Why cannot I use hidden or display only item to store value for insert?

hi, Gurus:
I have a question:
I implemented a form with report region in a page, the update works OK, but the add function has a problem:
There is a column, offender_ID, which is a foreign key for another table, it should not be null during insert. However, even I pass the offender ID from master page when user click the create button, and it did shows in the form, it must be a text filed to insert successfully, why cannot I use hidden or display only item to store this value for insert? (If I use hidden or display only item, insert won't be successful, apex reports I tried to insert a null value to offender_ID column.)
Many Thanks in advance.
Sam

Hi,
There is a column, offender_ID, which is a foreign key for another table, it should not be null during insert. However, even I pass the offender ID from master page when user click the create button, and it did shows in the form, it must be a text filed to insert successfully, why cannot I use hidden or display only item to store this value for insert? (If I use hidden or display only item, insert won't be successful, apex reports I tried to insert a null value to offender_ID column.)I think both hidden and display items have attributes that can cause problems because of different ways these items function than non-hidden and non-display-only items function. Display Only items have a "Setting" of "Save Session State" Yes/No? That can be a problem.
Would you do this? Make these items regular items instead and see if you can get those working. Then, we will try to change the fields back to hidden or display only.
Howard
Congratulations. Glad you found the solution.
Edited by: Howard (... in Training) on Apr 11, 2013 10:26 AM

Graph label in Drill down graph to display only the lowest level label

Recently I have upgraded from OBIEE 10 to 11g.
Some reports have a country -> region -> branch drilldown, for which hierarchy is created in business layer of RPD. The graph, drills down from Country -> Regions -> Branches and displays the measures accordingly. But the horizontal label displays the full hierarchy , like CountryName,RegionName and Branch Name. In 10g, I used to get the Branch name only in the axis label.
I would like to display only the Region names when Country is drilled down and the branch name alone when the Region is drilled down.
Kindly help.

In 11g it is bug....
For this u should create 3 individual reports (1 for country, 2. Region, 3. Branch) and give action link one to another.
for filter make sure the required column "Is Prompted" for every detailed reports.
Pls mark if it helps
-Chinna

Region Display Selector - 2nd tab selected

Hello
I have implemented the Region Display Selector plugin and modified my APEX 4.02 page so that the 2nd tab is selected on page load (i.e. not the Show All tab). The code I used to achieve this is:
$('div.apex-rds-container li:eq(1) a').click()this is done on page load.
This works fine when the page is run on its own - but the page in my application is part of a jquery accordion. When the page is part of the accordion, the 2nd tab gets selected, but I still get all regions displayed initially - clicking on each tab works so that I only get the single region displayed, but I need to have it so only one region is displayed initially (i.e. the region for the second tab which is highlighted).
Can anyone help with this issue please - or suggest other resources that may help.
Many thanks
Paul

I spoke to soon.... The reason the code appeared to working is because I had an alert in the on load code of the parent page:
alert("wait");
$("OTHER").load(function (){
$('OTHER').contents().find('div.apex-rds-container li:eq(1) a').click();
});and I was waiting for the accordion to render before clicking ok to the alert. This was then giving me the desired result.
However, with the alert removed, all tabs are still displayed in the iframe page - so it like the code is firing before the accordion has rendered?
Any ideas on how to work-around this without the alert?
Many thanks
Paul

Spry Regions display *only* in Opera

Similar Messages

Maybe you are looking for

Spry Regions display only in Opera