Skip navigation

Dreamweaver

schnarku Calculating status...

Currently Being Moderated

link to panel of a nested spry accordion

Jun 16, 2012 12:01 PM

Tags: #spry_accordion #spryurlutils.js

Hi,

I would appreciate your help with this problem:

I am building a structure with a spry tabbed panel and nested accordions: http://www.ikf.ac.at/neu/projekte_direktlinks.html

Now, I want to link to specific (sub)panels in the structure. I know that this is usually done using spryurlutils.js, which allows you to link to a specific panel by adding a query string and fragment identifier to the url. For instance I would add ?tab=1 to get to the second tabbed panel or ?tab=1&panel=2 to get to the second tabbed panel and the third accordion panel - or, so I thought...

Here's the problem: Since I cannot distinguish between "parent panels" and "nested panels" in the URL the wrong (nested) panels are opened. Linking to http://www.ikf.ac.at/neu/projekte_direktlinks.html?tab=1&panel=2 does open the correct parent panel (#3) but, additionally, opens a subpanel (#3), which I do not want to be opened. Is there a way to distinguish between panels and nested panels in the URL?

I'd be very grateful for any help. Please keep it simple, as I'm not an expert

Best

Lukas

986 Views 8 Replies Latest reply: Ben Pleysier, Jul 5, 2012 6:24 PM

Replies

Currently Being Moderated

1. Ken Binney,

Jun 16, 2012 12:27 PM in reply to schnarku

Report

http://foundationphp.com/tutorials/spry_url_utils.php

|
Mark as:
Currently Being Moderated

2. schnarku,

Jun 16, 2012 12:30 PM in reply to Ken Binney

Report

thanks, i had already consulted this tutorial but don't see how it answers my question? best, lukas

|
Mark as:
Currently Being Moderated

3. Nancy O.,

Jun 16, 2012 1:11 PM in reply to schnarku

Report

For this to work, I think you need to give each of your panels a unique ID.

.tab1
     #panel1
     #panel2
     #panel3
     #panel4
.tab2
     #panel5
     #panel6
     #panel7
.tab3
     #panel8
     #panel9
     #panel10
etc...

Nancy O.

|
Mark as:
Currently Being Moderated

4. schnarku,

Jun 16, 2012 2:17 PM in reply to Nancy O.

Report

that's an interesting idea. but how would you refer to these IDs in the URL? normal anchors do not work with spry elements.

|
Mark as:
Currently Being Moderated

5. schnarku,

Jun 17, 2012 6:31 AM in reply to schnarku

Report

I have found this advanced tutorial which offers some useful advice on the issue:
G O I N G B E Y O N D T H E B A S I C S W I T H S P R Y A N D A J A X
http://faculty.scf.edu/winterf/0ClassFolders/2820Web/eBook-Springer/Dr eamweaverCS4/Powers08SpryAndAjax.pdf

unfortunately, the proposed solution does not work for me

|
Mark as:

Currently Being Moderated

6. Ben Pleysier,

Jun 17, 2012 9:19 AM in reply to schnarku

Report

Please have a look at the following

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<link href="SpryAssets/SpryAccordion.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="Accordion1" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">TabbedLabel 1.1</div>
          <div class="AccordionPanelContent">
              <div id="Accordion11" class="Accordion" tabindex="0">
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Label 1.1.1</div>
                  <div class="AccordionPanelContent">Content 1.1.1</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Label 1.1.2</div>
                  <div class="AccordionPanelContent">Content 1.1.2</div>
                </div>
              </div>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">TabbedLabel 1.2</div>
          <div class="AccordionPanelContent">
              <div id="Accordion12" class="Accordion" tabindex="0">
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Label 1.2.1</div>
                  <div class="AccordionPanelContent">Content 1.2.1</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Label 1.2.2</div>
                  <div class="AccordionPanelContent">Content 1.2.2</div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
      <div id="Accordion2" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">TabbedLabel 2.1</div>
          <div class="AccordionPanelContent">
              <div id="Accordion21" class="Accordion" tabindex="0">
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Label 2.1.1</div>
                  <div class="AccordionPanelContent">Content 2.1.1</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Label 2.1.2</div>
                  <div class="AccordionPanelContent">Content 2.1.2</div>
                </div>
              </div>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">TabbedLabel 2.2</div>
          <div class="AccordionPanelContent">
              <div id="Accordion22" class="Accordion" tabindex="0">
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Label 2.2.1</div>
                  <div class="AccordionPanelContent">Content 2.2.1</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Label 2.2.2</div>
                  <div class="AccordionPanelContent">Content 2.2.2</div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryAccordion.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 Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: params.panel ? params.panel: 0 });
var Accordion11 = new Spry.Widget.Accordion("Accordion11", { useFixedPanelHeights: false, defaultPanel: params.subpanel ? params.subpanel: 0 });
var Accordion12 = new Spry.Widget.Accordion("Accordion12", { useFixedPanelHeights: false, defaultPanel: params.subpanel ? params.subpanel: 0 });
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false, defaultPanel: params.panel ? params.panel: 0 });
var Accordion21 = new Spry.Widget.Accordion("Accordion21", { useFixedPanelHeights: false, defaultPanel: params.subpanel ? params.subpanel: 0 });
var Accordion22 = new Spry.Widget.Accordion("Accordion22", { useFixedPanelHeights: false, defaultPanel: params.subpanel ? params.subpanel: 0 });
</script>
</body>
</html>

Gramps

Less than 3 hours to go

Hup Holland!

|

Mark as:

Currently Being Moderated

7. schnarku,

Jul 5, 2012 11:16 AM in reply to Ben Pleysier

Report

Gramps, thanks a lot for your reply!
I am not 100% shure what to make of it, though.

Your code shows a simplified version of my accordion structure. What I need to know is how to link to a particular (sub)panel of the structure from a different page. I have learnt that this should be possible using the unique IDs. However, I can't figure out how to get this to work. How do I link e. g. to the Accordion21 of your code from a different page using IDs? I would really love to see a piece of working code showing this.

Again, many thanks

|
Mark as:
Currently Being Moderated

8. Ben Pleysier,

Jul 5, 2012 6:24 PM in reply to schnarku

Report

Copy and paste the code that I supplied above into a new document called junk.html and view it in your favourite browser. The default is tabbedpanels tab=0, master accordion panel=0 and sub accordion panel =0.

To open the second tab, first master panel second subpanel our url would look like
junk.html?tab=1&panel=0&subpanel=1
This will show you content 2.1.2 (second tab, first master panel, second subpanel)

Gramps

|
Mark as:

Forum guidelines

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