Using rsRecordsetB_total within rsRecordsetA repeat region?

Hi. Is it possible to display the total of a related
recordset (recordsetB)
within the repeat region of recordsetA?
Recordset A is customers and Recordset B is orders. We want
to display a
list of customers and the total number of orders they've
placed.
Thanks.
Nath.

Hi. Is it possible to display the total of a related
recordset (recordsetB)
within the repeat region of recordsetA?
Recordset A is customers and Recordset B is orders. We want
to display a
list of customers and the total number of orders they've
placed.
Thanks.
Nath.

Similar Messages

  • Use rsRecordset_total in a repeat region?

    Hi,
    Two recordsets. Recordset A contains customer details,
    including their
    unique customerID.
    I have this in a repeat region, listing customers by order of
    date.
    Recordset B, on the same page, contains order details with a
    PK called
    orderID and a FK; customerID.
    Is it possible to display the <%=(rsRecordsetB_total)%>
    WITHIN the repeat
    region for Recordset A so that, when viewing the list of
    customers, we can
    see how many orders each customer has made?
    So far, it only displays the total for the first recordset
    for every
    customer and we've worked out that this is because we are
    only repeating
    Recordset A, not B, so, therefore, the total for Recordset B
    won't change.
    Hope someone can help,
    Regards
    nath.

    you could just nest a loop inside of a loop.
    so lets say I have a filed that seletces users and all the prerequesists are defined inside of a veriable called query. Than i want to select all of there grades
    while($getter1 = mysql_fetch_array($query))
         echo $geter1['user'];
         echo "<br />";
         $select = "select * from gradebook were user='" . $geter1['user'] . "'";
         $run = mysql_query($select)or die(mysql_error());
         $i=1;
         while($getter2 = mysql_fetch_array($run))
              echo "grade" . $i . ": " . $getter2['grade'];
              $i = $i + 1;
    Now in this situation this would not be the best way to get the grades but it demonstrates nested loops (repeatable region inside a repeatable reigon)like what you want. I do however agree with the other person who posted you should use an SQL Join.

  • Nest repeating regions?

    I am new to working with DW templates but am trying to set up
    a site for a client who will edit in Contribute. I'd like to set
    these up using templates so the client won't inadvertently mess up
    the formatting.
    However, I'm running into a problem setting up a template for
    an Events listing. I need to have a repeatable region for each
    month of events she will add and then inside each month, a
    repeating region for each event within that month. So far, I have
    not been able to make this work.
    Is something like this possible? This doesn't seem that
    advanced or sophisticated so perhaps I am just missing something?
    Thanks for any advice.

    "choirellie" <[email protected]> wrote in
    message
    news:g0fg42$o0$[email protected]..
    > Maybe I wasn't explaining clearly what I mean...
    >
    > I haven't got the template set up yet because I can not
    figure out how to
    > have
    > a repeating region within another repeating region.
    >
    > The reason I want to specifically have it in a repeating
    region is to make
    > it
    > easier and less likely for bad formatting tags to creep
    in when the client
    > wants to add a new month and/or event within a month.
    >
    > The client ("they") is not doing anything yet - I have
    merely been testing
    > a
    > setup that I would like to use for a client. using
    pseudo code, this is
    > something like what I want to do:
    >
    > <repeatable region1>
    > non-editable formatting<editable
    region>Month<end editable region>
    > <repeatable region2>
    > non editable formatting<editable region>Event
    Details<end editable region>
    > <end repeatable region2><end repeatable
    region1>
    >
    > Does this make sense? Am I going about this the wrong
    way? I would be
    > very
    > comfortable doing all this with server side code and
    database (either
    > ColdFusion or PHP) but the template business is really
    throwing me.
    but that repeating region info would have to come from a
    database, which
    would need its own form page for updates/additions/deletions,
    etc... and you
    said you weren't going to use a database yet... so doesn't
    that boil down to
    "why do a repeating region" since they're going to manually
    enter it anyway?

  • How to hand-code a repeat region? (ASP/VBScript)  WorldPay workaround.

    Hi,
    So far I've been using the standard Dreamweaver Repeat Region
    behaviour to
    add a database repeat region to my page. However, the code
    this produces
    doesn't work with WorldPay's callback script and I need to
    know if it's
    possible to hand code a repeat region. My repeat region data
    includes
    images etc so, as well as creating/displaying the repeat
    region, I also need
    to know how to incorporate some basic HTML.
    Would appreciate any advice or links to a tutorial.
    Thanks
    nath.

    Hi Joe,
    I have database content on my WorldPay callback page, which
    is fed by a form
    variable sent back from WorldPay. I can therefore call up
    order details, in
    my database, by ID.
    Anyway, I have two recordsets displaying correctly on my
    callback page;
    Order Summary and Order Items. Because a customer may
    purchase more than
    one item, I need to show all records in the Order Items table
    that match the
    order ID. I therefore need a repeat region for the Order
    Items recordset to
    show all products, so I've inserted the standard DW repeat
    region:
    <%
    Dim Repeat1__numRows
    Dim Repeat1__index
    Repeat1__numRows = -1
    Repeat1__index = 0
    rsItems_numRows = rsItems_numRows + Repeat1__numRows
    %>
    ...(above the head tag) and....
    <%
    While ((Repeat1__numRows <> 0) AND (NOT rsItems.EOF))
    %>
    ...Recordset Data...
    <%
    Repeat1__index=Repeat1__index+1
    Repeat1__numRows=Repeat1__numRows-1
    rsItems.MoveNext()
    Wend
    %>
    ...within my page where I want the repeat region to be.
    If I DON'T include this code, both recordsets display data,
    however the
    Order Items recordset only shows 1 item (obviously, because
    there is no
    repeat region). When I add the repeat region code, as above,
    WorldPay
    fails.
    WorldPay support can't actually tell you what's wrong, nor do
    you receive an
    error line or anything, however I know it's the repeat region
    because both
    recordsets display correctly WITHOUT the repeat region code.
    Any way around this? I really need this to work because
    otherwise I'm going
    to have to force a re-direct and an auto-submission of a form
    value
    (nasty!), in order to be able to display the customers order
    summary, and
    order items, on one page.
    Hope you can help. Thanks Joe.
    Regards
    Nath.
    "Joe Makowiec" <[email protected]> wrote in
    message
    news:[email protected]...
    > On 02 Jul 2007 in macromedia.dreamweaver.appdev,
    tradmusic.com wrote:
    >
    >> So far I've been using the standard Dreamweaver
    Repeat Region
    >> behaviour to add a database repeat region to my
    page. However, the
    >> code this produces doesn't work with WorldPay's
    callback script and
    >> I need to know if it's possible to hand code a
    repeat region. My
    >> repeat region data includes images etc so, as well
    as
    >> creating/displaying the repeat region, I also need
    to know how to
    >> incorporate some basic HTML.
    >
    > Before you go re-inventing the wheel, what doesn't work?
    >
    > --
    > Joe Makowiec
    >
    http://makowiec.net/
    > Email:
    http://makowiec.net/contact.php

  • PhP/MySQL Horizontal/Vertical Repeat Region

    Hi Guys,
    I'm pretty sure this question would have been asked many times before. If so, first of all my apologies for re-posting this.
    Anyway, what I'm trying to do is create a repeat region that spans for 4 columns and then repeats the rest in rows. For example, if I have 100 records in my table (MySQL), then I want to display this in a table of 4 columns and and 25 rows (in reality, the number of records would be unspecified, of course, but still the records need to be displayed on a 4 column, X row table). For example:
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    name
    comment
    At the moment, I have no issue with displaying the records either horizontally or vertically (explicitly) using the built in "repeat region" behavior. However, where I'm having the problem is with displaying the records in a table as the one I described above.
    I'm using DW CS5 with PhP/MySQL.
    Can I still do this using the built in "repeat region" server behavior, if so how?
    Otherwise, how else could I achieve this (ideally without using any extensions)?
    Thanks in advance for any help and support,
    Cheers

    I'm believe you should be able to modify the repeat region code to do what you want it to do.  With that said we will need 2 things:
    1.  To see the code from the page.
    2.  To know the order of the results is it:
    Horizontal: 1 2 3 4
                    5 6 7 8
    Or Vertical:
    1 5
    2 6
    3 7
    4 8

  • Multiple PHP Repeat Regions

    Hey kids,
    Im currently making an admin page for a school website, which has multiple forms. basically each form has a list/menu which will display class names.... but these names are drawn out from the database in a repeat region to complete the list/menu listings.... when i went to put a repeat region on the next form, i was informed i can only use one repeat region on a recordset.... does this mean i have to go about creating a new recordset for every dropdown menu i create, or is there an easier way to use multiple repeat regions from one recordset, or an alternate way?
    David

    You can have multiple repeat regions from a single recordset, but DW won't like it.  This means that you are on your own for coding, but luckily the task is not too hard.  The trick is to RESET the MySQL pointer into the recordset between repeat regions with mysql_data_seek() (see details here - http://us3.php.net/manual/en/function.mysql-data-seek.php
    If you are not a hand coder, this may be a bit beyond your grasp just now.
    The DW-friendly way to do it would be to apply multiple recordsets to the page and use one for each repeat region.

  • Help with Spry Rating Widget within a Spry Repeating Region

    My link  http://www.youthinkyougotitbad.com
    This is a long question, but it seems to me if answered somewhere it could help alot of people in the spry community creating comment boards as it uses three important spry widgets: rating, repeating, and tabbed panels. I am trying to use spry rating widget within a spry repeating region within a spry tabbed panel with xml. I was trying to go with the pulse light script (http://forums.adobe.com/message/3831721#3831721) but Gramps told me about the spry rating widget. But I have ran into a couple more problems. First, I couldnt find that much information on the forums or online about how to do the php page with the spry rating widget. None of these have any information on how to do it:
    http://labs.adobe.com/technologies/spry/articles/rating_overview/index .html
    http://labs.adobe.com/technologies/spry/articles/data_api/apis/rating. html
    http://labs.adobe.com/technologies/spry/samples/rating/RatingSample.ht ml
    And it seems that the official examples are so poor (or I am just ignorant, which def could be a possiblity) it shows
    to set the initial rating value from the server, but uses a static value of 4
    http://labs.adobe.com/technologies/spry/samples/rating/RatingSample.html
    <span id="initialValue_dynamic" class="ratingContainer">
             <span class="ratingButton"></span>
             <span class="ratingButton"></span>
             <span class="ratingButton"></span>
             <span class="ratingButton"></span>
             <span class="ratingButton"></span>      
             <input id="spryrating1_val" type="text" name="spryrating1" value="4" readonly="readonly" />
             <span class="ratingRatedMsg sample">Thanks for your rating!</span>
    </span>
    <script>
    var initialValue_dynamic = new Spry.Widget.Rating("initialValue_dynamic", {ratingValueElement:'spryrating1_val'});
    </script>
    I finally found a site that has the php and mysql setup.
    http://www.pixelplant.ro/en/articles/article-detail/article/adobe-widgets-for-download.htm l
    But its not perfect. It has the same problem that I ran into with Pulse light, that you had to use php echo within the spry repeating region to set the initial value from the server:
    <span id="spryrating1" class="ratingContainer">
             <span class="ratingButton"></span>
                <input type="text" id="ratingValue" name="dynamic_rate" value="<?php echo $row['average']?>"/>
            </span>
            <script type="text/javascript"
                var rating1 = new Spry.Widget.Rating("spryrating1", {ratingValueElement:'ratingValue', afterRating:'serverValue', saveUrl: 'save.php?id=spryrating1&val=@@ratingValue@@'});
            </script>
    So instead, I tried with three of my panels (www.youthinkyougotitbad.com) to get the average rating from xml by using the following queries:
    Recent
    Returns the blurts in most recent order along with average rating
    SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt Group By Id_blurt ORDER BY Blurt.`Date` DESC
    Wet Eyed
    Returns the blurts in highest ratings order along with the average rating
    SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt AND ratings.rating_value > 0.1 Group By Id_blurt ORDER BY average_r Desc
    Dry Eyed
    Returns the blurts in lowest rating order along with the average rating
    SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt AND ratings.rating_value > 0.1 Group By Id_blurt ORDER BY average_r
    These all return the correct xml in the correct order.And they return the average rating of each blurt which I can send to my page with xml.
    My first question is that I dont know how to configure the query on my fourth panel Empathized & Advised the same way because it already has a Group By for the Comment Id.
    SELECT `Comment`.id_Blurt, COUNT(*) as frequency, Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date FROM Blurt, `Comment` WHERE Blurt.Id_blurt = `Comment`.id_Blurt GROUP BY `Comment`.id_Blurt ORDER BY COUNT(*) DESC";
    Not sure if you guys need more information to understand that all, if so just ask.
    So after I get my average value through xml to the first three panels, I set my spry repeating region up like this:
    (Blurt panel)
    <div spry:region="pv1" spry:repeatchildren="pv1">           
               <div class="blurtbox">
                <!--  most recent blurt tab-->
                <h3> "{pv1::Blurt}"</h3>
                <p> Blurted from {pv1::Location} at {pv1::Date}</p>
                <p>Empathize or Advise about {pv1::Name}'s Blurt #<a href="detailblurt.php?blurtid={pv1::Id_blurt}"> {pv1::Id_blurt}</a></a></p>
               <span id="{pv1::Id_blurt}" class="ratingContainer">
                <span class="ratingButton"></span>
                <span class="ratingButton"></span>
                <span class="ratingButton"></span>
                <span class="ratingButton"></span>
                <span class="ratingButton"></span>
                <span class="ratingRatedMsg">Thank You! Your tears have been tallied.</span>
                <input type="text" id="ratingValue" name="dynamic_rate" value="{pv1::average_r}"/>
            </span>
            <script type="text/javascript">
                // overview of available options and their values:
                // http://labs.adobe.com/technologies/spry/articles/rating_overview/index.html
                var rating1 = new Spry.Widget.Rating("{pv1::Id_blurt}", {ratingValueElement:'ratingValue', afterRating:'serverValue', saveUrl: 'save.php?id={pv1::Id_blurt}&val=@@ratingValue@@'});
            </script>
                 <br/>
               </div>
              </div>
    Ok, it registers the right vote in the database with the right blurt id each time. But I am having two problems so far:
    One, even though {pv1::average_r} returns the correct average through xml, it doesn't show the initial rating value for each of the repeating blurts. It seems to show the first one correct, and then just repeat that same value to the other ones that follow. I just dont understand since it can get the correct server value right after you vote (afterRating:'serverValue), that I can't manipulate spryrating.js in some way that I could just replace 'ratingValue' in ratingValueElement:'ratingValue' with something to give me the initial server value.
    Two: Is even more mysterious to me, if you play around with voting on the site, sometimes you are unable to vote on different blurts. Its weird. It seems like that the javascript is completely off just on those blurts. And sometimes its a whole row, sometimes none. But so far its never a problem on the first tabbed panel (Recent), only on the other three. As far as I know, the coding is exactly the same in each tab's repeating region except for the different xml input.
    And, now on the live server, sometimes the pics of tears used to voting dont show up until you click.
    Any help on those three questions (how to query the fourth panel, how to show the initial server value, and the glitches with voting) would be greatly appreciated!! I looked pretty hard on adobe forums and other sites, and didnt see much on how to really use the spry rating widget with php and xml.
    Thanks!!

    Update:
    Ok, the first query on the Recent tab doesnt work for me because it wont show unless its already voted, and since these are supposed to be new blurts, that kind of breaks the whole site:
    "SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt Group By Id_blurt ORDER BY Blurt.`Date` DESC";
    So I replaced it with what I originally had.
    "SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date FROM Blurt ORDER BY Blurt.`Date` DESC";
    But this doesn't provide me with the initial average rating:(

  • How can I use a Looper inside a Repeat Region?

    I have a Dreamweaver standard Repeat Region applied to a HTML table containing two horizontal loopers. The HTML table is to display a list of company contacts for our members. The loopers display find for the first company but after that they stop. To key the loopers to the company Im using a trick mentioned by Günter Schenk in this thread: http://www.adobeforums.com/webx/.59b524b4/5. He calls it a sub query; at times I use to help myself by using some sort of "sub query" like the following
    <br />
    <br />Ive linked my looper recordset to the recordset used for the Repeat Region. Heres one of the looper queries:
    <br />
    <br />$KTColParam1_rsContactFeatures = "-1";
    <br />if (isset($_SESSION["kt_login_id"])) {
    <br />$KTColParam1_rsContactFeatures = $_SESSION["kt_login_id"];
    <br />}
    <br />mysql_select_db($database_RNW, $RNW);
    <br />$query_rsContactFeatures = sprintf("SELECT DISTINCT list_feature.description_feature, company.id_company, contact_cnt.idpremissions_cnt FROM (((company LEFT JOIN company_to_feature ON company_to_feature.idcompany=company.id_company) RIGHT JOIN list_feature ON list_feature.id_list_feature=company_to_feature.idlistfeature) LEFT JOIN contact_cnt ON contact_cnt.idcompany_cnt=company.id_company) WHERE company.id_company='".$row_rsContactAll['id_company']."' AND company_to_feature.id_feature is not null AND contact_cnt.idpremissions_cnt=%s ORDER BY company.id_company ASC ", GetSQLValueString($KTColParam1_rsContactFeatures, "int"));
    <br />$rsContactFeatures = mysql_query($query_rsContactFeatures, $RNW) or die(mysql_error());
    <br />$row_rsContactFeatures = mysql_fetch_assoc($rsContactFeatures);
    <br />$totalRows_rsContactFeatures = mysql_num_rows($rsContactFeatures);
    <br />
    <br />This is my link in both quires: WHERE company.id_company='".$row_rsContactAll['id_company']."'
    <br />
    <br />Heres the code for the connected looper:
    <br />
    <br /><?php<br />do { // horizontal looper version 3<br />?>
    <br />
    <br />
    <br />
    <br />
    <br />As I said this works fine for the first item in the list but then it quits. Heres a screen shot of what I dont want: http://www.retirenw.com/images/help/looper_inside_repeat_region.gif
    <br />
    <br />Is there anyway to change the php for the loopers to make this work?
    <br />
    <br />Thanks for your help
    <table>
    <tr>
    <td>
    <img src="../images/bullet.gif" width="8" height="14" />
    </td>
    <td>
    <?php echo $row_rsContactFeatures['description_feature']; ?>
    </td><?php <br />$row_rsContactFeatures = mysql_fetch_assoc($rsContactFeatures);<br />if (!isset($nested_rsContactFeatures)) { <br />$nested_rsContactFeatures= 1;<br />}<br />if (isset($row_rsContactFeatures) && is_array($row_rsContactFeatures) && $nested_rsContactFeatures++ % 1==0) {<br />echo "</tr><tr>";<br />}<br />} while ($row_rsContactFeatures); //end horizontal looper version 3<br />?>
    </tr>
    </table>

    I found an easy solution.
    I moved my looper quires out of my head and into my bodyinside the repeat region (the Looper Wizard puts the quires in the head). I put the quires right before my looper code. Finally, I had to make sure my conditional regional code came after the looper quires but before the looper code.

  • USING REPEAT REGIONS

    Dreamweaver CS3 , ASP page. Access database. Successfully
    created a recordset but am unable to enter a repeat region in table
    to show records. Symptom - Dreamweaver closes when there is any
    attempt to insert a new or edit and existing repeat region.

    I am using Dreamweaver CS3 on Vista Home Premium. Thanks for
    your interest.
    Mike Shields

  • Can't use repeat region with more than 35 rows

    Using ASP and Access Database, I am retrieving a number from a field in an access database to display a number of rows in a table using repeat region, if the number returned is more than 35 my page won't load. Any ideas?
    Thanks
    Bruce

    I havn't used ASP in about 10 years but what kind of error comes up? Or is the page just blank?
    Brad Lawryk
    Adobe Community Professional: Dreamweaver
    Northern British Columbia Adobe Usergroup: Manager
    Thompson Rivers University: Dreamweaver Instructor
    My Adobe Blog: http://blog.lawryk.com

  • Tabbed panels repeat region in cms displays 2nd item as a block of content

    Hi everyone, hope someone can help:
    I have a test page live
    http://aegmotorhomes.co.uk/usedtest1.php
    Problem is this-
    I have added a repeat region on my dreamweaver template
    I use Perch CMS as my management for staff to add new items for sale on this page
    I have built a tabbed panels to list the item
    On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
    My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
    I think it is to do with the ID and applies the java file only to item one, thats my guess.
    I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
    TEMPLATE
    <style type="text/css">
    #container1 {
              width: 700px;
              background-color: #E6E6E6;
              border: .1em solid #999;
              padding-top: 5px;
              padding-right: 5px;
              padding-left: 5px;
              height: auto;
              margin-bottom: 30px;
    #item_description {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.3em;
              color: #333;
              background-color: #FFF;
              height: 30px;
              border-bottom-width: .1em;
              border-bottom-style: dotted;
              border-bottom-color: #333;
              font-weight: bold;
              margin-bottom: 10px;
    #price {
              margin-top: 5px;
              float: right;
              width: 150px;
              background-color: #EAEAEA;
              border: 0.1em solid #CCC;
    .BOLDTEXT {
              font-weight: bold;
              text-align: center;
              color: #FFF;
    .BOLDTEXT_PRICE {
              color: #333;
    #engine_spec {
              float: left;
              width: 190px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: .75em;
              border-top-style: none;
              border-right-style: none;
              border-bottom-style: none;
              border-left-style: none;
    #top_price {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.2em;
              color: #099;
              float: right;
              width: 150px;
              font-weight: bold;
              text-align: right;
    #top_price {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.4em;
              color: #099;
    #overview_picture {
              height: 150px;
              width: 200px;
              background-color: #CCC;
              float: left;
              margin-right: 10px;
              margin-top: 5px;
    .BOLDTEXT_blackprice {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.4em;
              color: #099;
    #smallprint {
              font-family: Arial, Helvetica, sans-serif;
              font-size: .5em;
              color: #666;
              margin-top: 2px;
    table tr td {
              font-size: 0.75em;
              font-family: Arial, Helvetica, sans-serif;
    .specwhite {
              color: #FFF;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1em;
              font-weight: bold;
    #reserve {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.2em;
              font-weight: bold;
              color: #FFF;
              background-color: #099;
              width: 140px;
              float: right;
              margin-top: 10px;
              padding: 5px;
              text-align: center;
              border: .1em solid #999;
    </style>
    <script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <div id="container1">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">Overview</li>
          <li class="TabbedPanelsTab" tabindex="0">Description</li>
          <li class="TabbedPanelsTab" tabindex="0">Images</li>
          <li class="TabbedPanelsTab" tabindex="0">Specification</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
            <div id="item_description"><perch:content id="Title1" label="Title" type="text" />
              <div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
            </div>
            <div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
            <div class="engine_spec" id="engine_spec">
              <table width="100%" border="0" cellpadding="5" cellspacing="7">
                <tr>
                  <td width="35%" bgcolor="#EAEAEA">Year of Make</td>
                  <td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Current Miles</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Engine Size</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Body Colour</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Transmission</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
                </tr>
              </table>
            </div>
            <div id="price">
              <table width="150" border="0" cellspacing="9">
                <tr>
                  <td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
                  <td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
                </tr>
                <tr>
                  <td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
                  <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
                </tr>
                <tr>
                  <td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
                  <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
                </tr>
              </table>
            </div>
            <div id="reserve">Reserve Motorhome</div>
          </div>
          <div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
          <div class="TabbedPanelsContent"><table width="650" cellspacing="5">
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
    </table></div>
          <div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    .JS file
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.TabbedPanels = function(element, opts)
              this.element = this.getElement(element);
              this.defaultTab = 0; // Show the first panel by default.
              this.tabSelectedClass = "TabbedPanelsTabSelected";
              this.tabHoverClass = "TabbedPanelsTabHover";
              this.tabFocusedClass = "TabbedPanelsTabFocused";
              this.panelVisibleClass = "TabbedPanelsContentVisible";
              this.focusElement = null;
              this.hasFocus = false;
              this.currentTabIndex = 0;
              this.enableKeyboardNavigation = true;
              this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
              this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
              Spry.Widget.TabbedPanels.setOptions(this, opts);
              // If the defaultTab is expressed as a number/index, convert
              // it to an element.
              if (typeof (this.defaultTab) == "number")
                        if (this.defaultTab < 0)
                                  this.defaultTab = 0;
                        else
                                  var count = this.getTabbedPanelCount();
                                  if (this.defaultTab >= count)
                                            this.defaultTab = (count > 1) ? (count - 1) : 0;
                        this.defaultTab = this.getTabs()[this.defaultTab];
              // The defaultTab property is supposed to be the tab element for the tab content
              // to show by default. The caller is allowed to pass in the element itself or the
              // element's id, so we need to convert the current value to an element if necessary.
              if (this.defaultTab)
                        this.defaultTab = this.getElement(this.defaultTab);
              this.attachBehaviors();
    Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
              if (ele && typeof ele == "string")
                        return document.getElementById(ele);
              return ele;
    Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
              var children = [];
              var child = element.firstChild;
              while (child)
                        if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
                                  children.push(child);
                        child = child.nextSibling;
              return children;
    Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
              if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
                        return;
              ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
              if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
                        return;
              ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
              if (!optionsObj)
                        return;
              for (var optionName in optionsObj)
                        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                                  continue;
                        obj[optionName] = optionsObj[optionName];
    Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
              if (this.element)
                        var children = this.getElementChildren(this.element);
                        if (children.length)
                                  return children[0];
              return null;
    Spry.Widget.TabbedPanels.prototype.getTabs = function()
              var tabs = [];
              var tg = this.getTabGroup();
              if (tg)
                        tabs = this.getElementChildren(tg);
              return tabs;
    Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
              if (this.element)
                        var children = this.getElementChildren(this.element);
                        if (children.length > 1)
                                  return children[1];
              return null;
    Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
              var panels = [];
              var pg = this.getContentPanelGroup();
              if (pg)
                        panels = this.getElementChildren(pg);
              return panels;
    Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
              ele = this.getElement(ele);
              if (ele && arr && arr.length)
                        for (var i = 0; i < arr.length; i++)
                                  if (ele == arr[i])
                                            return i;
              return -1;
    Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
              var i = this.getIndex(ele, this.getTabs());
              if (i < 0)
                        i = this.getIndex(ele, this.getContentPanels());
              return i;
    Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
              return this.currentTabIndex;
    Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
              return Math.min(this.getTabs().length, this.getContentPanels().length);
    Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
              try
                        if (element.addEventListener)
                                  element.addEventListener(eventType, handler, capture);
                        else if (element.attachEvent)
                                  element.attachEvent("on" + eventType, handler);
              catch (e) {}
    Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
              if (e.preventDefault) e.preventDefault();
              else e.returnValue = false;
              if (e.stopPropagation) e.stopPropagation();
              else e.cancelBubble = true;
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
              this.showPanel(tab);
              return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
              this.addClassName(tab, this.tabHoverClass);
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
              this.removeClassName(tab, this.tabHoverClass);
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
              this.hasFocus = true;
              this.addClassName(tab, this.tabFocusedClass);
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
              this.hasFocus = false;
              this.removeClassName(tab, this.tabFocusedClass);
              return false;
    Spry.Widget.TabbedPanels.KEY_UP = 38;
    Spry.Widget.TabbedPanels.KEY_DOWN = 40;
    Spry.Widget.TabbedPanels.KEY_LEFT = 37;
    Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
              var key = e.keyCode;
              if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
                        return true;
              var tabs = this.getTabs();
              for (var i =0; i < tabs.length; i++)
                        if (tabs[i] == tab)
                                  var el = false;
                                  if (key == this.previousPanelKeyCode && i > 0)
                                            el = tabs[i-1];
                                  else if (key == this.nextPanelKeyCode && i < tabs.length-1)
                                            el = tabs[i+1];
                                  if (el)
                                            this.showPanel(el);
                                            el.focus();
                                            break;
              return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
              var stopTraversal = false;
              if (root)
                        stopTraversal = func(root);
                        if (root.hasChildNodes())
                                  var child = root.firstChild;
                                  while (!stopTraversal && child)
                                            stopTraversal = this.preorderTraversal(child, func);
                                            try { child = child.nextSibling; } catch (e) { child = null; }
              return stopTraversal;
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
              var self = this;
              Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
              Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
              Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
              if (this.enableKeyboardNavigation)
                        // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
                        // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
                        // by default.
                        // Find the first element within the tab container that has a tabindex or the first
                        // anchor tag.
                        var tabIndexEle = null;
                        var tabAnchorEle = null;
                        this.preorderTraversal(tab, function(node) {
                                  if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
                                            var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
                                            if (tabIndexAttr)
                                                      tabIndexEle = node;
                                                      return true;
                                            if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
                                                      tabAnchorEle = node;
                                  return false;
                        if (tabIndexEle)
                                  this.focusElement = tabIndexEle;
                        else if (tabAnchorEle)
                                  this.focusElement = tabAnchorEle;
                        if (this.focusElement)
                                  Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
                                  Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
                                  Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
    Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
              var tpIndex = -1;
              if (typeof elementOrIndex == "number")
                        tpIndex = elementOrIndex;
              else // Must be the element for the tab or content panel.
                        tpIndex = this.getTabIndex(elementOrIndex);
              if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
                        return;
              var tabs = this.getTabs();
              var panels = this.getContentPanels();
              var numTabbedPanels = Math.max(tabs.length, panels.length);
              for (var i = 0; i < numTabbedPanels; i++)
                        if (i != tpIndex)
                                  if (tabs[i])
                                            this.removeClassName(tabs[i], this.tabSelectedClass);
                                  if (panels[i])
                                            this.removeClassName(panels[i], this.panelVisibleClass);
                                            panels[i].style.display = "none";
              this.addClassName(tabs[tpIndex], this.tabSelectedClass);
              this.addClassName(panels[tpIndex], this.panelVisibleClass);
              panels[tpIndex].style.display = "block";
              this.currentTabIndex = tpIndex;
    Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
              var tabs = this.getTabs();
              var panels = this.getContentPanels();
              var panelCount = this.getTabbedPanelCount();
              for (var i = 0; i < panelCount; i++)
                        this.addPanelEventListeners(tabs[i], panels[i]);
              this.showPanel(this.defaultTab);
    })(); // EndSpryComponent
    >CSS file
    @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)*/
    /* 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: #DDD;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: sans-serif;
              font-size: small;
              font-weight: bold;
              margin-top: 0px;
              margin-right: 1px;
              margin-bottom: 0px;
              margin-left: 0px;
              padding-top: 4px;
              padding-right: 10px;
              padding-left: 10px;
              padding-bottom: 4px;
    /* 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: #CCC;
    /* 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: #FFF;
              color: #333;
              border-top-color: fff;
              border-right-color: fff;
              border-bottom-color: fff;
              border-left-color: fff;
              border-color: fff;
              outline-color: fff;
    /* 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: #F9F9F1;
              height: auto;
              margin-bottom: 3px;
              border: .1px solid #999;
    /* 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;
              padding: 4px;
    /* 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 {
              background-color: #FFF;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 0.75em;
              color: #333;
              padding: 20px;
              clear: both;
              margin-bottom: 5px;
              height: auto;
    /* 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:none !important;
              height: 100%;
    #TabbedPanels1 {
              height: auto;
              padding-top: 5px;
              background-color: #EAEAEA;
              width: 700px;
    I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
    Can anybody HELP PLEASE PLEASE

    I think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
    You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
    There are a couple of things that create the problem.
    There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
    There needs to be a constructor for each tabbed panels like
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
    var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
    Gramps

  • How to move elements within the master region of a Master/Detail spry data set?

    Hi there,
    I am unsure of how to move the different items within the master region of a master/detail spry dataset. The default style is such that if I include 3 or more elements e.g. Thumb, etc., they are stacked vertically :
    How do I move them so that they can be positioned differently? The look I am going for is one where the thumb image is positioned to the left while the other items are stacked alongside it so that the end effect for the master region would look like this:
    I greatly appreciate the help! Thanks!

    This is the complete page
    <!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>Check :: Fashion+Lifestyle</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryEffects.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/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMasterDetail_final.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    var cal4 = new Spry.Data.HTMLDataSet("calendarList.html", "calendarList", {sortOnLoad: "When", sortOrderOnLoad: "ascending"});
    cal4.setColumnType("Thumb", "html");
    cal4.setColumnType("Picture", "html");
    cal4.setColumnType("When", "date");
    function MM_effectAppearFade(targetElement, duration, from, to, toggle)
        Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    function closeAd() {
        document.getElementById('adRollover').style.visibility='hidden';   
    function MM_effectBlind(targetElement, duration, from, to, toggle)
        Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    function MM_effectSlide(targetElement, duration, from, to, toggle)
        Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
        Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
    //-->
    </script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="pageContainer">
        <div id="adBanners">
            <div id="halfBanner"><a href="#" onClick="document.getElementById('adRollover').style.visibility='visible';"><img src="images/banner_half_1.jpg" alt="Half Banner" width="237" height="90" /></a></div>
            <div id="leaderboardBanner"><a href="#"><img src="images/banner_leaderboard_1.jpg" width="728" height="90" alt="Leaderboard Banner" /></a></div>
            <div class="clearFloats"></div>
        </div><!--div#adBanners-->
        <div id="mainHeader">
            <div id="homepageLink"><a href="index.html"><img src="images/spacer.gif" width="400" height="100" /></a></div>
            <ul id="MenuBar1" class="MenuBarHorizontal">
                <li><a href="feature.html">FEATURES</a></li>
                <li><a href="#">FASHION</a></li>
                <li><a href="calendar.html" class="on">CALENDAR</a></li>
                <li><a href="#">VIDEO</a></li>
                <li><a href="blog.html">BLOG</a></li>
            </ul>
        </div><!--div#mainHeader-->
        <div class="MasterDetail">
          <div class="DetailContainer" id="event" spry:detailregion="cal4">
            <div class="DetailPicture">{Picture}</div>
            <div class="DetailColumn DetailTitle">{What}</div>
            <div class="DetailColumn"><div class="DetailLabel">WHEN:</div> {When}
            </div>
            <div class="DetailColumn"><div class="DetailLabel">WHERE:</div> {Where}
            </div>
            <div class="DetailColumn">{Details}</div>
          </div>
          <div id="calHeader"><p><img src="images/calendar_hdr.gif" width="492" height="100" /></p></div>
          <div spry:region="cal4" class="MasterContainer" onclick="MM_effectAppearFade(this, 1000, 0, 100, false); MM_effectBlind('event', 1000, '0%', '100%', false);">
            <div class="MasterColumn" spry:repeat="cal4" spry:setrow="cal4" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected"><div class="MasterColumnPicture">{Thumb}</div>
              <div class="MasterColumnTitle">{What}</div>
              <div class="MasterColumnText"><div class="DetailLabel">WHEN:</div> {When}</div>
              <div class="MasterColumnText"><div class="DetailLabel">WHERE:</div> {Where}</div>
              <div style="clear:both"></div>
            </div>
          </div>
          <br style="clear:both" />
        </div>
    </div><!--div#pageContainer-->
    <div id="footer">
        <div class="text">Use of this site constitutes acceptance of our User Agreement and Privacy Policy. &copy; 2008 Adobe All rights reserved. The material on this site may not be reproduced, distributed, transmitted, cached, or otherwise used, except with the prior written permission of Adobe is a trademark owned by Adobe.</div>
    </div><!--div#footer-->
    <div id="adRollover" style="visibility: hidden;">
    <script language="javascript">
        if (AC_FL_RunContent == 0) {
            alert("This page requires AC_RunActiveContent.js.");
        } else {
            AC_FL_RunContent(
                'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
                'width', '536',
                'height', '479',
                'src', 'watch_ad',
                'quality', 'high',
                'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
                'align', 'middle',
                'play', 'true',
                'loop', 'true',
                'scale', 'showall',
                'wmode', 'transparent',
                'devicefont', 'false',
                'id', 'watch_ad',
                'bgcolor', '#ffffff',
                'name', 'watch_ad',
                'menu', 'true',
                'allowFullScreen', 'false',
                'allowScriptAccess','sameDomain',
                'movie', 'watch_ad',
                'salign', ''
                ); //end AC code
    </script>
    <noscript>
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="536" height="479" id="watch_ad" align="middle">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="false" />
        <param name="movie" value="watch_ad.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
        <param name="wmode" value="transparent" /><embed src="watch_ad.swf" quality="high" bgcolor="#ffffff" width="536" height="479" name="watch_ad" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>
    </noscript>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

  • Repeating Region Mystery

    Hello all,
    I've been working with templates for the past few weeks and I'm loving it!
    Everything has gone smoothly till now.  I'm having a very unsual problem with repeating regions and I can't seem to figure out what is causing it. Hopefully someone here can shed some light on this issue.
    Basically, I have two templates: one parent and one child template.  There are two repeating regions in total. 
    Problem: When I create a new page using the child template, the repeating regions disappear completely. Meaning, all the repeating region code surrounding an element is completely gone. In fact, my repeating regions have an editable region within it and they disappear with the repeating region! However, when I create a new page using the parent template itself, the repeating regions are there and everything is functioning as it should. 
    This is only happening with repeating regions.  All editable regions, separate from repeating regions, are there.
    I would really appreciate the help!
    Thanks!

    I had no idea that nested templates are a serious problem in Dreamweaver.
    It's not.  It's a serious problem for users who opt to use them.  Why? Because any benefit you derive from the coolness is more than offset by the disadvantages you experience down the road from their use. I am a devout user of templates and have never found a single scenario where the use of nested templates would help.
    Most of my knowledge of Dreamweaver comes from Lynda.com's videos. I'm surprised that the instructor behind those videos never mentioned any such problem about nested templates.
    Me too.  To me this says that they have never *actually* used them either. It's very disappointing.
    Is there any other way to replicate this functionality?
    Yes, in every case there is.  But first tell me how you were going to use them, please.  What specifically is it about them that you were going to leverage in your page design?
    When working with templates, I use the following scheme....
    First, I mentally separate the page layout into three sections:
    1.  Stuff that will not change for the life of the site (i.e., the basic
    structural elements)
    2.  Stuff that *could* change from time to time (e.g., navigation elements,
    burst advertisements, section-specific navigation, etc.)
    3.  Stuff that *will* change from one page to the next
    Then I create a template containing all class1 elements.  Next I create
    server-side include files containing all class 2 elements and place them on
    the template as needed.  Note - some of the class 2 elements may be
    "section-specific elements", and their placement on the template will be
    subject to the next item.  Finally, I insert editable regions to cover the
    class 3 items, INCLUDING the section-specific navigation.
    This allows me to just cookie-cut the rest of the site.  I estimate that
    even for fairly large sites, about 80% of my work goes into planning and
    creating this template file.

  • Spry collapsible panel - repeating region

    Hi,
    I'm trying to make a repeating region that contains a spry
    collapsable panel.
    The problem is that i need to develop a way to automatically
    increase the ID of the spry panel.
    The problem I am encountering is that only the first
    Collapsible Panel works properly. The remainder are displaying the
    data, but will not open and close when their tabs are clicked. It
    appears that all are being repeated as
    id="CollapsiblePanel1".
    Does anyone have a way to increment the Tab & Content
    ID's?
    On another forum, somebody has suggested using the following
    PHP - although having never used PHP before, I am uncertain as to
    where I insert this into my code:

    bump

  • Help I can't get my images and description from recordset to display in repeat region table

    Hi everyone,
    could somebody please help me, this is my first php and mysql website, I have a web page that is supposed to display a table with 2 rows 3 columns.
    In each column i want an image, a description and a paypal button.
    then i have a repeat region placed around the second row which should display 3 records at a time.
    The recordset worked when I tested it several times, and the paypal button displays in the browser, but the image and the description won't display and the repeat region doesn't work either as only one button paypal button displays.
    I have uploaded the actual page, in the hope that some could take a look and help me to find out what the problem is.
    Thanks

    In the second row, did you mean you want the three fields to display, not three records?  A record is one row of data.
    Start by getting a single row to display, and leave the paypal button out for now.  So that means you will see the first record in your recordset, the image and description.  To view the description, use the data bindings panel, expand the recordset and drag the description field onto the page in the table.  For the image, insert and image placeholder and point the source to a dynamic data source. Again, choose the approprate field from your recordset.
    Once that record is working, add your repeat region and test.
    For the Paypal button, I am not sure if each button will carry the correct information with it in a repeat region.  There has to be a way to dynamicall add the approprate data to the paypal link for each record.  You may want to also incude checkboxes or radio buttons and have only 1 paypal button - but that introduces other issues which we can tackle later.

Maybe you are looking for