Sliding Panels and Detail Regions

I'm trying to get a detailregion div to update whenever the
panel in a sliding panels widget changes. Basically, whatever panel
it's on, the detailregion div will change depending on what that
panel is. Is this possible? I've tried using setrow but I'm not
sure if I'm doing it right.

Hi, thanks for your reply.
At the moment the player does stops when you go to another page (not slide) and doesnt keep playing. Its all working very well on the pages. See test page
http://homepage.mac.com/nigelgrimshawjones/Candy_Lane/index.html
Its just that on the shows events page there are sliding panels where we go through each show. For each new show (panle) she wants a different song to automatically play.
I have set it up with a seperate player for each slide but unlike going from page to page, from slide to slide the music doesnt stop by itself. The test site has the old version with just one player at the top.
There probably is something I could do in Flash but I dont know what. Its a complicated thing (for me)
I was wondering if I could just use html music for those slides. I only need one song to play for each slide. But I need the song to stop when it goes to the next slide, (and the next song to start obviously)
Any ideas are much appreciated. This job is supposed to be finished and its the last request from the client.
Nige

Similar Messages

Trying to come to grips with sliding panels and datasets

Hi there!
I've just started looking into Spry (love it so far!) but
having an issue combining the sliding panels widget and a Spry
dataset. The widget works fine and the dataset works fine when
seperate, but I come up against some problems when I combine them.
As a guide, I've been using the following page:
http://www.pixelz.co.uk/spryArticle.htm
(copy of the article in the Spry Zip file)
and using the Scenario 2 example at the end of the page.
Unfortunately, there were a few bugs in it (like a colon
where there should have been a semicolon and no titles in the
navigation <a> tags at the top) so I did a little debugging
and tied in my own dataset. The code that is running on this page (
http://www.pixelz.co.uk/spryTest.html)
looks like so:
quote:
<head>
<script language="javascript" type="text/javascript"
src="includes/xpath.js"></script>
<script language="javascript" type="text/javascript"
src="includes/SpryData.js"></script>
<script language="javascript" type="text/javascript" >
var dsTest = new Spry.Data.XMLDataSet("data/xmlTest.xml",
"specials/menu_item");
</script>
<script language="javascript" type="text/javascript"
src="includes/SprySlidingPanels.js"></script>
<link href="includes/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div spry:region="dsTest" spry:repeatchildren="dsTest">
<a href="#"
onclick="sp1.showPanel('detail{ds_RowID}');">Page
{ds_RowID}</a>
</div>
<div id="sPanel" class="SlidingPanels"
spry:region="dsTest">
<div class="SlidingPanelsContentGroup"
spry:repeat="dsTest">
<div id="detail{ds_RowID}"
class="SlidingPanelsContent">
<h3>{item}</h3>
<p>{description}</p>
<p><strong>{price}</strong></p>
</div>
</div>
<script language="javascript" type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("sPanel");
</script>
</div>
</body>
The problem I'm having is that the panels don't change when
the links are clicked. It seems to pull in the data fine, but the
panels dont switch.
When I looked at the generated source, it doesn't look quite
right:
quote:
<body>
<div id="spryregion1" class="">
<a onclick="sp1.showPanel('detail0');" href="#">Page
0</a>
<a onclick="sp1.showPanel('detail1');" href="#">Page
1</a>
<a onclick="sp1.showPanel('detail2');" href="#">Page
2</a>
<a onclick="sp1.showPanel('detail3');" href="#">Page
3</a>
</div>
<div id="sPanel" class="SlidingPanels" style="overflow:
hidden;">
<div class="SlidingPanelsContentGroup" style="left: 0px;
top: 0px;">
<div id="detail0" class="SlidingPanelsContent
SlidingPanelsCurrentPanel">
</div>
</div>
<div class="SlidingPanelsContentGroup" style="left: 0px;
top: 0px;">
<div id="detail1" class="SlidingPanelsContent
SlidingPanelsCurrentPanel">
</div>
</div>
<div class="SlidingPanelsContentGroup" style="left: 0px;
top: 0px;">
<div id="detail2" class="SlidingPanelsContent
SlidingPanelsCurrentPanel">
</div>
</div>
<div class="SlidingPanelsContentGroup" style="left: 0px;
top: 0px;">
<div id="detail3" class="SlidingPanelsContent
SlidingPanelsCurrentPanel">
</div>
</div>
</div>
</body>
I'm not sure, but I think the repeating region is a bit
screwy, but I'm really not sure where to proceed from here.
Any help would be appreciated! Thanks!
Gareth

Right - fixed it!
<div class="SlidingPanelsContentGroup"
spry:repeat="dsTest">
<div id="detail{ds_RowID}"
class="SlidingPanelsContent">
should have read
<div class="SlidingPanelsContentGroup">
<div id="detail{ds_RowID}" class="SlidingPanelsContent"
spry:repeat="dsTest">
oh well...

Locking markers position at markers panel and multiple regions batch processing

Greetings,
I have one problem with markers, when I hover mouse over any marker item at Markers panel and unintentionally scroll the wheel in the effort to scroll the whole list, the marker time value is shifted instead. This is extremely unconvenient as the precisely selected region changes it's position, eventually even without letting user to know. Wanted to aski if that adjusting times using wheel (which I found useles beside it) is turnable off so that all markers are imune against any scrolling the wheel over Markers list.
2nd question - Is it possible to define a batch of for each of marked ranges, ie. set the parameters for each task individually? I need to stretch a long audio track with many regions from whose each uses specific stretch ratio.

I've never used it, but the Automate to Sequence feature has the option to add clips at the Unnumbered Markers.

Select List and detail region

db11gxe , apex 4.0 , firefox 24 ,
hi all ,
i have a master detail page , with an item "test_id" as a select list ,
and a detail region has also a column "test_id" ,
what i want is :
when i change the value of the master "test_id" , the data is retrieved in the detail region where "test_id" = "master_test_id" ;
how to do so ?
thanks

Newbi_egy
Do you mean that when you change the test in the master you want to refresh the detail?
Can you put up an example of your tables and foreign keys etc. on apex.oracle.com.
To me this sounds a wrong model design.
The detail should only depend on the primary key of the master. And the primary key shouldn't be updatable.
Nicolette

Nested sliding panels and xml

In this picture I try to explain my data set and the result I'm trying to obtain.
I can't however figure out how to do this without nested regions.
My code looks like this:
<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CPS</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CP_ents" class="CollapsiblePanel">
     <div class="CollapsiblePanelTab" tabindex="0">
          <table>
               <tr>
                    <td spry:when="{ds_CurrentRowID} == {ds_RowID}"
                             spry:setrow="ds_ents"
                                   spry:select="select"
                                   spry:hover="hover"
                                   spry:selected="">+</td>
                    <td>{ds_ents::id}</td>
               </tr>
          </table>
     </div>
     <div class="CollapsiblePanelContent" spry:region="ds_ents">
          <table>
               <tr spry:repeatchildren="ds_servs" spry:choose="">
                    <td> </td>
                    <td><div id="CP_servs" class="CollapsiblePanel">
                              <div class="CollapsiblePanelTab" tabindex="1">
                                   <table>
                                        <tr>
                                             <td width="50">+ servs</td>
                                             <td width="50">id</td>
                                             <td width="50">att1</td>
                                             <td width="50">att2</td>
                                        </tr>
                                   </table>
                              </div>
                              <div class="CollapsiblePanelContent" spry:region="ds_servs">
                                   <table>
                                        <tr spry:repeatchildren="ds_servs">
                                             <td width="50"> </td>
                                             <td width="50">{id}</td>
                                             <td width="50">{att1}</td>
                                             <td width="50">{att2}</td>
                                        </tr>
                                   </table>
                              </div>
                         </div>
                         <div id="CP_conts" class="CollapsiblePanel">
                              <div class="CollapsiblePanelTab" tabindex="2">
                                   <table>
                                        <tr>
                                             <td width="50">+ conts</td>
                                             <td width="50">id</td>
                                             <td width="50">att1</td>
                                             <td width="50">att2</td>
                                        </tr>
                                   </table>
                              </div>
                              <div class="CollapsiblePanelContent" spry:region="ds_conts">
                                   <table>
                                        <tr spry:repeatchildren="ds_conts">
                                             <td width="50"> </td>
                                             <td width="50">{id}</td>
                                             <td width="50">{att1}</td>
                                             <td width="50">{att2}</td>
                                        </tr>
                                   </table>
                              </div>
                         </div>
                         <div id="CP_stats" class="CollapsiblePanel">
                              <div class="CollapsiblePanelTab" tabindex="3">
                                   <table>
                                        <tr>
                                             <td width="50">+ stats</td>
                                             <td width="50">id</td>
                                             <td width="50">att1</td>
                                             <td width="50">att2</td>
                                        </tr>
                                   </table>
                              </div>
                              <div class="CollapsiblePanelContent" spry:region="ds_stats">
                                   <table>
                                        <tr spry:repeatchildren="ds_stations">
                                             <td width="50"> </td>
                                             <td width="50">{id}</td>
                                             <td width="50">{att1}</td>
                                             <td width="50">{att2}</td>
                                        </tr>
                                   </table>
                              </div>
                         </div></td>
               </tr>
          </table>
     </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
and this is the XML data set:
<?xml version="1.0" encoding="UTF-8"?>
<ents>
     <ent>
          <id>0</id>
          <att1>pippo</att1>
          <servs>
               <serv>
                    <id>A</id>
                    <att1>blah</att1>
                    <att2>bla</att2>
               </serv>
               <serv>
                    <id>B</id>
                    <att1>bloh</att1>
                    <att2>blo</att2>
               </serv>
               <serv>
                    <id>C</id>
                    <att1>bluh</att1>
                    <att2>blu</att2>
               </serv>
          </servs>
          <conts>
               <cont>
                    <id>a</id>
                    <att1>hwrtfgh</att1>
               </cont>
               <cont>
                    <id>b</id>
                    <att1>asdf</att1>
               </cont>
          </conts>
          <stats>
               <stat>
                    <id>1</id>
                    <att1>FDSA</att1>
                    <att2>OIUY</att2>
               </stat>
               <stat>
                    <id>2</id>
                    <att1>Bm76g</att1>
                    <att2>87f5r6</att2>
               </stat>
               <stat>
                    <id>3</id>
                    <att1>iugy</att1>
                    <att2>TY765</att2>
               </stat>
               <stat>
                    <id>4</id>
                    <att1>YT d</att1>
                    <att2>f865f</att2>
               </stat>
          </stats>
     </ent>
     <ent>
          <id>1</id>
          <att1>pluto</att1>
          <servs>
               <serv>
                    <id>A</id>
                    <att1>muuh</att1>
               </serv>
               <serv>
                    <id>B</id>
                    <att1>mooh</att1>
               </serv>
               <serv>
                    <id>C</id>
                    <att1>meeh</att1>
               </serv>
          </servs>
          <conts>
               <cont>
                    <id>a</id>
                    <att1>uff</att1>
               </cont>
               <cont>
                    <id>b</id>
                    <att1>aff</att1>
               </cont>
          </conts>
          <stats>
               <stat>
                    <id>1</id>
                    <att1>KJHGKJGH</att1>
                    <att2>TRSDYTRD</att2>
               </stat>
               <stat>
                    <id>2</id>
                    <att1>TRUTFC</att1>
                    <att2>POJNC</att2>
               </stat>
               <stat>
                    <id>3</id>
                    <att1>EWZYT</att1>
                    <att2>OUYTFSA</att2>
               </stat>
               <stat>
                    <id>4</id>
                    <att1>XGBUI</att1>
                    <att2>IUGDS</att2>
               </stat>
          </stats>
     </ent>
</ents>

Step by step I'm closing in.
I'm using the {ds_currentRowId} variable to increment the div panel ID (see code below)
The only issue is that since I have 1 master dataset and three detail dataset nested, I need to calculate the ID, taking the {ds_CurrentRowID} for each dataset and perform some math, to ensure they nicely grow until all the XML is consumed.
Anyone would be so nice to point me in the right direction?
<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CPS</title>
     <script src="SpryAssets/xpath.js" type="text/javascript"></script>
     <script src="SpryAssets/SpryData.js" type="text/javascript"></script>
     <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
     <script src="SpryAssets/SpryNestedXMLDataSet.js" type="text/javascript"></script>
     <script type="text/javascript">
     
     </script>
     <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
     <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="panel" spry:repeat="ds_ents" spry:region="ds_ents ds_cnts ds_srvs ds_stts">
     <script type="text/javascript">
          
     </script>
          <div id="CP_ents{ds_ents::ds_CurrentRowID}" class="CollapsiblePanel">
               <div class="panel-title" tabindex="{ds_ents::ds_CurrentRowID}">
                    <table class="table-title">
                         <tr>
                              <td width="150">+</td>
                              <td width="150">{id}</td>
                              <td width="150">{att1}</td>
                         </tr>
                    </table>
               </div>
               <div spry:even="table-even" spry:odd="table-odd">
                    <table>
                         <tr>
                              <td> </td>
                              <td>
                                   <script type="text/javascript">
                                        
                                   </script>
                                   <div id="CP_srvs{ds_srvs::ds_CurrentRowID}" class="CollapsiblePanel">
                                        <div class="subtable-title" tabindex="{ds_srvs::ds_CurrentRowID}">
                                             <table>
                                                  <tr>
                                                       <td width="150">+ srvs</td>
                                                       <td width="150">id</td>
                                                       <td width="150">att1</td>
                                                  </tr>
                                             </table>
                                        </div>
                                        <div spry:even="subtable-even" spry:odd="subtable-odd">
                                             <table>
                                                  <tr spry:repeat="ds_srvs">
                                                       <td width="150"> </td>
                                                       <td width="150">{ds_srvs::id}</td>
                                                       <td width="150">{ds_srvs::att1}</td>
                                                  </tr>
                                             </table>
                                        </div>
                                   </div>
                                   <div id="CP_cnts{ds_cnts::ds_CurrentRowID}" class="subtable">
                                        <div class="subtable-title" tabindex="{ds_cnts::ds_CurrentRowID}">
                                             <table>
                                                  <tr>
                                                       <td width="150">+ cnts</td>
                                                       <td width="150">id</td>
                                                       <td width="150">att1</td>
                                                       <td width="150">att2</td>
                                                  </tr>
                                             </table>
                                        </div>
                                        <div spry:even="subtable-even" spry:odd="subtable-odd">
                                             <table>
                                                  <tr spry:repeat="ds_cnts">
                                                       <td width="150"> </td>
                                                       <td width="150">{ds_cnts::id}</td>
                                                       <td width="150">{ds_cnts::att1}</td>
                                                       <td width="150">{ds_cnts::att2}</td>
                                                  </tr>
                                             </table>
                                        </div>
                                   </div>
                                   <div id="CP_stts{ds_stts::ds_CurrentRowID}" class="CollapsiblePanel">
                                        <div class="subtable-title" tabindex="{ds_stts::ds_CurrentRowID}">
                                             <table>
                                                  <tr>
                                                       <td width="150">+ stats</td>
                                                       <td width="150">id</td>
                                                       <td width="150">att1</td>
                                                       <td width="150">att2</td>
                                                  </tr>
                                             </table>
                                        </div>
                                        <div spry:even="subtable-even" spry:odd="subtable-odd">
                                             <table>
                                                  <tr spry:repeat="ds_stts">
                                                       <td width="150"> </td>
                                                       <td width="150">{ds_stts::id}</td>
                                                       <td width="150">{ds_stts::att1}</td>
                                                       <td width="150">{ds_stts::att2}</td>
                                                  </tr>
                                             </table>
                                        </div>
                                   </div>
                              </td>
                         </tr>
                    </table>
               </div>
          </div>
     </div>
</body>
</html>

SELECT and detail Region in IE

The following code work great in Firefox but not in IE.
Basically what I'm doing is search a DB with a string and
populating a Select menu with the results. Once the select menu
populated, the user chooses a name and the details of that employee
is displayed in fields at the bottom. Like I said, it works great
in FF but got an unwanted suprise when i tested in IE.
<fieldset>
<legend>Ship To</legend>
<label for="ShipLname">Last Name:</label>
<input type="text" name="ShipLname" id="ShipLname" />
<hr>
<label for="ShipLname">First Name:</label>
<input type="text" name="ShipFname" id="ShipFname"
/><hr>
<input type="button" value="Get"
style="width:45px;margin-left:217px;"
onclick="getEmployee('ShipLname','ShipFname',dsShipTo);" />
<hr>
<div spry:region="dsShipTo">
<label for="select2">Please choose one</label>
<select name="ShipEmpID" id="label">
<option spry:repeat="dsShipTo"
onmousedown="dsShipTo.setCurrentRow('{ds_RowID}')"
value="{empid}">{fullname}</option>
</select> <span class="style1">{ds_RowCount}
Record(s) Found!</span><hr>
</div>
<div id="shipDetail2" spry:detailregion="dsShipTo" >
<label for="shipSector">Sector</label>
<input id="shipSector" name="shipSector" value="{sector}"
disabled /><hr>
<label for="shipTitle">Titler</label>
<input id="shipTitle" name="shipTitle" value="{title}"
disabled /><hr>
<label for="shipApplid">Employee ID</label>
<input id="shipApplid" name="shipApplid"
value="{employeeid}" disabled /><hr>
</div>
</fieldset>
spry call
<script>//com/employee.cfc?method=getEmployees
var dsShipTo = new
Spry.Data.XMLDataSet("com/employee.cfc?method=getEmployees&lastname=null&firstname=null",
"employees/employee");
dsShipTo.setColumnType("title","html");
</script>
Functions
function getEmployee(lname,fname, ds){
var firstname = document.getElementById(fname).value;
var lastname = document.getElementById(lname).value;
var thisURL =
'com/employee.cfc?method=getEmployees&lastname=' + lastname +
'&firstname=' + firstname;
//alert(thisURL);
ds.setURL(thisURL);
ds.loadData();
var rowCnt = ds.getRowCount();

Hii Barascu, Thank for checking this problem out with me.It's
really appreciated.
When I do the text/html, stops working in FF and still does
not work in IE.
Here is the xml cfc
<cfset ds = getEmployeesQry2(arguments.firstname)>
<Cfset xmldoc = '<?xml version="1.0"
encoding="utf-8"?><employees>'>
<cfloop query="ds">
<Cfset xmldoc = xmldoc & '<employee>
<firstname>#key_first_name#</firstname>
</employee>'>
</cfloop>
<cfset xmldoc = xmldoc & '</employees>'>
<cfcontent type="text/xml">
<cfoutput>#xmldoc#</cfoutput>
</cffunction>

Sliding panels and xml

Hi,
My basic problem is this:
Where should I nest the script tag containing the js for
making the widget when using spry:repeat="data" so that my links to
move the panels work first time? Currently they need to be clicked
once to settle things down, and then they function normally.
My code looks like this:
<div id="slidingPanel_1" class="SlidingPanels"
spry:region="ds1">
<div class="SlidingPanelsContentGroup">
<div id="content{ds_RowID}" class="SlidingPanelsContent
{function::backgroundFunc}" spry:repeat="ds1">
Do you know what {lang1word} means?
</div>
</div>
</div>
<script>
sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1")
</script>
I have tried nesting it as suggested on the overview page
like this:
<div id="slidingPanel_1" class="SlidingPanels"
spry:region="ds1">
<div class="SlidingPanelsContentGroup">
<div id="content{ds_RowID}" class="SlidingPanelsContent
{function::backgroundFunc}" spry:repeat="ds1"
style="text-align:center;">
Do you know what {lang1word} means?
</div>
</div>
<script>
sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
</script>
</div>
However I still have the same problem. However, if I opt for
the rather ghetto method of setting the creation of the widget on a
timer, everything works just fine. I have tried looking at the
sample, but I cannot fathom what the differences are!
Thanks,
Ben
PS I did notice a similar unresolved thread, I wanted to
append this post to it but I couldn't find it again.

Hi Ben,
Look at this sample, it shows you 2 methods of invoking your
constructor for a widget built-up with data:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html
Personally, the approach that I think is the best is to
register an onPostUpdate observer ... that way the constructor is
only ever called after the region is updated.
--== Kin ==--

Having trouble with flash and linking to Sliding panels - PLEASE help

Having trouble with Sliding panels and flash. Otherwise everything works fine but when I'm trying to implement the link
<a href="#" onclick="sp1.showPanel('panel1'); return false;">Panel1</a>
to a flash button I get confused. I have tried following
on (press) {
getURL("javascript:sp1.showPanel('panel1');");
and it did not work. What would you suggest? I am desperate. Please help me! Any suggestions are highly appreciated!!!!

Thanks for your answer!
I have tried both sp1.ShowPanel('panel1'); and window.sp1.ShowPanel('panel1'); they both give blank window with [object]
I have found a solution that works in other browsers, but not in IE. Well basicly it works, but after a few clicks IE freezes.
on (press) {
getURL("javascript:sp1.showPanel('panel1'); void(0);");
Would you happen to have a solution other than that? I believe that the void(0); causes the IE to freeze.

SIFR 3 and Spry Sliding Panels

I am having trouble combining spry sliding panels and sIFR 3
r419 in firefox. Implementation works perfectly in IE6 & 7 but
in FF3 the headings flicker as one panel slides out and as another
slides in.
I have tried adding sIFR.replace to onclick to combat this,
as described in another post but to no avail.
Does anyone have any suggestions?
Many thanks
Marcel

Add a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.

Safari 4 problems - HTMLDataSet/Sliding Panels

Hi,
I've been building a fairly basic photo gallery site and was having no problems with the site until I downloaded and installed Safari 4. For some reason the detailRegions are not loading properly in Safari 4. I have thumbnails in the sliding panels that load fine but the larger versions of the photos no longer appear in Safari below the sliding panels and on the right sidebar the paypal buttons no longer appear either. IE and FF seem to be working fine still. Any help would be greatly appreciated. I'm very new to this so please bear with me if I have any glaring mistakes. THANKS!!!
<!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>Flowers</title>
<link href="mainStyles.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SprySlidingPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">var ds1 = new Spry.Data.HTMLDataSet(null, "gallery", {columnNames: ['Thumbnail', 'PictureTitle', 'PictureResolution1', 'Price1', 'Button1', 'PictureResolution2', 'Price2', 'Button2', 'HiRes_Id',], rowSelector: "div.galleryItem", dataSelector: "p"});</script>
</head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
    <a href="index.html"><img src="images/dmlogo.jpg" width="400" height="100" alt="Eye Focus Photography" /></a></div>

<div id="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="index.html">Home</a></li>
      <li><a href="animals.php">Animals</a></li>
      <li><a href="barns.php">Barns</a></li>
      <li><a href="cities.php" class="MenuBarItemSubmenu">Cities</a>
        <ul>
          <li><a href="washingtondc.php">Washington DC</a></li>
          <li><a href="nyc.php">New York City</a></li>
        </ul>
      </li>
      <li><a href="fireworks.php">Fireworks</a></li>
      <li><a href="flowers.php" class="selected">Flowers</a></li>
      <li><a href="lighthouses.php">Lighthouses</a></li>
      <li><a href="misc.php">Miscellaneous</a></li>
      <li><a href="national_parks.php">National Parks</a></li>
      <li><a href="plants.php">Plants</a></li>
      <li><a href="waterfalls.php">Waterfalls</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div id="sidebar2">
     <div id="detailArea1" spry:detailregion="ds1">
          <div class="detailText">
         <h1>{PictureTitle}</h1>
         <p>{PictureResolution1}</p>
         <p>{Price1}</p>
        <p>{Button1}</p>
        <p>{PictureResolution2}</p>
         <p>{Price2}</p>
        <p>{Button2}</p>
         <br class="clearfloat"/>
         </div>
     </div>
</div>
<div id="mainContent">
    <div id="slidingGallery" class="SlidingPanels" tabindex="0" spry:region="ds1">
     <div id="galleryContentGroup" class="SlidingPanelsContentGroup">
         <div id="panelContents" class="SlidingPanelsContent" spry:repeat="ds1" spry:setrow="ds1">
        <div class="galleryItem">
        <p class="thumbnail">{Thumbnail}</p>
        <p class="pictureTitle">{PictureTitle}</p>
        </div>
        </div>
     </div>
</div>
<p id="panelNav" class="fltlft">
     <a href="#" id="firstPanel" onclick="sp.showFirstPanel(); return false;">First</a>
     <a href="#" id="previousPanel" onclick="sp.showPreviousPanel(); return false;">Previous</a>
     <a href="#" id="nextPanel" onclick="sp.showNextPanel(); return false;">Next</a>
     <a href="#" id="lastPanel" onclick="sp.showLastPanel(); return false;">Last</a>
</p>
<div id="detailArea2" spry:detailregion="ds1">
     <div class="detailImg">
    <img src="images/flowers/{HiRes_Id}" alt="{PictureTitle}" /><br class="clearfloat"/>
    </div>
</div>
<div id="gallery">
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/3454_thumb.jpg"><img src="images/flowers/3454_thumb.jpg" alt="Daisy" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Daisy</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397389"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5111872"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">3454_wm.jpg</p>
</div>
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/6586_thumb.jpg"><img src="images/flowers/6586_thumb.jpg" alt="Sun Orchid" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Sun Orchid</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397419"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397432"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">6586_wm.jpg</p>
</div>
</div>
    <br class="clearfloat"/>
     </div>
     <br class="clearfloat" />
   <div id="footer">
    <p>© 2009</p>
</div>
     </div>
<script type="text/javascript">

</script>
</body>
</html>

It doesn't work correctly in Firefox either,
If you check out generated code, you will see that the data ins't selected correctly, or that maybe your HTML is correctly.
For example.. type this in the url bar of your browser; javascript:alert(ds1.getData()[0]['HiRes_Id']); and you will see it alerts <span></span>.
So i would suggest to recheck your rowSelectors and validate your page for HTML errors.
Related documentation:
http://labs.adobe.com/technologies/spry/samples/htmldataset/RowAndDataSelectorSamples.html

Sliding divs and XML content

I was asking if the sliding panels can be populated with an XML repeating region. I used Donald Booths tutorial about sliding panels and loaded an XML 'table' like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XML Slide</title>
<script type="text/javascript"
    src="../SpryAssets/SprySlidingPanels.js"></script>
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet"
    href="../SpryAssets/SprySlidingPanels.css">
<style type="text/css">
.SlidingPanelsContentGroup {
position: relative;
width: 600px;
margin: 0px;
padding: 0px;
border: none;
.SlidingPanelsContent {
width: 300px;
height: 300px;
float:left;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
</style>
<script type="text/javascript">
var dsLet = new Spry.Data.XMLDataSet("LetItSlide_Exp_02.xml", "slide/row");
dsLet.setColumnType("order", "html");
dsLet.setColumnType("link", "html");
</script>
</head>
<body>
<a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
    href="#" onclick="sp1.showPreviousPanel();">Previous
    Panel</a> |
<a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a
    href="#" onclick="sp1.showLastPanel();">Last Panel</a> |
<a href="#" onclick="sp1.showPanel('p4');">Panel 4</a>
<div id="panelwidget" class="SlidingPanels" spry:region="dsLet">
<div class="SlidingPanelsContentGroup" spry:repeat="dsLet">
    <div class="SlidingPanelsContent" id="p{order}">{link}</div>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
</body>
</html>
I put {order} in the SlidingPanelsContent identity to number/name these Div containers. Viewing in Live Code, the code looks like I would expect it to. But when I select the next link the 'next' panel doesn't show content. What do I need to know to make this work? Is there a tutorial about this combo?

Have a look here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsFromData.html
Gramps

Background image instead of color for each sliding panel

I'm working with sliding panels and trying to add some style to the page. I have figured out how to put a different background color on each slide and even how to put a background image on the whole thing, but I cannot figure out how to use multiple images (one for each pannel). When I put the images in place of the colors it works fine in the Dreamweaver screen but totally disapears in a web browser. Here is the url:    http://www.centerofdiscovery.com/the_center_of_discovery_home_page.html
any help would be great!

Regarding getting the tabs to sit on top of the content panel, speaking generally here, make the containing div for both the tabs and the content panel to have a margin: 0 auto; setting.This is for horizontal alignment.
The blue rectangle can be belayed by setting border: none; on the specific rule that applies to the "a" links within that container. It is an indication that there is a link there.
Please rename the images that have word-spaces in their file names. Some browsers react badly to word-spaces.
I see that you have
<p>
</p><div class="slidingpanelandtab">
    <blockquote>
      <p><a onclick="sp1.showPanel(0); return false;" href="#"><img width="144" height="70" class="oneColFixCtrHdr" src="Images/panneltab.jpg"/></a><a onclick="sp1.showPanel(1); return false;" href="#"><img width="144" height="70" src="Images/panneltabb.jpg"/></a><a onclick="sp1.showPanel(2); return false;" href="#"><img width="144" height="70" src="Images/panneltaba.jpg"/></a><a onclick="sp1.showPanel(3); return false;" href="#"><img width="144" height="70" src="Images/panneltabc.jpg"/></a></p>
    </blockquote>
Which sets off your "slidingpanelandtab" class div with an empty paragraph space <p></p> and then sets off the next section not only with <p></p> paragraph spacing but also with a <blockquote></blockquote>, which will by all rights indent that element.
I suggest that you get rid of the spurious paragraph tags and the blockquote; that should tighten up your spacing.
Beth

Sliding Panels in a Div

I can load the Sliding panels and it works fine except if you
use "onload" with the Spry.Utils.updateContent.
Tried many things so far and it will not work when loaded
into a Div.
Hmmm
Can't figure out why.
Anybody have a answer why it will not run in a Div.?

Well it appears the problem is because the outer div had no
ID.
The panel works without the ID, but if you add 2 panels it
only runs the constructor for 1 of the 2 panels. The collapsible
panels content overflow was hidden for both in CSS.
Thank you Donald for prompting me to look at the code again
as it was not so apparent to see the problem.

Howto adres a detail region from another java script or href

I've set up a site with the spry regions and detail regions, loading from an external xml file.
here it is: http://www.mulleners.nl/nieuw/projecten.html
when you switch between "deventer" and "arnhem" you see the image switching, and also the amount of points on the bottom of the page. These points should show some more images of the same project. Now only the first picture is shown.
At the moment this is the image source img src="images/{nr}/1.jpg".
The {nr} is the project number, which has its corresponding folder.In this folder there are a couple of pictures (1.jpg, 2.jpg, ...etc)
So what i'm trying to do is replacing the "1" by a variable which I can adres with a java script.
Any help/suggestion on how to solve this? Or comments on the general approach?
thanks,
sven

I've set up a site with the spry regions and detail regions, loading from an external xml file.
here it is: http://www.mulleners.nl/nieuw/projecten.html
when you switch between "deventer" and "arnhem" you see the image switching, and also the amount of points on the bottom of the page. These points should show some more images of the same project. Now only the first picture is shown.
At the moment this is the image source img src="images/{nr}/1.jpg".
The {nr} is the project number, which has its corresponding folder.In this folder there are a couple of pictures (1.jpg, 2.jpg, ...etc)
So what i'm trying to do is replacing the "1" by a variable which I can adres with a java script.
Any help/suggestion on how to solve this? Or comments on the general approach?
thanks,
sven

Event handling across master/detail regions.

Hi,
I have a table displaying a few targets in the master region and the details of the selected target are shown in an other region. The selected target is passed as an input parameter to the dependent region.
Both these regions are displayed in one page. Is there a way to make the first row auto selected in the master region table and show it's contents in the dependent region ?
The trouble here is that the selected row target needs to be passed as an input parameter to the dependent region. Is there a way to fire a table selection listener after the master region has been rendered ?
Currently, we display the first region table with no rows selected. When the user selects a row, the table selection listener updates the input parameter to the detail region which then gets refreshed.
Thanks
Shankar

Hi Frank,
This is the contents of the pageDef where I'm including the master(first one) and detail regions(second one). The highlighted parameter('cohTargetName') is the selected target input parameter to the detail region.
Once the user selects a table row, I set the selected target value in emas_model_coherence_CoherenceGroupModel.selectedTarget.
Can you provide me with an example of defining this parameter in terms of the first row of the table ?
Thanks
Shankar
<pageDefinition>
<executables>
<taskFlow id="coherenceGroupRegion"
taskFlowId="WEB-INF/as/coherence/emas-coherence-group-taskflow#emas-coherence-group-taskflow"
Refresh="ifNeeded"
xmlns="http://xmlns.oracle.com/adf/controller/binding">
<parameters>
<parameter id="targetName" xmlns="http://xmlns.oracle.com/adfm/uimodel"
value="#{emas_model_coherence_CoherenceGroupModel.targetName}"/>
<parameter id="targetType" xmlns="http://xmlns.oracle.com/adfm/uimodel"
value="#{emas_model_coherence_CoherenceGroupModel.targetType}"/>
<parameter id="refreshTime" value="${viewScope.sdk_pagetemplate_model.contextHeader.timeStamp}"/>
</parameters>
</taskFlow>
<taskFlow id="coherenceNodeTableRegion"
taskFlowId="WEB-INF/as/coherence/emas-coherence-nodeTable-taskflow#emas-coherence-nodeTable-taskflow"
Refresh="ifNeeded"
xmlns="http://xmlns.oracle.com/adf/controller/binding">
<parameters>
*<parameter id="cohTargetName" xmlns="http://xmlns.oracle.com/adfm/uimodel"*
*value="#{emas_model_coherence_CoherenceGroupModel.selectedTarget}"/>*
<parameter id="targetName" xmlns="http://xmlns.oracle.com/adfm/uimodel"
value="#{emas_model_coherence_CoherenceGroupModel.targetName}"/>
<parameter id="targetType" xmlns="http://xmlns.oracle.com/adfm/uimodel"
value="#{emas_model_coherence_CoherenceGroupModel.targetType}"/>
<parameter id="refreshTime" value="${viewScope.sdk_pagetemplate_model.contextHeader.timeStamp}"/>
</parameters>
</taskFlow>
</executables>
<bindings/>
</pageDefinition>

Sliding Panels and Detail Regions

Similar Messages

Maybe you are looking for