Link to specific accordian panel

Hi there,
I'm currently using the Spry Accordian feature (with 4 panels) on an internal page of a site I'm building. I have a requirement to place 4 links on the homepage that take me to this internal page and open specific panels, ie. one link would take you to the page with panel 3 open, while another would take you to the page with panel 4 open.
Any advice on how I can achieve this would be greatly appreciated.
Kind regards
Paul

Read: foundationphp.com/tutorials/spry_url_utils.php

Similar Messages

Linking to a specific SLIDING panel remotely

I'm trying to link to a specific SLIDING panel (not a tabbed
panel) from a remote link. I'm sure this can be done using
SpryURLUtils.js as I've successfully achieved the result with
tabbed panels. There's not as much online information on doing this
with sliding panels, though, and I've had no luck experimenting on
my own.
Can anyone help?
Here are two example pages of the pages in question:
http://www.studiohyperset.com/sandbox/aafd/impressionist.php
http://www.studiohyperset.com/sandbox/aafd/fullsizepgs/impressionist/stillLifeFlowers.htm
The user launches the second page from the first and should
be able to get back to the second sliding panel on the first page
by clicking "RETURN." Right now, when the user clicks "RETURN,"
s/he returns to the first slide in the sequence.
Thanks in advance for any help.

http://foundationphp.com/blog/2008/02/09/spry-tutorial-linking-to-a-non-default-panel/comm ent-page-1/
Comment 29: David Powers

Open Accordian Panel via anchor tag

I have about 20 accordian panels stuffed with content. Is it
possibe for a user to click a link on the same page and be carried
to the specific panel? -- having it open would be a bonus.
thanks for your time

I had a similar question. I'm trying to use named anchors on
one page in a site to to open specific panels on a different page,
but I'm not having much success. Depending on where I place the
anchor tags, I can get ALL of the panels with anchor tags to open
when the link is clicked. However, I can't seem to make a single
link open a single panel. My javascript skills are minimal -- I can
edit from examples, but I don't have the knowledge to write code
from scratch. Any help or advice is most appreciated.

Advice on linking to specific tabs in Accordion widget.

Hi everyone, I have followed David Power's tutorial on linking to specific tabs in an Accoridion widget.
I have got a test page working: http://fuelrecruitmenttest.co.uk/linktest.html which links to specific stories on my news page.
My problem is, I'm adding news stories in the accordion panel, so the newest story goes on the top.
Javascript counts the top panel as 0, the second panel as 1 etc etc.
So if I was to add a new panel, any previous links I have to the top panel would be to the wrong story.
My question is, Is there anyway of counting from the bottom panel up? Or any other workaround that people can think of eg: giving each panel a unique identifier so that the links remain the same even when new stories are added.
Thanks!

What is that?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"RedEyeBlind" <[email protected]> wrote in
message
news:gpcfeo$f31$[email protected]..
> Hello anybody.
>
> I've tried the following still nothing but first tab.
> ?tab=1#TabbedPanels1

Re: Spry Accordian Panels

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Need help with horizontal accordian panels

Hi,
I'm wondering how I would re-create a horizontal accordian panel set, such as the one used in this website link, "http://www.thecapriapts.com/".
When I insert a "spry accordian" panel set, the panels are stacked on top of each other. I guess you would consider that a "vertical" accordian. Is it possible to manipulate the CSS to have it display horizontally, like the link I attached? Or.. is this a common javascript that I sould look into?
As always, thanks for your help out there...
Chris

With spry, there are two different kinds you can use: horizontal and vertical. What you're looking at in that site is horizontal. Usually, it appears as rectangles placed next to each other with the spry flying out below. In DW, you can go to your CSS rules for your spry menu and change the width and height of your boxes in your spry, depending upon which rule you have selected. Play around with that and see if you can just manipulate the horizontal accordian spry to where the rectangles end up being tall and thin. This will make it difficult, however, to get the text on its side like you see in that site. I'm not sure how you would go about doing that. But I would suggest trying to play around with the values in your CSS styles panel on the right (this is me looking at CS5 mind you. I'm not sure what you're running.)
Either way, for times sake and also readability, might I respectfully suggest playing around with other sprys to see if any look more aesthetically pleasing for your site? It would also make it a lot simpler to tweak to your liking.

Link to Spry Tabbed Panels Tab?

Is it possible to link to a specific Spy Tabbed Panels tab from another page?
Thanks.

It is possible to link to a specific tabbed panel from another page, may I suggest you use the following link to visit a post in the spry forum were you will find all the steps needed to do this.
http://forums.adobe.com/thread/48312
Richard

Link to spry tab panels

HI there I'm new to this whole spry thing heck I'm even new
to posting; I'm trying to link to a spry tab from a flash button
and well it's just not working I can use the sample as written
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
and it will work to change tabs but I guess I'm not using it
right for the flash button I've tried to set the
onclick="TabbedPanels1.showPanel(0); return false;"
and that didn't work and I also tried going into the code and
adding
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width="132" height="31" a href="#"
onclick="TabbedPanels1.showPanel(0); return false;">
and that doesn't work either what am I doing wrong? sorry if
I posted in the wrong place. Thanks in advance for the help
labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm

