2 Replies Latest reply on Sep 2, 2011 4:48 AM by BenPleysier

    SPRY TABBED PANNEL CONUNDRUM

    hblume

      I created a spry-tabbed panel in Dreamweaver 5 with a distinctive look.

      On another page I designed another spry-tabbed panel with its own distinctive look, its own color scheme, dimensions etc.

      On doing the second page I discovered I was also changing the color, boarders, dimensions, etc, on my first page whenever I designed the second page. 

      The question then, how do I create a spry-tabbed panel on 2 different pages within one web site and let each page have its own independent set of attributes.

      I tried creating a tabbedpanel2.css — did not bring in the spry panel css. 

      I eventually created the page in a test site and imported it back into the site in question.

      Looked great. Problem.

      When I uploaded to the server — no matter how great it looked in Dreamweaver — the page did not read. I got a blank page with an error message. 

      I called Adobe tech support.

      They told me it was an inherent problem with the spry tabbed panel, only reads one page of spry attributes per website,

      they had no fix for it and suggested I try Adobe Forum, maybe someone out there has a fix. 

      Any thoughts?

        • 1. Re: SPRY TABBED PANNEL CONUNDRUM
          John Waller Adobe Community Professional & MVP

          Be much easier to help you if you upload the pages and provide a link here.

           

          Then we can view the code and guide you as to what needs to change where.

           

          I called Adobe tech support.

          They told me it was an inherent problem with the spry tabbed panel, only reads one page of spry attributes per website,

          they had no fix for it and suggested I try Adobe Forum,

           

          If that's true as read above, that's disappointing.

           

          But then tech support is only there to assist with the products as designed and to point you to resources to get you through your issues with the functioning of the software. They're not really design consultants.

          • 2. Re: SPRY TABBED PANNEL CONUNDRUM
            BenPleysier Adobe Community Professional & MVP

            All you have to do is give each tabbedpanel a unique ID. In the following example I placed two tabbed panels on the one page.

             

            <!DOCTYPE html>
            <html>
            <head>
            <meta charset="utf-8">
            <title>Untitled Document</title>
            <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
            <style>
            #TabbedPanels2 .TabbedPanelsTab {
                 background-color: green;
                 color: white;
            }
            #TabbedPanels2 .TabbedPanelsTabHover {
                 background-color: red;
            }
            #TabbedPanels2 .TabbedPanelsTabSelected {
                 background-color: blue;
            }
            #TabbedPanels2 .TabbedPanelsContentGroup {
                 background-color: yellow;
            }
            </style>
            </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>
            <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 2.1</div>
               <div class="TabbedPanelsContent">Content 2.2</div>
             </div>
            </div>
            <script src="SpryAssets/SpryTabbedPanels.js"></script>
            <script>
            var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
            var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
            </script>
            </body>
            </html>
            

             

            Gramps