Skip navigation
Randi49
Currently Being Moderated

How go to Tabbed Panel within Tabbed Panel

Dec 19, 2012 2:00 PM

Tags: #link #spry #tabbed #panels

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.

 
Replies
  • Currently Being Moderated
    Dec 19, 2012 2:19 PM   in reply to Randi49
     
    |
    Mark as:
  • Currently Being Moderated
    Dec 21, 2012 2:15 PM   in reply to Randi49

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

    What is the ID of your target panel?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 7:06 PM   in reply to Randi49

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 6:36 AM   in reply to Randi49

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points