It is possible to link to a specific tabbed panel from another page, may I suggest you use the following link to visit a post in the spry forum were you will find all the steps needed to do this.
http://forums.adobe.com/thread/48312
Richard

Having trouble trying to link to an accordion panel on the same page

Hello all,
I've been following instructions on
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#EnablingKey boardNavigation
to try to link to/open a specific panel in an accordion panel from a menu on the same page, but it's not working. Could somebody tell me what I'm doing wrong? My page-in-progress is:
http://fleap.com/YGRpage2011.html#
The menu on the right, under the word, "Details", is the one I'm trying to link to the accordion panel, and the panel itself is lower down the page.
thanks very much for any help you can give me!
Anna

1. Remove the constructor in the HEAD section of your document
var acc1 = new Spry.Widget.Accordion("SpryAccordion1", { useFixedPanelHeights: false });
2. Change the HTML markup to the following
<ul>
<li><a href="#" onclick="Accordion1.openPanel(0); return false;"> how <span class="title">You've Got Rhythm</span> works</a></li>
<li><a href="#" onclick="Accordion1.openPanel(1); return false;">sample pages</a></li>
<li><a href="#" onclick="Accordion1.openPanel(2); return false;">reviews</a></li>
<li><a href="#" onclick="Accordion1.openPanel(3); return false;">syllabus</a></li>
<li>copying license</li>
<li>about the authors</li>
<li>tips</li>
<li>cd tracks</li>
</ul>
Gramps

Accordian Panel content size

Hi,
I am using Accordian Panel in several pages. When I go to CSS styles paneland and change Accordion Panel content size/height to 600 for example, it changes all the Accordian panels throughout my site to 600.
Is there a simple way of changing each panel individually.Am I missing something very obvious. I am learning CSS but not quite there yet. Any help would be appreciated.
Michael

To start with, especially when you are a novice at CSS, do not alter the original Spry Style Sheets. You will thank me for this tip once you get into more complicated web sites.
To have variable panel heights use the following constructor
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });
</script>
If you want fixed heights per accordion then you have numerous options of which I will show one. Apply a unique ID to your accordion and style accordingly has follows.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<style>
#Accordion600 .AccordionPanelContent {
    height: 600px;
</style>
</head>
<body>
<div id="Accordion600" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion600");
</script>
</body>
</html>

Show Active Link with Spry Sliding Panels

Hi,
Whilst googling to a solution to my problem I came accross this sample:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanels_withTabs.html
Is there anyway that simple HTML links that can be used instead of tabs? I have a navigation menu that contains links which link to specific panels using the ShowPanel() function, but once a panel is selected via one of these links, I want that link to become 'active' and display in a different colour.
So far I have this:
<a href="#" class="active" onclick="sp1.showPanel('p1'); return false;">Home</a><br />
<a href="#" onclick="sp1.showPanel('p2'); return false;">Latest News</a><br />
<a href="#" onclick="sp1.showPanel('p3'); return false;">FAQ's </a></div>
The 'active' class represents the link that is currently active, but I don't know how to dynamically switch the active link when another panel is selected.
Does anybody know how this could be achieved?
Thanks

Did you check out the source code for that those panels?
http://labs.adobe.com/technologies/spry/samples/slidingpanels/sp_withTabs.js
Als you see, they use a separate function to set active classes to the tabs. You can use the same functionality for your active link class.

Print from open accordian panel only

Hi all,
I'm hoping I have put this in the right section. Apologies if I haven't. I am trying to use accordian panels and what I want is to be able to print from the open panel only. I want to have a link in the panel saying "print this...." and only have it print that panel and not the closed ones. It's probably something realy simple that I am missing. Any help would be greatly appreciated.
Thanks

If you set a default CSS rule that prevents printing when the page is opened.
Using the link "print this" use the Spry Element Selector to change the CSS rule to enable printing of the section that you want, print the section and disable printing of the section.
For CSS have a look here http://www.alistapart.com/articles/goingtoprint/ or Google the subject
For Spry Element Selector see here http://labs.adobe.com/technologies/spry/articles/data_api/apis/element_selector.html or Google the subject
To print have a look here http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print-a-Web-Page-Using-Ja vaScript.htm or Google the subject
Gramps

Select Accordian Panel via $_GET

Is it possible to select which panel is open on a page
through a url $_GET?
For example, if you have a regular non spry webpage or email
that you want to link to a specific open panel on a spry webpage,
how can that be achieved.
i.e.
<a href="
http://www.domain.com/test.php?panel=3
>open panel four</a>
I have seen the posts for openPanel and have not been able to
get them to work at all.
Any suggestions?
thanks,
elaine

