I need two tabbed panels on a page

I have the tabbed panels widget working great but would like
to have multiple panels on my page and it seems that will be hard
to do given that the Java is called by a div id tag. Any one have
any suggestions about how to make this work?
Thanks,
-TW

copy paste the tabbed panel. Change the ID to a new unique
ID.
Than copy paste the constructors, change the var name to a
new unique var name, and change the target id inside the
constructor to your new unique ID.
sample page with multiple tabbed panels;
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm

Similar Messages

After Downloading v8 I keep getting checking compatibilty dialogue box popping up, then Firfox opens two tabs, Meet Mozilla welcome page and my home page. How can I stop this?

After Downloading v8 I keep getting checking compatibilty dialogue box popping up when I launch Firefox. Then Firfox opens two tabs, Meet Mozilla welcome page and my home page. How can I stop this?

That is a legitimate Mozilla newsletter. As it says in the email:
You're receiving this email because you subscribed to receive email newsletters and information from Mozilla. If you do not wish to receive these newsletters, please click the Unsubscribe link below.
Unsubscribe https://www.mozilla.org/en-US/newsletter/existing/ad9febcf-65ac-41fd-810b-798945f448f3/
Modify your preferences https://www.mozilla.org/en-US/newsletter/existing/ad9febcf-65ac-41fd-810b-798945f448f3/ "

Need help linking spry tabbed panel from external page

Could use some help. I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck. When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable. This is a key feature I need in a new site being developed.

I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck.
Have you tried http://foundationphp.com/tutorials/spry_url_utils.php ?
When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable.
Depending on what the code looks like, it can do all sorts of things.
Please be reminded that the best way for us to help you is by you supplying a link to your site with a one sentence description of the problem.
Gramps

Two tabs for the same page

Hello,
I have been spending the whole morning trying to find a solution for this problem but did not find any either by myself or parsing the forum messages.
I am building an application with a two level tab for the navigation.
Everything is fine as long as the pages referenced by the tabs have a different number.
My problem is that i use the same dynamic page (let say 40) to be accessed through two different tabs.
e.g Parent tab is labelled "Parent"
Two other tabs are created linked to parent tab "Parent" and those are labelled "Action1" and Action2"
Selecting "Action1" will result in rendering the page 40 with a parameter (let say page_type) set to the value 1.
Selecting "Action2" will result in rendering the *same* page 40 with a parameter (let say page_type) set to the value 2.
For the parent tab "Parent" let say that the default is to select "Action1"
Is there any solution to implement that kind of behaviour?
I have tried to create redirecting pages (empty page and a single branch) to achieve this but i always get stucked when trying to have page 40 displaying the proper tabs and parent tab.
Thanks in advance for any help.
Daniel

Hi Andy,
Thanks for your answer!
Whilst it is fairly straightforward to create multiple tabs for the same page (this can be done through Shared Components, Tabs and click Add on the standard >>tabs bar, enter in any page number you like), the functionality of tabs does not provide the means to set item values. Additionally, as both tabs would be >>"current" for your page 40, once you've clicked on one, you can not click on the other.Yes this is exactly what i discover once my page 40 has been built.
There may be ways to do what you need, but as tabs are really there for navigation purposes only, this may become rather complicated. What is the difference >>between Action1 and Action2? Can this be achieved in another way? Have you considered switching to lists for navigation (where you can set item values)?In fact, i can still duplicate this page and have a few changes within each new page. But as a matter of code design as both pages have around half in common, i wanted to share most of the items (build a single page) and then play for a few additional items with conditions encompassing the page type i have set before rendering the page.=> Most items in common, a few others whose display is conditionnal. For the end user, it looks like two different pages because in their business process the "Action1" and "Action2" are clearly different.
I use lists in this application on the home page to reach most of the application pages but while some users prefer to use the links on the home page and go back to home page, other would like to use the tabs and a number of them use both navigation mechanisms.
Sorry if it is not quite clear (english is not my mother tongue).
Regards,
Daniel

Problem: Two Tab Sets for one page

Hello everyone. I have two tab sets and each tab set has one common tab, for example an "About" tab that redirects the user to page 25 when clicked. The tab set works perfectly for the first tab set but when I'm in the second tab set and I click "About" the other tabs change to the first tab set.
Does anyone know how to solve this problem without having to create multiple "About" pages?

Hi Nithya,
My requirement is to have two main windows in the same page. For each line item it is triggering a new page. In the first page both the windows are displayed as expected but in the second page only the first main window (MAIN00) is getting triggered and the second main window (MAIN01) is not triggered.
Output got :
page1:
MAIN00
a
MAIN01
a
page2:
MAIN00
b
MAIN01
(blank)
Expected output:
page1:
MAIN00
a
MAIN01
a
page2:
MAIN00
b
MAIN01
b

Why does editing the spry horizontal menu on my template alter the spry tabbed panels on my page?

