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

Similar Messages

Link to specific tab on another page but don't anchor

Hello, I used this tutorial to link to a specific tab on another page:
http://foundationphp.com/tutorials/spry_url_utils.php
It works great, except I don't want to go directly to the tabbed panel. I want the particular tab to be active, but the page should load as it normally does. So the user should always be at the top of the page when it loads.
This is the link code:
<a href="registration.html?tab=1#form">
As you can see, #form identifies the tabbed panel, but it also directs the link where to go. I only want to use it as an identifier, not as a navigator as well.
Thank you.

FShea31 wrote:
Hello, I used this tutorial to link to a specific tab on another page:
http://foundationphp.com/tutorials/spry_url_utils.php
It works great, except I don't want to go directly to the tabbed panel. I want the particular tab to be active, but the page should load as it normally does. So the user should always be at the top of the page when it loads.
This is the link code:
<a href="registration.html?tab=1#form">
As you can see, #form identifies the tabbed panel, but it also directs the link where to go. I only want to use it as an identifier, not as a navigator as well.
Thank you.
Remove the hash part of the URL parameter and just open the tab in the constructor
<a href="registration.html?tab=1">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",
{defaultTab: params.tab ? params.tab : 0});
I hope this helps.
Ben

Linking to specific tab on different page

Hey everyone, I want to link to a tabbed panel on one of my
pages using the navigation menu on the home page. The problem is
that I keep getting sent to the default tab on the new page instead
of the tab I want to open. This is my code, can anyone help:
<li><a href="wriaboutus.html"
onclick="TabbedPanels1.showPanel(1)">Mandate</a></li>

anyone?

Tabbed and accordion widgets not working after latest export.

The accordion widget was working on the sites I built, but now when I export the sites after changes, the accordion and tabbed panels don't work.
The link below shows the old accordion and the new one I was placed from Muse.
http://www.thresholddrain.co.nz/newsite/faqs.html
I don't have time to redo every accordion and tab on the site. Any ideas why it is not working and what I can do to fix it.
Thank you,
Ana

