Spry Menus on Spry Tabbed Panels?

Hi,
I'm designing a site that has major tabs at the top, each of which takes the visitor to an appropriate section of the site... each with a default section overview page and a horizontal nav menu that's appropriate for that section. (This design is similar to going to a site like AT&T and clicking on top tabs for Home, Small Business or Enterprise. Once you've done so, the menu below then presents links appropriate to the Home, Small Business or Enterprise products.) I've been trying to implement this by putting instances of Spry Menus in Spry Tabbed Panels within the TabbedPanelsContentGroup div. Specifically, I have the MenuBarHorizontal class is each TabbedPanelsContent div/class.
I have the basic layout working, but the wiring is mystifying me. Clicking the various tabs indeed presents the correct corresponding menus. But I also need to figure out how to make clicking a section tab go to the section overview page (which happens to also correspond the first menu item, "Overview", in each section). There's no real <a href> kind of option that's apparent in conjunction with the TabbedPanelTabs in the TabbedPanelsGroup. Is there a way to force a particular page to display when switching tabs? Or am I trying to use the wrong tool for the job and there's a better technical approach to implementing this design?
I've tried David Powers' blog entry re "Opening Specific Tabs and Panels from Another Page" (http://foundationphp.com/tutorials/spry_url_utils.php), but it describes exactly what the title implies.
Thanks!
Jeffrey

Hi, Jeffrey,
I think I'm going to need to diagram this out!
Let's see...when you say "major tabs at the top" are you referring to a separate MenuBar or are you speaking of Spry Tabbed Panels?
You of course realize that if you are speaking of Spry Tabbed Panels, that EVERYTHING on the panels is on one page. If that is your main organization, yeah, it's a little hairy.
Now, if you have a "normal" one-level set of nav buttons that each takes you to a page that contains a set of Tabbed Panels for that "department," that will get you where you need to be without quite as much mind-blowing follow-the-wire through the wall hijinks, if you know what I mean.
Here is a site that I put together using Spry Tabbed Panels: http://www25.uua.org/uuhs/index.html Although the top "tabs" nav looks like Tabbed Panels tabs, the Tabbed Panels don't start until you get inside the site, and there I use Vertical tabs (on the left side) and on the Panels have put lots of Spry Accordions.
By using this technique, you have an effective "landing page" on each "department" linked to with the top navigation buttons.
Best of luck, and watch out for short-circuits!
Beth

Similar Messages

  • Spry Tool tip on Tabbed panels

    I am having a problem with the new spry tool tip widget. I
    have a Tabbed panels table with 4 tabs. For some reason the spry
    widget only works when I have 4 seperate div's with the tool tip
    content and 4 separate js variables placed after the divs. One must
    be on each tab. Is there any way to make it work so there is one
    div and one variable creation on the page rather than 1 for each
    panel?. heres how my code works:
    <head>
    <body>
    <div class="TabbedPanels" id="tp1">
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">TAB
    1</li>
    <li class="TabbedPanelsTab" tabindex="1">TAB
    2</li>
    <li class="TabbedPanelsTab" tabindex="2">TAB
    3</li>
    <li class="TabbedPanelsTab" tabindex="3">TAB
    4</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
    <div id="Funds_DIV1" spry:region="ds1"
    class="SpryHiddenRegion" >
    <table>
    <div id="blindMe" class="toolTip"> <%=accesstxt
    %> </div>
    <script type="text/javascript">
    var blindTooltip = new Spry.Widget.Tooltip('blindMe',
    '.blindTrigger');
    var blindToolTipClosed = new
    Spry.Widget.Tooltip('blindMeClosed', '.blindClosedTrigger');
    </script>
    </table>
    </div>
    </div>
    <div class="TabbedPanelsContent">
    <div id="Funds_DIV2" class="SpryHiddenRegion"
    spry:region="ds2">
    <table>
    <div id="blindMe" class="toolTip"> <%=accesstxt
    %> </div>
    <script type="text/javascript">
    var blindTooltip = new Spry.Widget.Tooltip('blindMe',
    '.blindTrigger');
    var blindToolTipClosed = new
    Spry.Widget.Tooltip('blindMeClosed', '.blindClosedTrigger');
    </script>
    </table>
    Repeat two more times . You get the idea

    Sorry i just kinda threw that together as a mock up
    id="blindMe" becomes id="blindMe2" and so on for each subsequent
    use. I had already checked for that. The same thing goes for the
    associated script variable. It works as is, i just dont want to
    have to duplicate it.
    The problem is, if i remove all the duplicated divs and
    scripts, then place that script and div on the bottom of the page
    after the </div> for the tabbed panels div, the hover state
    no longer works. Same is true if i keep it within the </div>
    the only way it does work is if i duplicate it within each tabbed
    panels content divs. (With different id values of course)

  • IFrame-issues with Tabbed Panels

    See for yourself
    (the code may be messy, haven't gone through it yet)

    Perhaps I wasn't clear enough when I phrased the question:
    Does anyone know if iFrames are unsupported when using
    Spry-elements, specifically the Tabbed Panels script? I have to use
    iFrame to embed a my Zenphoto gallery.
    Here's the site WITH iFrame:
    http://hogfem.no/fjordpanorama
    And here's WITHOUT the iFrame:
    http://hogfem.no/fjordpanorama/index2.php

  • Spry Tabbed Panels mangled by IE

    I have struggled -- and failed -- to figure out why IE mangles my Spry Tabbed Panel code even though the same code is rendered perfectly by Firefox, Safari, and Dreamweaver's Live View. If you think you can help me out, please take a look at the affected web page:
    www.mulinosultevere.com/panoramic_tab.htm
    using Firefox and/or Safari and then look at it using IE. The source code, of course, is available for you to view. I would appreciate any suggestions as to how I can get IE to render the code as the other browsers do. I assume that the problem on IE has something to do with my effort to use the very long photo.since the web page snaps back into the proper position when the second tab panel is activated.
    Only the web page provided currently uses Spry Tabbed Panels. The rest of the website is live using only rollover menus. I want to upgrade the website with tabbed panels, but they have to work properly in IE, of course.
    Thanks for any help you can provide.
    -- Bill

    Thanks, Helpvid, but I don't think that is the problem. I already know that IE has to be "kicked" to start Javascript. However, if you look at my web page -- www.mulinosultevere.com/panorama_tab.htm -- you will see that IE is, in fact, recognizing the Javascript because the second tab panel is rendered correctly. My problem is with the first panel that has the very long photo. Apparently there is a problem with the Javascript/html code itself. I am still looking for a solution :-( .
    Ciao!
    -- Bill

  • Help Using Spry tabbed panel as a menu.

    Thanks in advance to all who take the time to read and any assistance you can offer.
    I'm picking up where someone else started a website. They used Spry tabbed panels as a menu system (CS4). Each Panel is a top-level "menu" and when it opens, sub-menus (hyperlinks) come up vertically under the panel.  I REALLY don't want to start over if I don't have to - need the site up and running - but cannot figure out how to make the "HOME" tabbed panel (the first one) actually take users back to the home page.  For now, I've created a "submenu" (link) under HOME tabbed panel to help the user navigate back to the home page.
    HELP? 
    http://www.orange.k12.nc.us/ec/beta/default.html

    Thank you Gramps - for your prompt and helpful response!  Your solution absolutely fixed the problem I asked about.
    If I had followed forum advisories and asked the question correctly, the navigation on this website would probably be working perfectly by now. Your solution fixes the home page.  Can you look at one more page and advise please??
    On the "subpages" of this site, the same tabbed panel "fake menu" exists.  I replaced the equivalent line of code in the template for those pages (at line 45) with what you gave me.  I'm obviously missing something in the code to send the user back to the HOME page from these pages.
    In the sample link below, you will be starting from a "subpage" of the site.  Clicking on the "HOME" tab leads you not to the actual home page (default.html in the root directory) but to a default.html page within the subdirectory for the page you are on (which doesn't exist.)  Can I add something to that line of code to get them back to the home page?
    Again... thank you!!
    http://www.orange.k12.nc.us/ec/beta/Students/Student_Resources.html

  • Datasets in Spry Tabbed Panels

    Hey guys,
    I have a spry tabbed panel in which the contents are iframes that load a spry xml dataset. The problem I am encountering is that while the "default tab" spry loads...when toggling the other tab I get the errors
    Failed to retrieve data set (pagingInfoDs) for spry:repeat
    FF Firebug shows me
    uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://192.168.0.1:93/vadmin/includes/cms.js :: BrowserInfo :: line 51" data: no]among other things...
    Now I'm developing on localhost so I'm not able to show an example...the thing is if I were to change the default tab (from 0 to 1) the default tab now will work whislt the other would trigger the error. This means that some thing with the tab NOT being "open" or "shown" is affecting the dataset. I find this wierd as the datasets are loading within iframes...
    Any idea as to what can be causing this reaction in the tabs?

    well the code to the spry tabbed panel
    <div class="contentList">
      <div class="TabbedPanels" id="TabbedPanels_links">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" title="View Webpages">View Webpages</li>
          <li class="TabbedPanelsTab" title="View Non-HTML Docs">View Non-HTML Docs</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
            <iframe src="../../../../?task=menus&a=browse&menu_id=true" width="100%" height="500" ></iframe>
          </div>
          <div class="TabbedPanelsContent"> <iframe src="../../../../?task=docs&a=browse&doc_id=true" width="100%" height="500" ></iframe></div>
        </div>
      </div>
    </div>
    </fieldset>
    <script type="text/javascript">var TabbedPanels_links = new Spry.Widget.TabbedPanels("TabbedPanels_links", { defaultTab: 2 });</script>
    If I were to switch iframe sources the one thats in the "default" tab will list while the the tab that isn't will error
    This was the first error
    uncaught exception:
    [Exception... "Component returned failure code: 0x80004005
    (NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005
    (NS_ERROR_FAILURE)" location: "JS frame ::
    http://orin.mshome.net:93/vadmin/includes/cms.js :: BrowserInfo :: line
    51" data: no]
    After that its more that the dataset wasn't a property

  • Spry Tabbed Panel doesn't work

    I have a spry tabbed panel on my site. The tabs contain
    information, but you cannot open the tab. I can set the default
    tab, and the info is there, it just won't allow me to open the
    different tabs. Code is below:
    <div id="level3MainContent"> <!--
    InstanceBeginEditable name="content" -->
    <div spry:region="ds1">
    <div spry:repeat="ds1">
    <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab"
    tabindex="0">Newspaper</li>
    <li class="TabbedPanelsTab"
    tabindex="0">Location</li>
    <li class="TabbedPanelsTab"
    tabindex="0">Information</li>
    <li class="TabbedPanelsTab" tabindex="0">Microfilim
    Holdings</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div
    class="TabbedPanelsContent">{ns1:title}</div>
    <div class="TabbedPanelsContent">County:
    {ns1:county}<br />City: {ns1:city}</div>
    <div class="TabbedPanelsContent">Publisher:
    {ns1:publisher}<br />Volume: {ns1:volume}<br
    />Published: {ns1:published}<br />Other Information:
    {ns1:otherinfo}</div>
    <div
    class="TabbedPanelsContent">{ns1:microfilm}</div>
    </div><p></p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new
    Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:1});
    //-->
    </script>
    <!-- InstanceEndEditable --></div>
    Link to page is:
    http://www.history.nd.gov/archives/counties/barnes.html

    I tried it on a blank page, nothing but the tabbed panel. It
    still does not allow the user to open a tab:
    http://www.history.nd.gov/trialTAB.html
    I am not sure about the generic statement about "some
    problems not allowing it to validate. if you sort those". Can you
    be more specific. I have had a number of problems with spry panels
    that won't open. The spry menus work fine on the site.

  • Spry Tabbed Panels bug

    I am having an issue with the spry tabbed panels on my
    website.
    http://www.roxbury.org. On the
    intial page load, all of the sub menus appear for a few seconds and
    then only the active one appears like it is supposed to. When
    creating a new page from template, the preview also shows all of
    the sub menu contents but when I open the page, it looks fine.
    It doesn't appear to happen when navigating to other pages,
    just on the index page of the site.
    Any clues? My boss wants to can all adobe features which I do
    not want to do so please help with a fix.

    roxwebmaster wrote:
    > I am having an issue with the spry tabbed panels on my
    website.
    >
    http://www.roxbury.org. On the
    intial page load, all of the sub menus appear
    > for a few seconds and then only the active one appears
    like it is supposed to.
    > When creating a new page from template, the preview also
    shows all of the sub
    > menu contents but when I open the page, it looks fine.
    >
    > It doesn't appear to happen when navigating to other
    pages, just on the index
    > page of the site.
    Checking the code, it seems that the first page doesn't set a
    defaultTab option, which the others do, so perhaps set the
    defaultTab to 0 for the home page. Or you could try moving the
    constructor code so that it is immediately after the tab panel HTML
    code rather than at the bottom of the page.
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • Spry Tab Panels weirdness

    I have used these things many times but I'm seeing an oddity
    on a page =
    that I haven't seen before. I have tried recreating a fresh
    page with =
    the content and it does the same thing.
    In Live View, the panels act just fine .. but in the browser,
    the tabs =
    don't work and the content that is supposed to be in the tabs
    is just =
    all down the page. And no .. I don't have JS turned off.
    Here's a link to the page in question .. anyone spot
    anything? I've =
    gone through the code 3 times and recreated the page twice
    with the same =
    results.
    http://67.199.107.253/ministries/service_firstimpressions.html
    Thanks for any theories
    Nancy

    Nancy wrote:
    >> The constructor needs to be below the widget markup.
    Think about it
    >> :-)
    >
    >
    > Hi Al ..
    >
    > Okay .. here is the code:
    >
    > <script type="text/javascript">
    > <!--
    > var TabbedPanels1 = new
    Spry.Widget.TabbedPanels("TabbedPanels1");
    > //-->
    > </script>
    >
    >
    > To be really honest with you, it seems to me to be
    backwards to put
    > it at the end. What does it say? It says TabbedPanels1
    equals a new
    > Tabbed Panels instance. If this were ActionScript or ASP
    or any
    > other programming language, the variables are declared
    first and then
    > you do something with them.
    >
    > Obviously, I'm a copy/paste a script type JavaScript
    person (though I
    > mean to change that .. sometime) but to me, it makes
    more sense that
    > putting the variable declaration at the end would
    declare a new
    > instance and not the one described earlier.
    >
    > So yes .. it does seem backward to me in common sense
    terms.
    It acts on the tabbed panel object using an object ID. In
    order to work the
    object must already be in the DOM. The only way to ensure
    that is to place
    the script after the markup.
    Al Sparber - PVII
    http://www.projectseven.com
    The Finest Dreamweaver Menus | Galleries | Widgets
    http://www.projectseven.com/go/pop
    The Ultimate DW Menu System

  • Spry Tab Panel is not working properly on remote server

    Hello All,
    I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
    Here is the link
    http://www.geftas.com/temaritestpage/about.html
    Also I am uploading Css and html code below
    Any help would be exteremely appreciated.
    Thanks
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf8"/>
    <meta http-equiv="content-type" content="cache" />
    <meta http-equiv="robots" content="INDEX,FOLLOW"  />
    <meta http-equiv="keywords" content="Enter Keywords"/>
    <meta http-equiv="description" content="Description Here" />
    <title>TEMARI&CO. | Business Strategists</title>
    <link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
              <div id="header"></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a></li>
          <li><a href="about.html" class="current">ABOUT</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
            <ul>
              <li><a href="#">Business Plan</a></li>
              <li><a href="#">Marketing Plan</a></li>
              <li><a href="#">Incorporation</a></li>
              <li><a href="#">Accounting System</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#">OUR PROCESS</a></li>
          <li><a href="#">CAREERS</a>      </li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    <div class="shadow" id="content">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">values</li>
          <li class="TabbedPanelsTab" tabindex="0">people</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
                    <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
            </div>
          </div>
          <div class="TabbedPanelsContent">
                      <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem n, </p>
                                <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, , </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit a, </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet,  </p>   
            </div>
          </div>
        </div>
      </div>
    </div>
      <div id="footer">
    <div id="legal">
                          <ul>
                              <li>Copyright © 2012 Temari&Co</li>
                        <li>| Privacy Policy |</li>
                        <li>Terms of Use</li>
                    </ul>
        </div>
                <div id="socialmedia">
                          <ul>
                              <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                        <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                        <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                        <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
                  </ul>
          </div>   
      </div><!-- end footer-->   
    </div><!-- end wrapper-->
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    @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.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%;
              height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTab {
              position: relative;
              float: left;
              background-color: #FFF;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              font-weight: normal;
              color: #666;
              height: 30px;
              width: 116px;
              text-transform: uppercase;
              text-align: center;
              line-height: 30px;
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #FFF;
              height: 100%;
              width: 824px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              color: #666;
              border-top-width: 1px;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-top-style: dotted;
              border-top-color: #CCC;
              border-right-color: #CCC;
              border-bottom-color: #CCC;
              border-left-color: #CCC;
    .TabbedPanelsContent {
              height: 100%;
              width: 100%;
              overflow:hidden;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              background-color: #EEE;
              position: relative;
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
    .TabbedPanelsContent {
              clear:both !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
              width: 744px;
    .TabbedPanelsTab {
               overflow: visible !important;
               display: block !important;
               clear:both !important;

    Hi
    Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
    The images have not been uploaded at all, the online CSS is the one without a link to the images
    Regards
    Adaan Pre-Media Services
    For more image editing services follow us @
    web designing services

  • Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

    Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
    Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
    And click on the "Using Spry.Utils.updateContent()"
    The 3rd example shows how to use a fade transition whenever the content changes.
    I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
    Tabs code;
    <ul class="TabbedPanelsTabGroup">
              <li class="TabbedPanelsTab">
                   <table class="Button"  >
                        <tr>
                        <td style="padding-right:0px" title ="Home">
                        <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                        </td>
                        </tr>
                   </table>
              </li>
    etc
    etc
    etc
    and the panel code:
    <div class="TabbedPanelsContent" id="Home">
         CONTENT
    </div>
    I hoped i can use the example code from the link into my tabbed panels.
    I thought this code:
    onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
    could be added to the tab code like this:
    <a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
    But the content doesnt fade...
    I know i need to change the header etc.
    The following is from the link:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aquo Events</title>
    <script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
    <script src="../../../includes/SpryData.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function FadeAndUpdateContent(ele, url)
    try {
         Spry.Effect.DoFade(ele,{ duration: 500, from: 100, to: 0, finish: function() {
              Spry.Utils.updateContent(ele, url, function() {
                        Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
    }catch(e){ alert(e); }
    -->
    </script>
    <style type="text/css">
    /* IE HACK to prevent bad rendering when fading. */
    #event { background-color: white; }
    </style>
    </head>
    So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
    Is there a way to keep my tabbed panel (or change as less as possible) and let
    A. The fade work
    B. The loading work.
    The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
    And the fading part is just because its nice...

    It doesnt show in the post but off course i changed this link;
    "data/AquoThonFrag.html"
    into;
    "javascript:TabbedPanels1.showPanel(1);"
    I must say i dont know if this even works...

  • More than one spry tabbed panels

    Hi,
    On my index page I have a tabbed panel with it own css (size,
    color, etc.)
    I would like to insert another tabbed panel on another page
    (tabbed panel2). I would like this to have its own css style
    (different size, color scheme, etc.)
    When I insert a spry tabbed panel in dreamweaver it
    automatically takes on the css of my original tab panel design! How
    can I let the second tabbed panel take on its own life, completely
    independent of the first one?
    Thank you.

    "chris.cavage" <[email protected]> wrote in
    message
    news:gnuk7l$hoj$[email protected]..
    > How can I let the second tabbed panel
    > take on its own life, completely independent of the
    first one?
    Create a second set of CSS rules for it. The easiest way is
    to make a
    copy of SpryTabbedPanels.css, and call it
    SpryTabbedPanels2.css. Link
    SpryTabbedPanels.css to the original page, and
    SpryTabbedPanels2.css
    to the page that you want to look different.
    David Powers
    Adobe Community Expert, Dreamweaver
    http://foundationphp.com

  • Spry tabbed panels, all content showing on one page, please help?

    Hi there,
    I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
    I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
    Here is the code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DND Perspective</title>
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-color: #2B3856;
    .style1 {
    color: #FFFFFF;
    .style4 {
    color: #FFFFFF;
    font-size: 36px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin-left: 250px;
    .style5 {color: #CCCCCC}
    .style11 {
    font-size: 18pt;
    font-style: italic;
    a:link {
    color: #FFFF00;
    a:visited {
    color: #000000;
    a:hover {
    color: #000033;
    -->
    </style></head>
    <body>
    <div align="center">
      <p align="left" class="style4">DND  </p>
    </div>
    <p align="left">
    <img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" />  </p>
    <p align="center">
    <p align="center">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup" >
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
        <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent style1">
          <div align="center">
            <p class="style11">Welcome to DND </p>
            <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
            <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
            <p>Please visit our services page to discover all photography sessions we have available such as:</p>
            <p>Wedding Photography</p>
            <p> Engament Photos</p>
            <p>Senior Portraits </p>
            <p>Anniversary</p>
            <p>&amp; More!!!</p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
        </div>
        <div class="TabbedPanelsContent">Under Construction...</div>
        <div class="TabbedPanelsContent">Under Construction....</div>
        <div class="TabbedPanelsContent style1">
    <p>We hear at DND  understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &amp;
    packages, custom videos, thank you cards and albums.</p>
               <hr width="50%" align="left" />
          <p><strong>Package 1 - $500.00</strong></p>
          <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 2 - $575.00</strong></p>
          <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 3 - $700.00</strong></p>
          <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
               <hr width="50%" align="left" />
          <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
          <p>Individual prices: 8&quot;x10&quot; = $12.99; 10&quot;x13&quot; = $19.99; 2 - 5&quot;x7&quot; = $12.99; 4 - 4&quot;x6&quot; = $11.99</p>
          <p>(Custom sizes available - Custom framing available)</p>
          <p><strong>Package 1:</strong></p>
          <p>3 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $50.00</p>
          <p><strong>Package 2:</strong></p>
          <p>5 - 8&quot;x10&quot;; 6 - 5&quot;x7&quot;; 6 - 4&quot;x6&quot; = $90.00</p>
          <p><strong>Package 3:</strong></p>
          <p>8 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $125.00</p>
          <p><strong>Package 4:</strong> (Basic Prints)</p>
          <p>Any 100 photos printed 4&quot;x6&quot; = $100.00</p>
               <hr width="50%" align="left" />
          <p><strong>Custom video:</strong>**</p>
          <p>Any 100 photos put to royalty-free music = $50.00</p>
              <hr width="50%" align="left" />
          <p><strong>Custom thank you cards for your guests:</strong>**</p>
          <p>300 cards - 4&quot;x6&quot; = $350.00</p>
          <p>100 cards - 4&quot;x6&quot; = $150.00</p>
         <hr width="50%" align="left" />
          <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
          <p>Bride &amp; Groom Albums</p>
          <p>Parent Albums</p>
               <hr width="50%" align="left" />
          <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
        </div>
        <div class="TabbedPanelsContent style5">
          <p> Contact DND Perspective:</p>
          <p>The best way to reach us is via email .</p>
          <p>You can alternately reach us anytime at ...!</p>
        </div>
        <div class="TabbedPanelsContent">
          <div align="center">
            <p><span class="style1">About Info</span></p>
            <p> </p>
          </div>
        </div>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
      </script>
    </body>
    </html>

    You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
    Correct these links:
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    And you should be good to go.
    Beth
    ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
    B

  • Spry Active Tables in Spry tabbed panels

    Hi everyone and thanks for advance for dealing with my inexperience.
    I'm using dreamweaver cs4 on a mac and I'm trying to create 2 tabbed panels, each with a Spry active table within it that uses a nondestructive filter wired to a spry select menu to navigate through galleries.  When I make 1 of these, it works perfectly.  The problem is that when I try to create the second one, it screws everything up.  Sometimes it can't find the datasets for the select lists anymore, sometimes nothing shows up in one of the tables.  I've run a lot of trial and error, and I just can't detect a pattern. I have very little experience coding and I'm working form a tutorial book.  I didn't think adding the second table in would cause a problem, but apparently it does.  Can anybody help make this work?  I'll post the code below.
    Thanks!
    -CB  
    This works just fine for one of the tabs:
    var rs_SpryCasteAbilities = new Spry.Data.HTMLDataSet(null, "CasteAbilities");
    var rs_SpryProfAbilities = new Spry.Data.HTMLDataSet(null, "ProfessionAbilities");
    rs_SpryProfAbilities.gallery = '1';
    function chooseSet(dataSet, row, rowNumber)
    if (row['Prof_ID'] == rs_SpryProfAbilities.gallery) {
    return row;
    return null;
    rs_SpryProfAbilities.filter(chooseSet);
    function changeSet(set)
    rs_SpryProfAbilities.gallery = set;
    rs_SpryProfAbilities.filter(chooseSet);
    rs_SpryProfAbilities.setCurrentRowNumber(0);
    var rows = rs_SpryProfAbilities.getData();
    for (var i = 0; i < rows.length; i++) {
    if (rows[i]['Prof_ID'] == set) {
    rs_SpryProfAbilities.setCurrentRowNumber(i);
    break;
    var rs_Professions = new Spry.Data.HTMLDataSet(null, "Professions");
    var rs_Castes = new Spry.Data.HTMLDataSet(null, "Castes");
    //with this being the code for the selectors further down the page//
    <div spry:region="rs_Castes">
                        <select name="select2" spry:repeatchildren="rs_Castes">
                          <option value="{Caste_ID}">{Caste_Name}</option>
                        </select>
                      </div>
    //and//
    <div spry:region="rs_Professions">
          <select name="select" spry:repeatchildren="rs_Professions" onchange="changeSet(this.value)">
            <option value="{Profession_ID}">{Profession_Name}</option>
          </select>
        </div>
    This does not work for both:
    var rs_SpryCasteAbilities = new Spry.Data.HTMLDataSet(null, "CasteAbilities");
    rs_SpryCasteAbilities.gallery = '1';
    function chooseSet(dataSet, row, rowNumber)
    if (row[Caste_ID'] == rs_SpryCasteAbilities.gallery) {
    return row;
    return null;
    rs_SpryCasteAbilities.filter(chooseSet);
    function changeSet(set)
    rs_SpryCasteAbilities.gallery = set;
    rs_SpryCasteAbilities.filter(chooseSet);
    rs_SpryCasteAbilities.setCurrentRowNumber(0);
    var rows = rs_SpryCasteAbilities.getData();
    for (var i = 0; i < rows.length; i++) {
    if (rows[i]['Caste_ID'] == set) {
    rs_SpryCasteAbilities.setCurrentRowNumber(i);
    break;
    var rs_SpryProfAbilities = new Spry.Data.HTMLDataSet(null, "ProfessionAbilities");
    rs_SpryProfAbilities.gallery = '1';
    function chooseSet(dataSet, row, rowNumber)
    if (row['Prof_ID'] == rs_SpryProfAbilities.gallery) {
    return row;
    return null;
    rs_SpryProfAbilities.filter(chooseSet);
    function changeSet(set)
    rs_SpryProfAbilities.gallery = set;
    rs_SpryProfAbilities.filter(chooseSet);
    rs_SpryProfAbilities.setCurrentRowNumber(0);
    var rows = rs_SpryProfAbilities.getData();
    for (var i = 0; i < rows.length; i++) {
    if (rows[i]['Prof_ID'] == set) {
    rs_SpryProfAbilities.setCurrentRowNumber(i);
    break;
    var rs_SpryProfessions = new Spry.Data.HTMLDataSet(null, "Professions");
    var rs_Castes = new Spry.Data.HTMLDataSet(null, "Castes");
    //With this being the code for the selectors further down the page//
    <div spry:region="rs_Castes">
                        <select name="select" spry:repeatchildren="rs_Castes" onchange="changeSet(this.value)">
                          <option value="{Caste_ID}">{Caste_Name}</option>
                        </select>
                      </div>
    //and//
    <div spry:region="rs_SpryProfessions">
        <select name="select2" spry:repeatchildren="rs_Professions" onchange="changeSet(this.value)">
          <option value="{Profession_ID}">{Profession_Name}</option>
        </select>
      </div>

    Thanks for the reply Ben!
    Here's the url:
    http://www.iotheatre.com/GoldenAgeAbilities.php
    As you can see, the filter in the 2nd tab works as intended, but there is nothing showing up at all in the first tab!  Any help would be greatly appreciated.
    -CB

  • Using fade/appear transition in spry tabbed panels

    I've implemented the fade/appear transition into a spry
    tabbed panel set up. The effect works in that when one clicks on a
    tab, the content in that panel will "appear" in using a opacity
    transition.
    The problem I am encountering is a pre-load of the content..
    almost a flicker at 100% opacity... and then the transition from 0%
    to 100% resumes. This flicker effect or visible pre-load of the
    content really takes away from the effect of the transition.
    Does anyone know how to solve this or correct my set up?
    I'm using the following...
    <li class="TabbedPanelsTab"
    onclick="MM_effectAppearFade('fade-guestrooms', 1000, 0, 100,
    false)" tabindex="0" onfocus="this.blur()">GUEST
    ROOMS</li>

    Yes this was a tough one to pull off in Spry. I have worked up a solution that fades between the panels. Please have a look at the following post:
    http://blog.infrontweb.com/ajax/spry/spry-tabbed-panel-fade-transition/
    Good Luck

Maybe you are looking for