When the page loads you could just get the panel from the
query string and send it as the default when you create the
accordion. The code looks like:
var defaultPanelParam = getQueryVariable('panel');
var sampleAccordion = new
Spry.Widget.Accordion("sampleAccordion", {defaultPanel:
defaultPanelParam});
The first implementation I found for getQueryVariable is
http://www.activsoftware.com/code_samples/code.cfm/CodeID/59/JavaScript/Get_Query_String_v ariables_in_JavaScript
There's other ones out there you could use too if you don't
already have code to do that.
Chris

Problems editing accordian panels

Hi,
Have an issue where InContext editing was capable last month of editing a page with Spry accordian panels, but recently weno longer can edit the panels.
The subject page is
http://www.peradance.com/Atlanta-Dance-Classes-Calendar.html
which is a dance class calendar.
Each class is defined as a repeating region consisting of a title and a description, both within a Spry accordian panel which when click expands the accordian detail window to show the description.
I set this up for the client weeks ago and to my surprise it worked OK with InContext editing. However, now we find it is difficult to edit the text in the title windows -- perhaps some recent update to InContext editing has broken this ability.
We can add or duplicate a repeating region to add a new class, but when we try to click inside the Title box for that class we can't seem to insert a cursor anymore to change the text -- InContext editing now seems confused and wants to expand/contract the description panel, rather than let us insert a cursor to edit the title. We can insert the cursor in the description and edit it OK.
This fails using Windows Firefox, IE8 and IE7 so trying another browser doesn't help.
I tried to talk the client into a simpler calendar without the Spry expanding accordian (just have the class title and description always exposed) but he would rather abandon Adobe's software than give up that functionality. What he really wanted rather than the accordian was for the class description to appear in a popup window when the cursor hovers any title, but I discovered there is no way to use Spry tips or any javascript popup in a way that the client can edit with InContext editing. I was surprised to find the Accordian panel did work fine. Why it has now stopped working is a mystery.
The code for a day on the calendar looks like this:
<div class="day">
<p class="title">Monday</p>
<div id="Accordion2" class="Accordion" tabindex="0" ice:repeatinggroup="*">
      <div class="AccordionPanel AccordionPanelOpen" ice:repeating="true">
        <div class="AccordionPanelTab" ice:editable="*">
            <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">7:00 PM BELLY DANCE BASICS & FITNESS</span></span></p>
        </div>
         <div style="height: auto; display: block;" class="AccordionPanelContent" ice:editable="*">
         Learn the fundamentals of the art of belly dance from multi award winning instructor Aziza Nawal. In this class, you will learn the basics of middle eastern dance, improve your tecniques, all while you get a nice workout and toning your body
         </div>
      </div>
<div class="AccordionPanel AccordionPanelClosed" ice:repeating="true">
    <div class="AccordionPanelTab" ice:editable="*">
        <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">8:00 PM  FOCUS on CLOSE EMBRACE TANGO</span></span></p>
     </div>
     <div style="height: 0px; display: none;" class="AccordionPanelContent" ice:editable="*">
In our Monday classes, we focus on concepts dealing with the technique of close embrace tango while always keeping a sharp focus on musicality and navigation. The moves that we teach in this class will be simple, musical and elegant. We will focus on different tango orchestras as well as vals and milonga and give you specific tools and moves to interpret these in an interesting and satisfying way. We will try to always spend time focusing on the followers role in the dance.</div>
   </div>
</div>
</div>

The Accordion keyboard navigation feature (the ability to change the open panel using the keyboard keys ) is preventing InContext Editing to properly edit the contents of the editable region.
You can disable to keyboard navigation feature of an Accordion by setting it to false in the constructor:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:false});
Note: to disable keyboard navigation when the page is loaded inside InContext Editing use:
var useKeyboard = typeof(top.ice) == "undefined";
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:useKeyboard });
This will make the editable regions editable only in Internet Explorer.
There's a CSS rule used by the Accordion widget to disable text selection on the panel titles in Firefox and Safari:search .AccordionPanelTab in the SpryAccordion.css file and remove:
    -moz-user-select: none;
    -khtml-user-select: none;
See the InContext Editing known issues and limitations, the Editing section, from Adobe Labs InContext Editing page.
Regards,
Dan Popa

Is Acrobat Pro right for us. We have an Employee Handbook that needs editing. Some is current pdf, some from an older version. Want to get all into one handbook, have the table of contents automatically adjust and link to specific pages from the ToC.

Is Acrobat Pro right for us. We have an Employee Handbook that needs editing. Some is current pdf, some from an older version. Want to get all into one handbook, have the table of contents automatically adjust and link to specific pages from the ToC.

You can download the trial version (http://helpx.adobe.com/acrobat/kb/acrobat-downloads.html) to convert the PDF back to WORD if you do not have the original. The conversion may not be perfect, but it is typically better than starting from scratch. You may be lucky and get a good result. You might check the settings (in the save screen) to try retain format versus retain text flow. The format version can be a pain to edit since it creates a bunch of text boxes. The flow version may require you to reformat in WORD, but you likely would want to do that anyway.

Link to specific accordian panel

Similar Messages

Maybe you are looking for