rodyaj wrote:
I'll check that error message out when I get home, but for now, you could try adding this to your .xinitrc instead:
setxkbmap -option caps:escape
This helped. Thanks!
rodyaj wrote:
Or maybe try setting by keycode rather than keysym in .Xmodmap. e.g.,
clear Lock
keycode 0x42 = Escape
(I think you'll need to use xev to find out what keycode your escape key is though.)
This one didn't work though. I tried removing the clear Lock line, and I don't get any errors. But then it doesn't work properly.

Linking to specific slides in slideshow widget.

Is it possible to link to a specific slide in a slideshow from elsewhere on the site? Thanks

Hi
Unfortunately that is not possible, you can link to pages, images, or type of files, but not to a specific slide in a slideshow.

Link to specific accordion tab from other page

Hi all, were working on a site that has recipes page.
there are few recipes and they are all within an accordion widget.
when you click on the title ie: Apple pie the tab opens and shows the info.
My question is : Is it possible to link to that specific accordion tab on the recipes page?
For example: on the apple page there is a link to the apple pie recipe (which is inside an accordion)
is that possible?
yd.

i meant.
if you have a page. and on that page there is an accordion with multiple tab (or panel or whatever they are called)
i would need to make link on another page that link straight to a specific opened tab in the accordion. like an anchor link on another page, but
have the accordion panel open instead.
understand
sorry for the lousy english.
yd.

Open specific tab in an accordion

I have an accordion with 5 tabs. I want to open a specific
tab depending on which link is clicked on the first tab.
I have the following, which opens tab 2:
<a
href="javascript:acc1.openNextPanel();">{@atitle}</a>
and I could use openLastPanel() for tab 5, but how do I open
tabs 3 and 4?
I have found a query from Auroras giving a function to do
this, but I would have expected this to be an inbuilt solution -
has it been incorporated into 1.5?
Regards
John

To answer my own question (partly...), I have added the
following into my SpryAccordion.js file:
quote:
JBB 13/4/07
Spry.Widget.Accordion.prototype.openPanelNumber =
function(numbr)
var indx = numbr - 1 // panel index starts at 0
var panels = this.getPanels();
var curPanelIndex = this.getCurrentPanelIndex();
if( panels && curPanelIndex != indx && indx
< panels.length && indx >= 0 )
this.openPanel(panels[indx]);
-------------------------------------------------------------- END
Call this from anywhere you like (eg <a
href="javascript:acc1.openPanelNumber('2');">{@atitle}</a>).
The number is 'natural' rather than 'logical' - ie the first tab is
number 1, the second is 2, etc. Quote marks are optional
(javascript will just cast the string into an integer) and invalid
values are ignored.
Regards
John

How do i link to a specific tab using the spry tabbed widget

Hello i'm working on a microsite using the spry tabbed widget. I'm having trouble figuring out how to link to a specific tab using a an external link.
here is the site. http://www.efaxcorporate.co.uk
for example: if i wanted to give a user a url link specifically tab#2.
Im sure this is really easy i just can't seem to figure it out.

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

Linking to a specific tab in a spry tabbed in Dreamweaver

Hi,
I used the following link in order to open specific tab from another page.
http://foundationphp.com/tutorials/spry_url_utils.php
Everything works fine in chrome but IE shows all of the tabbed info in one continuous list. Tried to fix it by using the suggested solutions in the below link, didn't work for me.
https://forums.adobe.com/thread/826225
Could you please help me out on this issue? Your help is very much appreciated.
Thanks,

Spry was abandoned by Adobe in late 2012. Spry didn't keep up with the mobile web and modern browsers. You'll get better results with jQuery Tabbed Panels.
Tabs | jQuery UI
Nancy O.

IE9 problem linking to a specific tab

I have been happy with my website for almost a year now after asking a few questions relating to Tabbed panels and having my problems solved here.
But I've realised there is a problem that didin't exist before!
I have a Horizontal menu bar at the top of some of my pages and there are links that go to different pages with a tabbed panel with a specific tab opened.
However, when I click on these links, the pages open with the specific tabs opened, BUT the Horizontal menu bar which should be at the top disappears.
The banners at the top left corner disappears too and the whole tab panel is displayed at the top.(so the Tabbed panels are kind of pushing the content at the top out of the screen) When I check the html in Dreamweaver, in Live view, and try to use the link in the menu bar, it shows the same, the Tabbed panel at the top of the page with the specific tab opened. But it shows that it can be scrolled up and when I do, it shows the banners and the Horizontal menu bar.
This hasn't been happening before when I've made the website last year. I'm thinking that it's something to do with IE9 because I was using IE8 when I've made the website and Safari seems to work the same as before. Does anyone know what I could do?
My website is http://minussun.co.uk/home.html
If you could try jumping to "The Concept", "Her Record" or "Her Life" in the About menu or "Her" or "Stockists" in the Contact menu at the top (basically, the links which are aiming at specific tabs) you will see what I'm writing about...

Hello, thank you for checking out.
I'm using windows vista 32bit and never thought that the os matters as well.
It's good to know that it works in the up to date os/browser environment.

Linking to specific spry tabbed panel - code not working

Hi,
I have followed the tutorial at
http://foundationphp.com/tutorials/spry_url_utils.php
with regard to being able to link to a specific tab. For some
reason though, my code doesn't work. I am usign Dreamweaver cs3,
and as soon as I head back to the design view, or preview it in a
browser for that matter, all I see is each tab one above the other,
and the tabs no longer work.
My code is as follows:
<script src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params =
Spry.Utils.getLocationParamsAsObject(); </script>
is in the head, and the body for the tabbed panels is:
<div id="mainContent">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">1st
Team</li>
<li class="TabbedPanelsTab" tabindex="0">2nd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">3rd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">4th
Team</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3 style5">Player
name</div>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic" /></p>

<p align="center" class="style3 style6 style4">Click a
player name to view their profile. </p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3"><span
class="style5">Player name</span></div>
<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic2" /></p>

<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>
</td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto2" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<p align="center" class="style3 style6 style4">Player
name</p>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic3" /></p>

<p align="center" class="style3 style6 style4">Click a
player name to view their profile.</p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto3" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3 style4
style6">Player name</div>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic4" /></p>

<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto4" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
</div>
</div>
</div>
<p> </p>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.tab ?
params.tab : 0)});
The link I would then use to link to tab 2 say, would be:
../"pagename".php?tab=2#TabbedPanels2
Also, when I then go to click on the Spry tabbed panels
region in design view, I get an error message saying:
while executing inspectSelection in spry_tabbedpanels.htm, a
javascript error occurred.
I am pretty inexperienced with Spry and Java so I may have
missed something simple.
A solution would be much appreciated as this is driving me
mad!
Please let me know if you need me to post more code.
Thanks in advance.
p.s. I am using Dreamweaver CS3 and the SpryURLUtils.js
script is from the Spry 1.6.1 prerelease framework.