Most of the pages on my site are created using the same template I developed. Today, I edited the horizontal main menu on the template, which changed all the pages on my site correctly, except now all the pages with tabbel panels in the body are showing as a bulleted list instead of tabbed panels. Please Help!?!
In fact, there is no longer any css styles for any tabbed panels any longer...what did I do?

Oh Brother, of course! I should have waited to post until I was out of
my freak out mode. Thanks a lot for the help.

Help needed for tabbed panels

I'm having problems with my html pages that utilize Spry
tabbed panels. The majority of them look as expected but when a
page requires a scroll bar because of it's increased length,
there's a noticeable shift from page to page.
Almost looks like the pages jump horizontally. Can someone
take a look & offer some help?
Thanks much, VSE_driver
http://www.monocacyequine.com/newweb/index.html

Nothing to do with tabbed panels. This is to do with Firefox
etc adding a scroll bar on the right and then the outer div
"wrapper" being centered horizontally on the page.
Try adding a css relative position attribute to the wrapper
id element
#wrapper{
position: relative;
left: 100px;
</style>
Adjusting the left element as required.
Phil

Corrections needed in Tabbed Panels Documentation

Hello,
I have a project where I am using Spry's tabbed panels so I
downloaded Spry release 1.4. In the documentation found in widgets
-> tabbedpanels -> SpryTabbedPanels.html I found a few
spelling mistakes in the sample code provided that would make the
example to hard to follow for a novice.
There were many instances in the example where the line
"<script src="includes/SpryTabbedPanel.js"></script> "
should read SpryTabbedPanels.js as is the name of the file
provided.
Also the lines that read "var tp1 = new
Spry.Widget.TabbedPanel("tp1");" should read
Spry.Widget.TabbedPanels("tp1"). Again it switches back and forth
throughout the example.
Just a few mistakes I came across I thought I'd let the Spry
team know about!
-Braxo

Thanks for letting us know!!!
I've fixed this internally and will get folks to push the
corrections up on the labs website.
--== Kin ==--

Whenever I right click on a link it automatically goes to that page. If I right click and select 'Open in new tab' I will have two tabs of the same page. How do I stop this?

It never used to happen it just randomly started, if i hover over a link and press the button between Alt Gr and Ctrl then it will come up with options without going to the link itself

Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox (Tools) > Add-ons > Appearance/Themes).
*Don't make any changes on the Safe mode start window.
*https://support.mozilla.com/kb/Safe+Mode
*https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes

Multi page recordset output from ASP page on Spry Tabbed Panel Widget

I am using a simple Spry Tabbed panel set on my asp page to show the output from different ASP pages, inside the tabbed panels. The tabbed panels on the page under consideration (destination page) display the output from different asp pages (source pages). The source asp pages generate multi page outputs which are paginated on the source page itself and pagination links are displayed on the source page itself.
However, we dont want to display the source page outside of the tabbed panel, but instead the output content from the source asp pages should show inside the tabbeed panels only. The first page generated by the source asp page displays correctly inside the tabbed panel. However, when the user clicks on the links for the next page generated by the source asp page, but which is being displayed inside the destination page tabbed panel, they dont display the next page inside the tabbed panel. Instead the source asp page displays the output outside the tabbed panel destination page.
Please advise on how to ensure that the user can page through the recordset generated by the source asp page by clicking on the pagination links at the bottom of the records, while ensuring that the output displays within the tabbed panels on the destination asp page.
I am enclosing the source code being used to generate the spry tabbed panel widget and also updating it with the output from the source asp page. In this case, the code given below is from the main page containing the widget and the source asp page is "sample.asp", which generates multi page output.
Please note that I am not too keen on using xml data sets output from the source asp page, but would be more comfortable with directly using the asp pages to fill the tabbed panel content.
Please help
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
       <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=two class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>

I fully agree that the problem does not lie with tthe tabbed panels.
The solution would probably be first required to be tried using ajax on any div tab.
Then the same code would have to be used on Sprytabbed panel. Hence, the following may be advised:
1. Sample code for server side pagination and displaying inside any div tag and refreshing it using ajax. the update link would also lie inside the div tag which would show the next/ previous page without reloading the page.
2. Then adapting the refresh technique using ajax in the Spry Tabbed panel using the inbuilt updatecontent method of the Spry Tabbed panels.
In order to achieve the above, I am getting the recordset output in the tab content as expected. The recordset is also getting the pagination links from server side asp as required.
However, it is also generating the following error.
Webpage error details
Message: Unterminated string constant
Line: 9
Char: 56
Code: 0
URI: http://localhost/test/test5.asp
The sourcecode is as given below. If you can help with the error indicated above, my problem would probably get solved.
<html><head>
<title>Untitled Document</title>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/xPath.js" type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('one','untitled-5.asp');">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0" >Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=one class="TabbedPanelsContent">Content 1</div>
    <div id ="two" class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Spry tabbed panels not opening in IE on Vista

Link:
About
page
Link:
Story
page
Spry tabbed panels on these pages display fine in Firefox and
Safari.
But in IE on two separate Vista-running PCs, everything
except the tabs themselves loads, until you click refresh one or
more times. Both PCs were on broadband connections and I checked
each PC several times just to make sure it wasn't just an
intermittent connection.
Way to fix this for IE? As far as my client is concerned,
it's a bug.

