9 Replies Latest reply: Jan 23, 2013 12:25 PM by Randi49 RSS

    How go to Tabbed Panel within Tabbed Panel

    Randi49

      Dreamweaver Experts,

       

      Can someone help me figure out Spry tabs?

      How do you go to a specific tab within a tab?
      Go to a tabbed panel within a tabbed panel.
      From a different page?

       

      The website of my small non-profit is:
      http://edenir.org

      What I want to do is:
      Bottom right, I have a link:
      Hurricane Sandy Photos.
      I want this link to go to the correct photos.
      It's a tabbed panel within a tabbed panel
      I've figured out part of it:
              <a href="../AboutUs.html?tab=4#TabbedPanels1">


      Target page is:
      http://edenir.org.AboutUs.html
      On that page, I have Spry tabs. The fifth one is Photos.
      I want to click on a link on the home page and it will take the user to the Photos tab on this page.

      Then open the 2nd Panel in the photos panel.
      It currently goes to the right place on the page, but does not open the Photos tab.

       

      I have:
      <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
      <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript">
      var params = Spry.Utils.getLocationParamsAsObject();
      </script>

       

      I'm  using Dreamweaver 9. Thanks for any help you can give me.

        • 2. Re: How go to Tabbed Panel within Tabbed Panel
          Randi49 Community Member

          John,

           

          Thank you. That's a good tutorial. I got this far, using it.

          But it doesn't have; how to go to a tabbed panel within a tabbed panel.

           

          and I can't figure out the correct syntax to do it.

           

          thanks,

          • 3. Re: How go to Tabbed Panel within Tabbed Panel
            Randi49 Community Member

            Can anyone  help me figure out the correct link to go to a specific tabbed panel on a page with tabbed panels.

             

            The link probably should look something like this, but with more:

            <a href="../AboutUs.html?tab=4#TabbedPanels1">

             

            thank you

            • 4. Re: How go to Tabbed Panel within Tabbed Panel
              Nancy O. CommunityMVP

              What is the ID of your second set of tabbed panels?

              What is the ID of your target panel?

               

               

              Nancy O.

              • 5. Re: How go to Tabbed Panel within Tabbed Panel
                Randi49 Community Member

                The ID of the 2nd one is: TabbedPanels2

                The target is the 2nd one, so tab=1

                I believe...

                 

                    <div id="TabbedPanels2" class="TabbedPanels">

                 

                Thank you

                • 6. Re: How go to Tabbed Panel within Tabbed Panel
                  Randi49 Community Member

                  Hi Nancy or other expert,,

                   

                  Can anyone help me figure out the correct link to go to a specific tabbed panel on a page with tabbed panels? I can't figure it out, and everything I can find online is for a collapsing panel within a tabbed panel, or something different.

                   

                  thank you

                  • 7. Re: How go to Tabbed Panel within Tabbed Panel
                    Ben Pleysier CommunityMVP

                    Cop and paste the following into a new document called junk.html or similar

                     

                    <!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.tab ? params.tab : 0});
                    var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2", {defaultTab: params.subtab ? params.subtab : 0});
                    var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3", {defaultTab: params.subtab ? params.subtab : 0});
                    </script>
                    </body>
                    </html>
                    

                     

                    Then view the document in a browser.

                     

                    Once in the browser add the following highlighted to the end of the URL in the address bar of the browser

                    http://localhost/junk.html?tab=0&subtab=1

                    This will show the  first main tab (0) and the second sub tab (1).

                     

                    Play with the numbers to open other tabs.

                    • 8. Re: How go to Tabbed Panel within Tabbed Panel
                      cdeatherage Community Member

                      I used Spry Tabbed Panels on my site and added this script to the head:

                       

                      <script type="text/javascript">

                        function ScrollUp (alignToTop) {

                                  var Panel = document.getElementById ("TabbedPanels1");

                                  Panel.scrollIntoView (alignToTop);

                        }

                      </script>

                       

                      Then, at the end of each tabbed panel content, I have the following code:

                       

                      <span class="nextTab" ><a onclick="ScrollUp(true); TabbedPanels1.showPanel('Tab2')" >Next: Retouching</a></span>

                       

                      [The CSS tag is just text styling and not relevant to your question.]

                       

                      Chris

                      • 9. Re: How go to Tabbed Panel within Tabbed Panel
                        Randi49 Community Member

                        Thank you for that info. That worked, although I also added an anchor reference.

                        The final line that worked was:

                        <a href="../aboutUs.html?tab=4&tab2=1#Sandy">

                         

                        thank you very much for providing that important line,

                        to let me go to a tab within a tab.

                        Gracias,