quote:
Originally posted by:
brownie_jedi
Ok, so I've just changed the code to <script
type="text/javascript"
src="../SpryAssets/SpryURLUtils.js"></script>
to mimic the code for <script
src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
since the spry files are all in the same folder. Is this what
you meant?
Having just installed firebug, I get the error params is not
defined. So I guess that this all together means that the
SpryURLUtils.js file is not being called correctly?
p.s. Thanks for the speedy replies, much appreciated.
Yes it means it cant find the file SpryURLUtils.js.
in firebug theres a tab called scripts, if u click on it, u
can see wich scripts are loaded. i suggest u check that out. Or
post a online URL so we can see the problem for our selfs..

Pemanent link to specific spry tab

Hi,
I have a webpage that containd dynamically loaded spry tabs.
I need to creat a permanent link to a specific tab on that page
from my server for a different domain. What I have been tryiong to
do is write a normal link to use for this, something like:
http://
www.XXX.com?TabbedPanels1.showPanel(13);getPage('FrameSiten', '
http://XXX.com/directory/index.php'
but of course that will not work...
The tab is setup like this :
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="9"
onClick="getPage('FrameSiten', '
http://XXX.com/directory/index.php')">Directory</li>
Can anyone please help me with this as I have now searched
hundreds of pages on the web and found nothing that I can make
sence of...
Thanks

Add something like this under your tabbed panels constructor;
if(params.panel){
switch(params.panel){
case 1: getPage('FrameSiten', 'directoryindex.php');
break;
case 2: getPage('FrameSiten', 'whatever.php');
break;
case 3: getPage('FrameSiten', 'whatever.php');
break;
case 4: getPage('FrameSiten', 'whatever.php');
break;
case 5: getPage('FrameSiten', 'whatever.php');
break;
case 6: getPage('FrameSiten', 'whatever.php');
break;
default: null;
break;
(change the getPage to the event that matches the tab
number)

Panel Tab as Link only (no content) in Accordian Widget?

Is there a way for panel tabs that have no content to
a) Close any other open panels when clicked
b) Act as link of their own (they will navigate to separate html page rather than open accordian panel) and
c) show active state when clicked
I would be wanted 'Label 2' of the follwing panel to be a link to an external page, whereupon i will set that panel tab to be default active when they land there.
<div id="Accordion1" 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>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 3</div>
    <div class="AccordionPanelContent">Content 3</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 4</div>
    <div class="AccordionPanelContent">Content 4</div>
</div>
</div>
Hope i've made sense....
Thanks in advance of anyone's help/advice (I ammeanwhile scouring the forums on the web).
ccesca

Why not?
Be sure you have not set a height for the panel content, or you will end up with a normal tab with a blank content panel falling below it.
I've never tried creating an accordion that had a tab completely without a content area, but that might work.
So, put a link on your tab text and see if it functions the way you want.
Regarding the Show active state when clicked, examine the accordion CSS file and fiddle around with things to change. It is likely that it is already set up to do that.
Beth

Using links in Spry tabs

I am using the spry accordion widget to allow an author to
have a table of contents with the tab containing the name of the
article and a link to the article page, and the accordion content
area is an abstract of the article. The problem is that the link
(in the tab) simply does not work in Internet Explorer. It works
fine on mozilla based browsers and safari, you click on the link
and go to that page successfully, but it refuses to work on
Internet Explorer - clicking the link does nothing. I tried this on
collapsable panels and found the same problem. If I place the link
in the content area, the link works fine, but it will not work when
the link is in the tab in Internet Explorer. Other interesting
information: if I disable ONLY the spry javascript the links work
fine, and if I disable ONLY the spry css the links work as well.
Has anyone found a workaround to this problem?

Hi,
No. We do not have a way to achieve this as of now.
Regards,
Mukul

Accessing a specific tab and/or region via an URL ?

Is there a way to change the tab of a page using an URL ?
I have the same question concerning the regions of a page (if so it would be working like a frameset) ?My situtation: I have a HTML Portlet containing a custom Menu using Javascript, and I want the links to point a specific tab or a region of my page. => I guess I could use the 'changetabs' and 'regionid' parameters next to the 'pageid' in the URL.
Any kind of hints appreciated !

Hi,
A portal page cannot work as a frame. Each region is a html table and a portlet in it is also a table. They are nested.
Tabs are links. You can copy the url of the tab by right clicking the tab and paste it as the menu link.
You cannot copy a region because it is not a frame it is a html table.
Hope this helps :-)
Thanks,
Sharmila

Advice on linking to specific tabs in Accordion widget.

Similar Messages

Maybe you are looking for