Remembering which tabbed panel I left

I have a web page that uses several Spry tabbed panels to display different sub-sets of volunteers who have applied to volunteer at an airshow. Alongside each volunteer is a link to a page that allows an administrator to edit the volunteer information, that is the user could have started from any one of 4 tabs and gone to the same page to edit the volunteer info. When the edit is complete it returns to the original web page and opens the default tab, I'd like it to return to the original web page and open the tab it left. I have read http://foundationphp.com/tutorials/spry_url_utils.php and think I understand it, but before I can do that I need to pass the tab number from the original page to the edit page, and then when the edit is complete pass that back to the original page.
I think I know how to pass the tab number to the edit page - I'd add &tab=x to the link URL (where "x" is the tab number I'm leaving). The problem I'm having is figuring out how to access that parameter in the edit page and then send it back when the edit is complete.
To see what I mean look at www.hollisterairshow.com/login.php and use username "q" and password "q" without the quotes, this will take you to the Control Panel or "original web page" I referred to above. Look at any/all of the "Volunteer" tabs and you'll see they all provide a link to an "editvolunteer.php" page. When the edit is complete I'd like the user to be returned to the Control Panel and in the tab they were in.
Thanks for any suggestions,
Tony

Hi Tony,
You will need to use cookies for this. Normally I point to Arnout Kazemier's page for this but it has been down for some time now.
Dooza(Steve) seems to have found a solution, just not sure what, but have a look here http://forums.adobe.com/message/3281366#3281366
If you send Steve a PM he will probably help you out.
Ben
PS: in case you need it, the following is SpryCookie.js
Spry.Utils.Cookie = function(type /* string*/, name /* string */, value /* string or number */, options /* object */){
     var     name = name + '=';
     if(type == 'create'){
          // start cookie string creation
          var str = name + value;
          // check if we have options to add
          if(options){
               // convert days and create an expire setting
               if(options.days){
                    var date = new Date();
                    str += '; expires=' + (date.setTime(date.getTime() + (options.days * 86400000 /* one day 24 hours x 60 min x 60 seconds x 1000 miliseconds */))).toGMTString();
               // possible path settings
               if(options.path){
                    str += '; path=' + options.path                   
               // allow cookies to be set per domain
               if(options.domain){
                    str += '; domain=' + options.domain;
          } else {
               // always set the path to /
               str += '; path=/';
          // set the cookie
          document.cookie = str;
     } else if(type == 'read'){
          var c = document.cookie.split(';'),
               str = name,
               i = 0,
               length = c.length;
          // loop through our cookies
          for(; i < length; i++){
               while(c[i].charAt(0) == ' ')
                    c[i] = c[i].substring(1,c[i].length);
                    if(c[i].indexOf(str) == 0){
                         return c[i].substring(str.length,c[i].length);
          return false;
     } else {
          // remove the cookie, this is done by settings an empty cookie with a negative date
          Spry.Utils.Cookie('create',name,null,{days:-1});

Similar Messages

  • Remembering which tab was selected in panelTabbedPane

    I need to have a way such that a panelTabbedPane would be dynamic. it has to remember the last selected tab or set which tab would be activated. Ex. i click tab3 of a tabbed page then it goes to a non-tabbed page, if i press CANCEL on the non-tabbed page it should go back to the tab3 - the calling tab, instead of the selectedIndex tab or like the default tab.
    Is tabChangeListener an option and how can that be implemented?
    Can you help me out? thank you.

    Hi Vj
    Are you saying that you have multiple parameters and that in each parameter the user can pick a different value and that you then want the system to sort in the order of those items?
    With some manipulation of the data you can do it. Here is what I would do and I will assume there are 3 parameters called User1, User2, User3:
    1. Create a new calculation called MySort like this:
    CASE WHEN "User Name" = :User1 THEN '1'|| "User Name" WHEN "User Name" = :User2 THEN '2'||"User Name" ELSE '3'||"User Name" END
    2. Now you create a Group Sort on this new calculation and make it hidden - the items will then appear in the order you entered them in parameters 1, 2 and 3
    If you want to use a single parameter and allow your user to enter up to three value then this can be done too but you have to change the parameter to not allow the user to key multiple values. Instead you will be using a single parameter with each individual value separated by something other than a comma, say a /.
    What you do next is use the SUBSTR command to split out the individual pieces and use those in your condition such as:
    "User Name" = Value1 OR "Use Name" = Value2 OR "User Name" = Value3, where Value1, Value2 and Value3 come by splitting up the single parameter into multiple values.
    With this done you do a similar job as I showed you at the beginning for completing the sort:
    CASE WHEN "User Name" = Value1 THEN '1'|| Value1 WHEN "User Name" = Value2 THEN '2'|| Value2 ELSE '3'|| Value3 END
    Best wishes
    Michael

  • Spry Tabbed Panels 2 - Remember Last Tab

    Using the Spry UI Tabbed Panels 2, has anyone found a way for the page to remember which tabbed was last viewed?
    I can see that I can use the showPanel() method to set the panel, and I can use the getCurrentTabIndex() to retrieve the current tab index, but I am not sure what to do with them next.
    I am thinking about maybe setting a cookie with the current tab index, but I don't know what to attach the onclick event to. Should I use a spry selector to add the onclick attribute to the a tag that is automatically generated?
    Does anyone else have any clever ideas?
    Cheers,
    Steve

    THANK YOU VERY MUCH GRAMPS!:  THIS DID WORK!
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Spry Accordion</title>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
    </head>
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Content 1</div>
        <div class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
    <script src="SpryAssets/SpryTabbedPanels.js"></script>
    <script>
    var Spry; if (!Spry) Spry = {}; if (!Spry.Utils) Spry.Utils = {};
    // We need an unload listener so we can store the data when the user leaves the page
    // SpryDOMUtils.js only provides us with a load listener so we create this function
    Spry.Utils.addUnLoadListener = function(handler /* function */)
        if (typeof window.addEventListener != 'undefined')
            window.addEventListener('unload', handler, false);
        else if (typeof document.addEventListener != 'undefined')
            document.addEventListener('unload', handler, false);
        else if (typeof window.attachEvent != 'undefined')
            window.attachEvent('onunload', handler);
    Spry.Utils.Cookie = function(type /* String*/, name /* String */, value /* String or number */, options /* object */){
        var name = name + '=';
        if(type == 'create'){
            // start cookie String creation
            var str = name + value;
            // check if we have options to add
            if(options){
                // convert days and create an expire setting
                if(options.days){
                    var date = new Date();
                    str += '; expires=' + (date.setTime(date.getTime() + (options.days * 86400000 /* one day 24 hours x 60 min x 60 seconds x 1000 milliseconds */))).toGMTString();
                // possible path settings
                if(options.path){
                    str += '; path=' + options.path               
                // allow cookies to be set per domain
                if(options.domain){
                    str += '; domain=' + options.domain;
            } else {
                // always set the path to /
                str += '; path=/';
            // set the cookie
            document.cookie = str;
        } else if(type == 'read'){
            var c = document.cookie.split(';'),
                str = name,
                i = 0,
                length = c.length;
            // loop through our cookies
            for(; i < length; i++){
                while(c[i].charAt(0) == ' ')
                    c[i] = c[i].substring(1,c[i].length);
                    if(c[i].indexOf(str) == 0){
                        return c[i].substring(str.length,c[i].length);
            return false;
        } else {
            // remove the cookie, this is done by settings an empty cookie with a negative date
            Spry.Utils.Cookie('create',name,null,{days:-1});
    var cookie = Spry.Utils.Cookie('read','panel');
    //alert(cookie);
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: cookie ? parseFloat(cookie) : 0});
    Spry.Utils.addUnLoadListener(function(){
        Spry.Utils.Cookie('create','panel',TabbedPanels1.getCurrentTabIndex());
    </script>
    </body>
    </html>

  • Linking to a Tab in another page which has 3 tabbed panels

    Hi
    I have created a page which has three tabbed panels.  The first is a horizontal Tabbed panel with two tabs.  Each of these tabs has a vertical tabbed panel with 4 tabs in each.
    I want to be able to link from another page to the 2nd horizontal tab and the first vertical tab on that page.
    If I use the URL  ?tab=1, the link takes me to the second horizontal tab but also then to the second vertical tab.
    I have tried the following
    giving the target tabs the same id and targeting ?tab=news
    setting the url to ?tab=1&tab=0
    setting the url to ?tab=TabbedPanel1.tab1&TabbedPanel2.tab2
    but none of these work.
    Javascript is not my thing (as you have probably guessed!).  Is there a way that I can target any combination of tabs on one page through the URL?
    Any ideas, much appreciated.
    Thanks

    Data:
    Tab on main tabbed panels = primetab
    Tab on nested tabbed panels = secondtab
    URL Link = myPage.html?primetab=2&secondtab=2
    Markup:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
    </head>
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
            <div id="TabbedPanels2" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">Tab 1.1</li>
                <li class="TabbedPanelsTab" tabindex="0">Tab 1.2</li>
              </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">Content 1.1</div>
                <div class="TabbedPanelsContent">Content 1.2</div>
              </div>
            </div>
        </div>
        <div class="TabbedPanelsContent">
            <div id="TabbedPanels3" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">Tab 2.1</li>
                <li class="TabbedPanelsTab" tabindex="0">Tab 2.2</li>
              </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">Content 2.1</div>
                <div class="TabbedPanelsContent">Content 2.2</div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <script src="SpryAssets/SpryTabbedPanels.js"></script>
    <script src="SpryAssets/SpryURLUtils.js"></script>
    <script>
    var params = Spry.Utils.getLocationParamsAsObject();
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.primetab ? params.primetab : 0});
    var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2", {defaultTab: params.secondtab ? params.secondtab : 0});
    var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3", {defaultTab: params.secondtab ? params.secondtab : 0});
    </script>
    </body>
    </html>
    The highlighted parts denote the markup required over and above the original markup for tabbed panels, placing JS at the bottom of the document is a peculiarity of mine an is therefore not a necessity.
    Gramps

  • Spry Tabbed Panels: Title Tabs shift left, Content Tabs stay positioned correctly, right.

    I inserted a clean Spry Tabbed Panel into a virtually empty HTML page (no content). I have a content div (624 px , float left) and sidebar (336 px, float right). When I insert the tabbed panel widget into the sidebar, the Spry Title Tabs go or float to te left, while the content portion of the Spry Tabbed panel stays correctly positioned within the sidebar on the right. I looked at the Spry CSS notes, and mentions something of by default they float the tabs left to allow for future divs without problems?? This problem only shows in Design View (leading me to think I've done something wrong). When viewed in Live View or Browser it looks fine, perfect! I have tried several float and clear combinations, none ave helped. I also deleted the Spry Tabbed CSS as to reset to default. Any Help or Advice would be greatly appreciated. Thank you

    Design View is not an accurate representation. Don't rely on it.  Use Live View and Preview in Browsers.
    Incidentally, the Spry framework is gone from DW now.  Most people have moved away from Spry to  jQuery or commercial widgets.
    JQuery UI Tabbed Panels
    http://jqueryui.com/tabs/
    jQuery Easy Tabs
    http://os.alfajango.com/easytabs/
    Nancy O.

  • Spry TabbedPanels - panel shifts left in IE when hovering on tabs (only)

    I've added tabbed panels to a fairly tight vertical space on a page. It pretty much works, except:
    1) When the page loads in IE. After the page loads I can do anything on the page except hover over (or try to use) the tabs. The moment the cursor goes over the tab space, the entire panel shifts left 20 or 30 pixels. I have added "overflow:hidden" to the Spry CSS where I can, but the tab issue remains. When I check the code in Dreamweaver, it does NOT identify any related browser compatibility issues.
    2) When the page loads in Safari, the entire page content shifts down 10-20 pixels (but functions normally).
    URL is http://www.inkwellxwords.com/iwxsamples.html
    Thanks in advance for any advice,
    B

    Had to replace the code on the site since it was live.
    Here's the core code from the one that's still goofy in Dreamweaver design mode, and on the live site, but not in Dreamweaver preview (goes with inkwell.css on www.inkwellxwords.com)
    <body>
    <div id="wrapper"> <!-- Wrapper contains all of the visbile page content -->
      <!-- Right column with menu -->
      <div id="sidebar"><img src="images/men_home.jpg" alt="samples, subscribe, syndicate, onion av club, books, about, news" usemap="#Map" /></div>
      <!-- Header area with logo -->
      <div id="header"><img src="images/slideboxtem2.jpg" alt="Ink Well Xwords" /></div>
      <!-- Main page area with content -->
      <div id="pagemain">
        <p>Hi, there! Welcome to the electronic home of <strong>Ink Well </strong>xwords, a puzzle empire conquered in 2004 by <strong>Ben Tausig</strong>, and presently administered by his fifteen cruel and ungrateful sons. </p>
        <p>Ink Well appears each Wednesday in alternative weeklies throughout North America, and is also available by email (sign up through the &quot;subscribe&quot; tab on the right) as well as supposedly on devices like the iPhone if you know how to work those.</p>
        <p>Closely associated with Ink Well is the <a href="http://www.avclub.com/" target="_blank">Onion AV Club</a> crossword, also edited by Tausig on a weekly basis, and written by some extremely spoiled puzzle celebrities. Basically what happens is someone brings a new puzzle to Tausig in his soot tub and he screams because they're letting in light and then the puzzle just ends up running as is. You also get this AV Club xword as a COOL SPECIAL gift if you &quot;subscribe.&quot;</p>
        <p>But hey, don't take my word for it: look around the site yourself - there's a lot of fun to be had here! You can subscribe, as I already said; you can find out how to run Ink Well in your paper or on your website (guaranteed to triple revenue and promote synergy by 90); you can see some samples; and you can buy books and merchandise. I also do wedding, bar mitzvah, and break-up puzzles!</p>
        <p>See ya soon! Oh, yeah, and <a href="mailto:[email protected]">drop me a note</a><a href="benmenu.html"></a> anytime! </p>
        <p>- Ben Tausig (via Power of Attorney)</p>
      </div>
      <div class="clearfloat"></div>
      <!-- Footer -->
      <div id="footer">
      <table width="820" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="72"> </td>
        <td width="748" bgcolor="#CC3300"> </td>
      </tr>
      </table>
      </div>
    </div> <!-- End of wrapper div -->

  • Book tab/panel/icon location irritation

    Is there any way I can get the Book tab/panel/icon (whatever it's called) to stay in my panels toolbar, which I have docked on the right side of my screen? Every time I start FM9 the book panel opens on the left side of the GUI and I have to minimize it and manually drag it over to the right side of the screen and dock it with the other icons. Am I missing something obvious?
    Any suggestions appreciated.

    Ron,
    I do not know exactly how FrameMaker's workspace management works, and I do not move the book panel around, but this may help.
    FrameMaker has the ability to save your workspacet, but it appears NOT to work when just the book file is open. When a document within the book is open, you can rearrange the workspace and save it (giving it a name) using the workspace drop-down in the upper right corner of the application window. It should remember this workspace the next time you open FrameMaker; however, it does not open the panels, etc, until you open a document; opening the book file is not sufficient.
    I have noticed that when I close all the document files and have just the book file open, all the panels, except the book panel, disappear. If I open a panel, it appears at the default place that Frame wants to put it, not where I had put it in the workspace. If I were to open a document file, then Frame moves that panel to the place at which I saved it in my saved desktop. I think this is because Frame allows NO custom workspace with just a book file open. This seems a real deficiency to me.
    So, my suggestion is to open a book and one of its document files. Set up your workspace as you want, and save it. When you open just the book file, Frame will likely put it on the left side as its default. Without moving the book file, open one of its documents, and my guess is that Frame will move the book file panel to where you want it, where you had it stored in your custom workspace. I have not tried this, because I leave the book panel on the left, but the other panels behave this way.
    Hope this helps, but it may not,
    Van

  • I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?

    I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
    If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
    By the way new to all this so be gentle please
    <div id="main_column">
         <div class="section_w500">
            <h2>North Bali Listings</h2>
            <div id="TabbedPanels1" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
                <li class="TabbedPanelsTab" tabindex="0">Land</li>   <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
                <li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
                <li class="TabbedPanelsTab" tabindex="0">Commercial</li>
    </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially  in and around the Badung and Denpasar areas, has driven investors northward, in our opinion   at this time it is an ideal opportunity to  acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
                  <p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area,  principally along the coastline ,  with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling,  water sports, fishing, sailing. trekking  gives this area the potential to be world-class tourist destination. Research has shown that  property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
                    <br />
                    The Northern part of Bali  is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
                  Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
                  <table width="100%">
                    <tr>
                      <td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property  in this area; be it for investment, development or private use.</div></td>
                    </tr>
                  </table>
                  <p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
                    <br />
                    <img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other  areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve;  are also beginning to attract investors, resulting in  prices  rising.<br />
                    The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with &quot;Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
                    <br />
                    <img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of  established ex pat communities, and better facilities  also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
                  <p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
                </div>
                <div class="TabbedPanelsContent">
                  <p> </p>
                  <table width="100%" border="0">
                    <tr>
                      <td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
                        <span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
                      <td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng  Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
                    </tr>
                    <tr>
                      <td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded &quot;Tourism Status&quot;  ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
                        <p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone &amp; Internet close to hand and readilly available</p></td>
                      <td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
                    </tr>
                    <tr>
                      <td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
                        Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
                          Min Rental Period 25 Years, extendable to to a max of 75 years
                          (with full &quot;Right Of Use&quot; issued by owner)</span></td>
                      <td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
                        <br />
                        <span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
                    </tr>
                  </table>
                  <p><br />
                  </p>
                  <hr width="100%" noshade="noshade" />
                  <p> </p>
                </div>
    <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
                <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
    </div>
            </div>
            <p> </p>
          <p>
            <h7 style="color: #C03"></h7>
          </p>
    <h2></h2><!-- this stays empty to put dotted line under listings block -->
         </div>
         <div class="cleaner"></div>
        </div> <!-- end of main column -->

    Could you share a link to the page?
    Seeing it in context and in our browsers is much easier to debug.
    If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms.

  • Spry tabbed panels as menu system

    Hi,
    This is actually for Dreamweaver CS6.    What I'm trying to do is use spry tabbed panels as horizontal my menu system.    I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected.     I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
    My current problems are these:
    I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
    The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
    I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
    For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
    I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
    Any help or suggestions would be greatly appreciated!!
    Below is my tabbed panels css:
    .TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    color: #FFF;
    background-color: #000;
    width: 1000px;
    height: 25px;
    .TabbedPanelsTab {
    position: relative;
    top: 0px;
    float: left;
    padding: 4px 21px;
    margin: 0px 0px 0px 0px;
    background-color: #000;
    list-style: none;
    border-left: solid 0px #000;
    border-bottom: solid 0px #000;
    border-top: solid 2px #000;
    border-right: solid 0px #000;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    width: 1000;
    height: 15px;
    font-family: "Myriad Pro";
    font-size: 1em;
    font-weight: normal;
    .TabbedPanelsTabHover {
    background-color: #D31145;
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    .TabbedPanelsTabSelected {
    background-color: #D31145;
    border-bottom: 0px solid #D31145;
    color: #FFFFFF;
    .TabbedPanelsTab a {
    color: black;
    text-decoration: none;
    .TabbedPanelsContentGroup {
    clear: both;
    border-left: solid 2px #D31145;
    border-bottom: solid 2px #D31145;
    border-top: solid 2px #D31145;
    border-right: solid 2px #D31145;
    background-color: #FFFFFF;
    visibility: visible;
    width: 50%;
    position: inherit;
    height: auto;
    /* 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;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
    overflow: hidden;
    zoom: 1;
    .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;
    .VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
    .VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
    overflow: visible !important;
    .TabbedPanelsContentGroup {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    .TabbedPanelsContent {
    overflow: visible !important;
    display: block !important;
    clear:both !important;
    .TabbedPanelsTab {
      overflow: visible !important;
      display: block !important;
      clear:both !important;
    THe Javascript for my tabbed panels are below:
    // SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials provided with the distribution.
    //   * Neither the name of Adobe Systems Incorporated nor the names of its
    //     contributors may be used to endorse or promote products derived from this
    //     software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    (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, "mouseover", function(e) { self.onTabClick(e, tab);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

    Note - I agree with Nancy
    As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from  21px to 18px.
    .TabbedPanelsTab {
        -moz-user-select: none;
        background-color: #000000;
        border-color: #000000;
        border-left: 0 solid #000000;
        border-style: solid;
        border-width: 2px 0 0;
        cursor: pointer;
        float: left;
        font-family: "Myriad Pro";
        font-size: 1em;
        font-weight: normal;
        height: 15px;
        list-style: none outside none;
        margin: 0;
        padding: 4px 18px;
        position: relative;
        top: 0;
    Don't use dummy text without normal length text with breaks

  • 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

  • Spry Tabbed Panels- Open link on click

    I am completely new to Dreamweaver and web design in general so please bear with me. I have created a tab menu using Spry Tabbed Panels but dont know how to make it so once a tab has been clicked an html file (ex. tab1.html which is saved on my computer) opens in the content portion, not open a new window.Can anyone post a tutorial or if its simple enough, post some directions?
    Any help would be appreciated!

    Spry Tabbed Panels are not a "menu" per se, but a series of panels, all but one of which remain hidden until their tab is clicked. Tabbed Panels is a Spry "disclosure" widget. All the content may actually exist on the same page as the Tabbed Panels widget, or you can use <iframe></iframe> to 'surface' other pages in your Tabbed Panel Content divs.
    As it sounds as if you want to use the <iframe> approach, here's how:
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">First Panel</li>
        <li class="TabbedPanelsTab" tabindex="0">Second Panel</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">This is the content of the first panel <br /><iframe src="heirloom.html" width="100%" height="800" frameborder="0"></iframe></div>
        <div class="TabbedPanelsContent">This is the content of the second panel <br /><iframe src="data.html" width="100%" height="500"></iframe></div>
      </div>
    </div>
    You can also omit the frameborder="0" if you want to keep the default look of an iframe. Remember to give both a height and a width to your iframes. Test them in several different browsers (or BrowserLab) to make sure they look the way you want.
    Beth

  • Spry Tabbed Panels - replace text tab with an image, how to?

    Hi all, I'm stumped. I've uploaded 2 files to:
    http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
    http://docs.google.com/leaf?id=0B4zgjxAaUD97YTQ1MDliNzEtZGVhZS00MmYzLTllZWMtMzJiODQwMjRlMT Bl&hl=en&authkey=CILrxq0G
    I'm working in Dreamweaver CS3, 4 tab "Spry Tabbed Panel" with 3 columns (one column is a form and submit btn). The 1st photo is a mockup of what I'm trying to accomplish. In the 2nd photo, Nokia designed a page for its Nokia Developer Summit 2010 (been pulled down since). This is the desired effect. I'm trying to replace the typical text tabs in the tabbed panel with images, or, at the very least, change the color between states ON and OFF (images the same except for bg color - green verses gray), which is probably the better way to go, given page load time.
    I need the CSS and HTML code. I'd settle for just the image problem, but if someone can give me guidance on the content boxes too, that would be AWESOME!
    REALLY hoping anyone can help (Ben, I'm an Aussie too) - been on this for a month now.
    Very grateful Adobe staffs such a great resource tool as this site with a lot of really good, courteous brainiacs.
    Thanks,
    Louis cat

    G'day Ben,
    Upgraded to Dreamweaver CS5, added Tabbed Panels 2 widget to page.
    Here's a mockup of what I'm trying to do: http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
    Questions:
    1. Want to change Spry TP tabs to images (see link, above), then make them vertical tabs, with morph effect - How?
    2. How do I change the default TabbedPanels2 instance name? (not easy to rename)
    3. The first section of the code was planted in my index page - shouldn't this be pasted into a CSS file, or just leave it alone?
    ================================================
    FIRST SECTION OF THE CODE: -------------------------------------------------------------------------------
    <style type="text/css">
    /* BeginOAWidget_Instance_2138522: #TabbedPanels2 */
    /* TabbedPanelsTabGroup */
    #TabbedPanels2 .TabbedPanelsTabGroup {
    top: 1px;
    left: 0px;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border-left: solid 0px inherit;
    border-bottom: solid 0px inherit;
    border-top: solid 0px inherit;
    border-right: solid 0px inherit;
    padding: 0px 0px 0px 0px;
    /* TabbedPanelsTab */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTab,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTab {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #DDD;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTab a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTab a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsTabHover */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsTabSelected */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #EEE;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsTabFocused */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #EEE;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsContentGroup */
    #TabbedPanels2 .TabbedPanelsContentGroup {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 0px 0px 0px 0px;
    /* TabbedPanelsContentVisible */
    #TabbedPanels2 .TabbedPanelsContentVisible {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border-left: solid 0px #CCC;
    border-bottom: solid 0px #CCC;
    border-top: solid 0px #999;
    border-right: solid 0px #999;
    padding: 4px 12px 4px 12px;
    #TabbedPanels2.BTabbedPanels .TabbedPanelsTab {
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    #TabbedPanels2.BTabbedPanels .TabbedPanelsTabSelected {
    border-top: solid 1px #999;
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabGroup {
    width: 10em;
    height: 20em;
    top: 1px;
    left: 0px;
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #EEE;
    /* EndOAWidget_Instance_2138522 */
    </style>
    ========================================================
    SECOND SECTION OF THE CODE: ----------------------------------------------------------------------------------------
      <div id="TabbedPanels2">
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id.  </p>
        <h2>Tab 2</h2>
        <p>Nulla facilisi. Vestibulum ipsum elit, tincidunt sed tristique sit amet, faucibus in orci. Nunc sit amet elit lorem. Sed eget arcu ipsum, pharetra ullamcorper lectus. Sed ac diam ac tortor mattis mollis. Etiam mattis felis vel augue tempus in rhoncus ligula elementum. Vestibulum ut iaculis risus. Aliquam erat sem, feugiat vel laoreet in, lobortis non mauris. Vestibulum neque nibh, vehicula eleifend tincidunt sed, bibendum id dolor. </p>
        <h2>Tab 3</h2>
        <p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. </p>
      </div>
      <script type="text/javascript">
    // BeginOAWidget_Instance_2138522: #TabbedPanels2
      var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
       injectionType: "replace",
       widgetID: "TabbedPanels2",
       autoPlay: true,
       defaultTab: 0,
       enableKeyboardNavigation: true,
       hideHeader: true,
       tabsPosition: "top",
       event:"click",
       stopOnUserAction: true,
       displayInterval: 5000,
       minDuration: 300,
       maxDuration: 500,
       stoppedMinDuration: 100,
       stoppedMaxDuration: 200,
       plugIns:[]
    // EndOAWidget_Instance_2138522
      </script>
    ===================================================
    Any help would be much appreciated, Ben. Cheers from another Aussie. Louis Cat!

  • Problem with Spry Tabbed Panels with Explorer 6

    I've used Tabbed panels all over my site, and they seemed to work fine in FireFox, Safari, Explorer 7 and 8, etc. but today i checked out Explorer 6 in BrowserLab, after someone said our site looked weird.
    In EX 6 it certainly does: all the tabbed panels are preceded by about a screen's worth of empty space!
    I'd appreciate it someone could have a look at this and see if they can tell what's going on:
    See this page:
    http://www.ragandbone.ca/Pages/willows.html
    or almost any ohter page on the site!
    I'm very far from experienced in web work, so I might need step by step instructions for any fix suggested.
    Thanks in advance
    John

    Hi, John,
    Make the width of the .TabbedPanels narrower. In the course of my experiments, I ended up making it 580px, which works in IE6, according to BrowserLab. You had a simple width overrun; your widths + borders+ paddings + margins (within the content div) added up to more than the width available. You might be able to get away with slightly more width, but test it carefully when you start to add it back in...
    This might be an instance of the "doubled margin bug" (see http://www.positioniseverything.net/explorer/doubled-margin.html).
    I changed the margin on .TabbedPanels to margin: 0 auto; so that any effective centering that had been done by 'filling' the width previously was now achieved by the margin-right and margin-left set to "auto." (The zero applies to top and bottom margin.)
    I deleted the left: -40px; that you had applied to .TabbedPanelsTab and zeroed out the  right padding on .content ul, .content ol {
    padding: 0 15px 15px 0; that your threeColFixHF_RB.css had applied to all ul in the site. This might or might not actually affect anything if you don't make these same changes, but I had altered them in the course of figuring out what was going on. It's never a good policy, in my opinion, to use negative margin if you can simply correct both elements, as I did. You don't want to be progressively compensating for things you don't need anyway!
    Beth

  • Ghost image of a video embedded in a tabbed panel (preview mode)

    What am I doing wrong?
    Am using a tabbed Widget (3 tabs): the first tab with a picture gallery widget (simplest form). Tabs 2 and 3 with 1 HTML embedded youTube video on each tabbed panel.  Everything was coming together great and when I previewed the page everything worked as it should. That was last week I think. Have been cleaning up details on the site for a couple of days.
    Today I was checking the tab widgets suddenly instead of the one video on the panel, I had a second identical one floating on the upper left side of the page. I worked on the problem for a while, coming at last to deleting the HTML video rectangles, and discovered I STILL had the extra video floating up left, even when the original was gone!
      After much hair-tearing, hand-wringing and wild experiments, I deleted the page and started from scratch, checking the preview after every move to see if anything strange was happening. Everything was fine until I copied the embed code from youTube and pasted it on the page. The rectangle appeared as it should, I centered it in the panel and previewed .... PHOOEY!! there was
    the floating extra video up left, invisible until I previewed. At this point deleting the main video deletes the "ghost" as well, but of course thats not a solution.
    Here is the page with the inserted HTML --
    And here is is previewed
    Can you hear me screaming?
    Oh yeah, and when I insert the HTML for the second video embedding the "ghost" follows suit. The one floating on the left matches whichever video is visible on the widget .Also important to mention is that in the previewed page, the "ghost" video is not active, not live, does not react to the mouse.
    And now I discover that as I go to another window (to write this) and then return to Muse, the "ghost" video has disappeared, but it always comes again when I preview the page.
    Anyone got a suggestion???? PLEASE????
    Karen

    I call down blessings on you, you wonderful people! That worked, Zack! Now I just have to store that somewhere I can always find it and remember to use it!  I can't say I understand it at all. My default browser is Firefox but I have no idea what browser (if any) Muse uses for previews, and Chrome is also on my PC although I seldom use it.
    Furthermore, compare the first photo I posted of the HTML object in Design mode with this one
    See the difference on the HTML object? This is also Design view, but instead of showing an anonymous black rectangle, it now has the video title and the start arrow - in Design mode!! Go figure. Now I'll try to finish up the site at last and see how everything works.
    I'd cross my fingers -- but it makes it too hard to use the mouse.
    Thanks again!
    Karen

  • Formatting Spry Tabbed Panel so tabs appear on the right side

    Hi, I know this is a rookie question, but that is because I'm a rookie. How can I format a Spry Tabbed Panel so the tabs appear on the top-right side rather than the default top-left. I found the solution on the Adobe Labs site, but couldn't get it to work. If anyone can please help me with the code or point me in the right direction if I can change it with css. Thanks.

    Add/modify the following
    .TabbedPanelsTab {
        float: right;
    Using the above, you will have to remember that the first tab will be on the extreme right.
    Gramps

Maybe you are looking for