Dear all, thanks for your replies.
I have tried Barascu Diana's fix to both pages linked at the
top, but am presently unable to test it on IE6. Anyone able to see
if those tabs are now appearing?
<DIV class="TabbedPanel" id="TabbedPanels1" style
="position:relative">
(Hope I did this right?)
I also temporarily tried kinblas' fix, but removing relative
positioning there caused the tabs to hover over to the left of the
page.

Sliding panel inside tabbed panel - onclick both

I have two tabbed panels, tab one has a sliding panel function in it with 5 panels. I am wondering that when you are in tab 2 that you can have a button that clicks to tab 1 AND to sliding panel 3 at the same time? I can make them work independently, but can't get it to accomplish both. I don't have a site that I can post but I could dummy one up if that would help.
OK I have another scenario as well....
You are on tab 1, sliding panel 4 and then go to tab 2. When you go back to tab 1 it holds the sliding panel 4 active. Is there a way that when you go back to tab 1 and it to default back to sliding panel 1? Basically I don't want it to hold the position of sliding panel 4 on tab 1.

Try this and adapt to your needs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanels {
   position: relative;
   width: 200px;
   height: 200px;
   padding: 0px;
.SlidingPanelsContentGroup {
   position: relative;
   height:600px;
   margin: 0px;
   padding: 0px;
.SlidingPanelsContent {
   width: 100%;
   height: 400px;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
</style>
</head>
<body>
<a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Contenu 1
      <a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
      <a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
      <a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
         <div id="slidingPanel_1" class="SlidingPanels">
              <div class="SlidingPanelsContentGroup">
                 <div id="content1" class="SlidingPanelsContent">The Content 1</div>
            <div id="content2" class="SlidingPanelsContent">The Content 2</div>
            <div id="content3" class="SlidingPanelsContent">The Content 3</div>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">Contenu 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
Spry.Utils.addLoadListener(function() {
        Spry.$$("#trigger1").addEventListener('click', function() {
            TabbedPanels1.showPanel(0);
            sp1.showPanel(2);
        }, false);
        Spry.$$("#trigger2").addEventListener('click', function() {
            //TabbedPanels1.showPanel(0);
            sp1.showPanel(0);
        }, false);
</script>
</body>
</html>
You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
Xav

Tabbed Panels & IE 7 Weirdness

I have a page that contains 5 instances of the DW CS3 spry tabbed panels. All work fine in IE 8 & FF 3 on Windows (and Safari & FF on Mac).
But in Win IE 7, the content of two of those panels is hidden on page load. The tabs and text within the tabs shows up fine, and the panels are both expanded to approximately the size they should be with content, but the content itself is hidden. Viewing the source code shows the content of those panels is rendering to the page, but it's acting as if it's hidden.
Here's where it gets weird: If I scroll the page such that the bottom edge of the containing panel is touching the edge of the browser window, the contents suddenly appear! Scrolling further either way up or down makes the contents disappear.
The link to the offending page:
http://nlstage.sx.atl.publicus.com/
The offending tabbed panels are in the right-hand column (Polls/Queries) and (Chats/Forums) ... all the other tabbed panels on the page work fine in IE 7.
Thanks ...
- jr

Your page took an inordinately long time to load on my system, and I am using the browsers in which you said your page works.
This leads me to believe that your primary difficulty is with the validation of your code.
http://validator.w3.org/check?uri=http://nlstage.sx.atl.publicus.com/&charset=(detect+auto matically)&doctype=Inline&group=1&user-agent=W3C_Validator/1.654
will show the report I received from the w3c validator.
You will find some errors that relate to the Spry, and the Spry might be all right...the validator will not recognize the Spry appropriately.
If you can work your way through validating the code on your pages, you may also fix the apparent difficulty with your Spry Tabbed Panels not showing up.
Beth

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

Open tabbed panels from dropdown list option value

I have about 10 tabbed panels on my page.
I created a dropdown list, <option value></option value>.
I need to open the specific panel when an option is selected from the dropdown list. I know how to open tabbed panels by URL, a button, and a link on the same page. But how do i open a tabbed panel from a dropdown list. The <option value> in IE does not allow for onclick events in IE.

Yes and I have been trying to find that. Right now I have it setup where the onchange event is "location = this.options[this.selectedIndex].value;">
and then I have each<option> in the dropdown list with teh value=http://URL.com?tab=3#tabbedpanels1.
It works but it isn't as dynamic as I would like. When i select each option in the dropdown, it refreshes the page and opens the correct tabbed panel. Then the dropdown list is reset to the default value because the page refreshed. I wanted to do this without the page refreshing, that way the dropdown list item remains at what I selected to open the tabbedpanel. and plus, I didn't want the page to refresh everytime but to just open the tabbedpanel the same way as if i made a button to open it.

I need two tabbed panels on a page

Similar Messages

Maybe you are looking for