How to hyperlink to particular spry panel tab

I have spry panel which has 3 tabs. Everythings works fine.
When I load the page which has spry panel, the content of the
first tab is shown which is fine.
Now I am trying to make a link from another page which points
to the page which has spry panel. I can easily put the link but
what I want to do is when the link is clicked I was show the
content of third tab instead of the first tab. How do I do this?
Can someone please help me?

Meant to do? Meant to do anything you can get it to do
Put this in the head of your document:
<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
</script>
Link the SpryURLUtils.js per the first line in my quoted code.
The second script bit above calls the variable and sets up a function. Don't mess with it, just use it.
You'll have material like this in the foot of your page, just before the closing body tag:
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0});
var Accordion2 = new Spry.Widget.Accordion("Accordion2", {defaultPanel: params.panel ? params.panel: 0});
var Accordion3 = new Spry.Widget.Accordion("Accordion3", {defaultPanel: params.panel ? params.panel: 0});
//-->
</script>
These help to make your widgets work. Don't worry if you don't have what I have exactly; I copied this from one of my sites. But the
var TabbedPanels1 = etc. etc. line you WILL have. You will also have a second one if you have TWO sets of tabbed panels on your page. The first should be TabbedPanels1, the second will be TabbedPanels2, etc., etc.
Here's a quote from my site, showing a "call" or link to widgets in other parts of the page. I set my whole site (except more recent pages) as ONE page, so this should be similar to how you set up your call:
<div class="image_gallery">      <a href="?tab=5&amp;panel=3#TabbedPanelsTab&amp;Accordion1" title="Disappeared Children" target="_self"><img src="images/homeArgentina.gif" alt="Argentina website" /></a><br />
      <em>Website (early project):<br />
      &ldquo;Disappeared Children: We Search for Them&rdquo;</em></div>
Note the <a href... tag. You don't need a page name, because you are staying on the same page. But this calls tab 5 AND panel 3. If you look at my page www.gravenimagedesign.net, look for the fourth image from the left on the top row on the "home" screen. Click on it, and see where it takes you.
Remember that all is based on zero being the first tab, 0, 1, 2, 3, etc.
Oops, gotta go. Let me know if you need more help with this. It is something that I have to dig back into my own code to remember.
Best,
Beth

Similar Messages

  • RE: How to set createInsert operation with panel tab

    Hi all,
    I am using Jdeveloper 11.1.2.3.0
    Here i have one form and it contains two panel tabbed subDetailedItems called List and New.
    I have table in List Tab and form in New Tab.
    Now my requirement is if i select New tab then it has to display empty fields to enter new record.
    Help me to resolve the issue.
    Thanks,
    Syam

    Nitesh,
    I understood the usecase. But my question was, what happens if the user clicks on the New tab (a new record gets created due to createInsert - but not committed), then go back to another tab and then click on New tab again (another new record gets created due to next createInsert). Now, if the user commits, after entering values, he would have 2 rows added to the table (one with blank values and next one with data). You should have to handle that as well.
    -Arun

  • How to call a method on panel tabbed click.

    Hi Friends,
    I am using JDeveloper 11.1.1.5.0.
    I have a method written in the AppModuleImpl class. It calls a procedure from the database.
    In my .jspx page, panel tabbed is used. When I am clicking the 2nd panel tab, I want the method to be executed.
    Please Help.
    Thanks,
    $@M$

    so on click of that tab, use getSource to find which tab in your bean, and there get the application module from the context, and call the method in your app module.

  • How to increase the width of Panel Tabbed layout

    How to increase the width of detailed items of a Tabbed Panel ? I have many columns inside a detailed item of tabbed panel i can see only 3 colums ,to see the rest of the column i need to scroll. I tried to set the width but doesnt seems to be working
    <af:panelTabbed id="pt2" inlineStyle="width:800.0px;">
    <af:showDetailItem text="Interview" id="sdi1"
    inflexibleHeight="50"
    inlineStyle="width:800px; border-color:Aqua; border-width:thin;"
    styleClass="AFStretchWidth">
    Is there any way to increased the width of showDetailItem of panelTabbed ?
    Thanks

    Make sure the stretchChildren property of the shoDetailItem is set to first.

  • Issue related to Panel Tabbed- How to mark a particular tab as default tab

    Hi,
    I am facing an issue where I want to make a showDetailItems Tab the default one. Currently every time the panel tabbed gets loaded I get the previously opened tab as disclosed.
    Making Disclosed true for one particular showDetailItem and false for others doesn't solve the problem, infact there is no change in the behavior.
    Can somebody suggest a solution.
    Thanks
    Deepak

    You can set the disclosed property of hte one detail to ture which you like to open when you first enter the page
    <af:showDetailItem ... disclosed="true"...>If you like you can use EL to calculate the value...
    Timo

  • How to automatically open and close collapsable spry panels?

    I designed a collapsable spry panel in DW to open and close automatically, with a 10 sec delay, unless person clicks on tab to close immediately.
    The spry panel opens automatically, but will only close if i click the tab.
    Is there a way for the collapsable spry panels to close automatically?
    [Moved to Spry forum by moderator]

    Arnout,
    I feel certain the answer I need is in the reply you posted here, but I need a little more help to know exactly what to do.  I am using a collapsible panel to show and hide a series of onload panoramic photos near the top of my page.  What I want is for the collapsible panel to be open on some pages and closed on others and I want the animation of the panel closing to be seen too.  I'm thinking this should be achievable with some sort of onload trigger or something.  Currently I've gotten close to what I want by referencing two different .js files (one for the "open" panel state and another for the "closed" panel state), but this doesn't show the graceful animation of the panel closing.  Any ideas on how to achieve what I want?  Here is the url of the test site I'm developing:  http://www.gregdanpartners.com/lrre2/index.html
    Thanks in advance.
    Dan

  • Spry Tabbed Panels: Tabs

    I'm experimenting with Spry Tabbed Panels. The problem I
    couldn't work out is that how to get panel tabs stay on their
    place. They seems to be jumping out (far right) when I click on
    enter key while my cursor in the tab content area. This happens on
    DW CS3 but displays correctly on browsers preview (site is local)?
    I am inserting Spry Tabbed Panel in a simple styled div.
    There are many styled divs/nested divs on the page.
    I can insert non Spry items in a same div and style them
    without problem but something seems to be different about Spry
    Tabbed Panel?

    I'm experimenting with Spry Tabbed Panels. The problem I
    couldn't work out is that how to get panel tabs stay on their
    place. They seems to be jumping out (far right) when I click on
    enter key while my cursor in the tab content area. This happens on
    DW CS3 but displays correctly on browsers preview (site is local)?
    I am inserting Spry Tabbed Panel in a simple styled div.
    There are many styled divs/nested divs on the page.
    I can insert non Spry items in a same div and style them
    without problem but something seems to be different about Spry
    Tabbed Panel?

  • Spry Accordions, Tabbed Panels, and Collapsible Panels: changing colors

    I wanted to alert everyone to a great new Community article published by our very own David Powers. The article details the various best practices and methods for changing the colors of Accordion, Tabbed Panels, and Collapsible Panels widgets, including tab backgrounds, borders, and so on.
    Here's the article:
    http://kb2.adobe.com/community/publishing/504/cpsid_50437.html
    Customization questions are pretty frequent in both the Spry and Dreamweaver forums. This new styling guide is sure to answer lots of peoples' questions.
    Furthermore, the appearance of such an article is a great example of how Community content can interact and live symbiotically with Adobe Help. We've linked directly to David's piece from our own customization pages for the Spry Accordion, Tabbed Panels, and Collapsible Panels widgets:
    Customize the Accordion widget
    Customize the Tabbed Panels widget
    Customize the Collapsible Panels widget
    Thanks a lot to David for hammering out this article.
    If you're interested in publishing Community articles of your own, you can download the Community Publishing AIR application and get right to work!

    The borders you see, are called outline, its a accesiblity feature of the browsers,
    Actually called 'focus' lines  :-)
    Here's an article about the Bluefocus lines seen in Safari.
    http://www.brunobergher.com/blog/2009/01/19/safaris-blue-focus-lines/
    Without creating a Spry widget myself right now to test, but I'm sure thata there is a 'focus' rule in the css...
    trying the
    {outline:none;}
    on that rule.

  • How to open a panel tabbed window using a button present in the same page

    below is my jspx page where i have two buttons and two panel tabs. I want to open respective panel tabs using respective buttons:
    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
    <af:document id="d1" binding="#{backing_pages_bb.d1}">
    <af:form id="f1" binding="#{backing_pages_bb.f1}">
    <af:panelStretchLayout binding="#{backing_pages_bb.psl1}" id="psl1">
    <f:facet name="bottom"/>
    <f:facet name="center">
    <af:panelTabbed binding="#{backing_pages_bb.pt1}" id="pt1">
    <af:showDetailItem text="first"
    binding="#{backing_pages_bb.sdi1}" id="sdi1"/>
    <af:showDetailItem text="second"
    binding="#{backing_pages_bb.sdi2}" id="sdi2"
    rendered="true" disclosed="false"/>
    </af:panelTabbed>
    </f:facet>
    <f:facet name="start"/>
    <f:facet name="end"/>
    <f:facet name="top">
    <af:panelGroupLayout binding="#{backing_pages_bb.pgl1}" id="pgl1">
    <af:commandButton text="first"
    binding="#{backing_pages_bb.cb1}" id="cb1"
    action="#{backing_pages_bb.cb1_action}"/>
    <af:commandButton text="second"
    binding="#{backing_pages_bb.cb2}" id="cb2"
    action="#{backing_pages_bb.cb2_action}"/>
    </af:panelGroupLayout>
    </f:facet>
    </af:panelStretchLayout>
    </af:form>
    </af:document>
    </f:view>
    <!--oracle-jdev-comment:auto-binding-backing-bean-name:backing_pages_bb-->
    </jsp:root>
    below is the backing bean created for the jspx page:
    package view.backing.pages;
    import javax.faces.component.UIComponent;
    import oracle.adf.view.rich.component.rich.RichDocument;
    import oracle.adf.view.rich.component.rich.RichForm;
    import oracle.adf.view.rich.component.rich.layout.RichPanelGroupLayout;
    import oracle.adf.view.rich.component.rich.layout.RichPanelStretchLayout;
    import oracle.adf.view.rich.component.rich.layout.RichPanelTabbed;
    import oracle.adf.view.rich.component.rich.layout.RichShowDetailItem;
    import oracle.adf.view.rich.component.rich.nav.RichCommandButton;
    public class Bb {
    private RichForm f1;
    private RichDocument d1;
    private RichPanelStretchLayout psl1;
    private RichPanelGroupLayout pgl1;
    private RichCommandButton cb1;
    private RichCommandButton cb2;
    private RichPanelTabbed pt1;
    private RichShowDetailItem sdi1;
    private RichShowDetailItem sdi2;
    public void setF1(RichForm f1) {
    this.f1 = f1;
    public RichForm getF1() {
    return f1;
    public void setD1(RichDocument d1) {
    this.d1 = d1;
    public RichDocument getD1() {
    return d1;
    public void setPsl1(RichPanelStretchLayout psl1) {
    this.psl1 = psl1;
    public RichPanelStretchLayout getPsl1() {
    return psl1;
    public void setPgl1(RichPanelGroupLayout pgl1) {
    this.pgl1 = pgl1;
    public RichPanelGroupLayout getPgl1() {
    return pgl1;
    public void setCb1(RichCommandButton cb1) {
    this.cb1 = cb1;
    public RichCommandButton getCb1() {
    return cb1;
    public void setCb2(RichCommandButton cb2) {
    this.cb2 = cb2;
    public RichCommandButton getCb2() {
    return cb2;
    public void setPt1(RichPanelTabbed pt1) {
    this.pt1 = pt1;
    public RichPanelTabbed getPt1() {
    return pt1;
    public void setSdi1(RichShowDetailItem sdi1) {
    this.sdi1 = sdi1;
    public RichShowDetailItem getSdi1() {
    return sdi1;
    public void setSdi2(RichShowDetailItem sdi2) {
    this.sdi2 = sdi2;
    public RichShowDetailItem getSdi2() {
    return sdi2;
    public String cb1_action() {
    // Add event code here...
    return null;
    public String cb2_action() {
    // Add event code here...
    return null;
    Wat method has to be coded inside cb1_action and cb2_action so that respective panels are opened.
    thank u for ur help in advance.

    Hi,
    If the data need to be passed is large, consider using Shared Memeory Objects: Check this doc for reference: How to pass data from ABAP to Web Dynpro ABAP
    Hope this helps u,
    Regards,
    Kiran

  • How can I make the spry accordion remember the panel open when I refresh the page or jump to a new page?

    How can I make the spry accordion remember the panel open
    when I refresh the page or jump to a new page?
    I am using the accordion feature on all my pages as a
    navigation aid. It has three panels. When you refresh the page the
    panel goes back to the default pane... Is there a way of
    controlling this so that the browser can remember the pane that is
    open (say set a variable, cookie, other?)

    Look for "Set the default open panel" on the following page:
    http://labs.adobe.com/technologies/spry/articles/accordion_overview/index.html
    Keep in mind you would need to change that bit of code on
    every page. The only way to do it more dynamically would be to
    include a custom javascript or PHP/ASP style script in order to
    change the value.

  • .js update of spry accordion panel tab data for countdown functionality

    Hi,
    First off I must say I really love the work done on CS3 and
    the Spry Framework - loads of examples and nicely implemented!
    Questions in a nutshell:
    Can I change spry generated data on the fly so I can run a
    .js counter function to dynamically update accordion panel data?
    What event do I look for to fire a .js init function to see my new
    spry widget (onPostLoad isn't working for me, but I'm a newbie!)?
    * spry accordion
    * {expire} dataset data is SQL DATETIME
    * js countdown function CD_Init() searches DOM for specific
    element IDs 'countdownN' and uses innerHTML to update counter at
    specific interval
    * observer onPostLoad seems to be calling CD_Init before
    accordion DOM is loaded.
    Verbose questions:
    I am trying to tweek the output of a Spry Acoordion and
    wanted to add a third party js counter to my accordion panel tab
    and am having a bit of difficulty. The js code uses an innerHTML
    statement to keep the counter going and supports multiple counters
    (which I need to use one counter per tab). I build the multiple
    counter id from the ds_RowID field which is where the parent div
    element where the js changes the innerHTML. Can I do this? The .js
    searches for elements w/ an ID of "countdownN", N = instance # and
    a date format of '2007-09-08 00:00:00 GMT+00:00' and updates the
    div's text with the countdown time. My {expire} record below is an
    SQL DATETIME which is the correct format for this countdown.js
    function (with the GMT-05:00 appended).
    The relavant code is:
    <div id="specialDisplay" spry:region="dsSpecials">
    <h3>Click on a special below from our <em>LIVE
    FEED</em>  to see all the up-to-the-moment
    exciting packages available!</h3>
    <div id="AccordionSpecials" class="Accordion">
    <div class="AccordionPanel" spry:repeat="dsSpecials">
    <div class="AccordionPanelTab"
    onclick="dsSpecials.setCurrentRowNumber('{dsSpecials::ds_RowID}')"
    spry:hover="AccordionPanelLabelHover"><?php echo '<div
    id="countdown' .'{ds_RowID}'. '">';?>{expire}
    GMT-05:00</div>{dsSpecials::name}</div> <!--
    accordion panel tab -->
    <div class="AccordionPanelContent">
    <div spry:state="loading"><img
    src="./i/ajax-loader.gif"/></div> <!-- loading -->
    <div spry:state="error"><span spry:content="Error
    loading data..."></span></div> <!-- error -->
    <div id="details" spry:state="ready"
    spry:content="{detail}"></div> <!-- detail when ready
    -->
    </div> <!--accordion panel content -->
    </div> <!-- accordion panel -->
    <script type="text/javascript">
    <!--
    var AccordionSpecials = new
    Spry.Widget.Accordion("AccordionSpecials", { defaultPanel: 0,
    duration: 1000, useFixedPanelHeights: false, enableAnimation:true }
    var observer = { onPostLoad: function(notifier, data) {
    CD_Init() ; /*alert("postLoad"); */} };
    //specialDisplay dsSpecials.addObserver(observer);
    Spry.Data.Region.addObserver("specialDisplay", observer);
    //-->
    </script>
    </div> <!-- accordion -->
    </div> <!-- specialDisplay -->
    I got the nice countdown.js script from
    http://andrewu.co.uk/clj/countdown/
    which allows N # of counters/page. I have updated this code to
    start checking for a zero based index that I generate utilizing the
    spry ds_RowID.
    I have added an observer to run the countdown's
    initialization function (to hopefully find all the "countdownN"
    element instances) under my dataset declarations:
    var observer = { onPostUpdate: function(notifier, data) {
    CD_Init() ; } };
    Spry.Data.Region.addObserver("AccordionSpecials", observer);
    Also tried to add the observer to a div surrounding the
    according w/ the "spry:region" specified.
    But, alas, I see the correct expire instance in my tab, but
    it looks like the counter is only firing before the actual data is
    loaded (i.e. I used FF's webdeveloper and set a break on the
    CD_Init function and it's breaking before the actual accordion is
    there - I see the dataset placeholders in my window for the
    accordion. When I continue, the accordion is generated, but my
    countdown isn't working because it looks to be firing before the
    DOM is updated w/ the accordion elements.
    Sorry for the long speil; I'm really a .js neophyte and just
    starting w/ spry - so I'm not even sure if I can/should change the
    HTML generated from spry. If not, is there anyway that I can have a
    countdown timer for each accordion's tab panel's associated
    {expire} data field? Any ideas and suggestions are greatly
    appreciated!!
    Thank you also for this forum - some great gems for
    development here!

    Sorry - the previous post is way too long.
    Is it possible to tie in a javascript update function (a
    counter update) to an element generated by a spry widget (a dataset
    value that generates spry accordion tab text) so that the accordion
    tab gets updated by the javascript function running under a
    setinterval?
    I've tried firing the javascript init function with an
    observer on the accordion's onPostUpdate event, but it's getting
    fired before the spry data is loaded. Is this something that's
    possible? Sorry for my lack of javascript expertise! Relying on the
    real experts here!
    Thanks for any advice/pointers.

  • How do I add a spry Collapsible Panel Group?

    How do you add a spry Collapsible Panel Group? When I go to
    the Insert -> Spry there is only a Spry Collapsible Panel
    option, not group. Do I have to download an update? Is there
    something wrong with my install?
    I appreciate any help.

    Could someone at least tell me if they are able to add a Spry
    Collapsible Panel Group from the Insert -> Spry menu?

  • 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

  • How do you add a Spry Collapsible Panel Group?

    How do you add a spry Collapsible Panel Group? When I go to
    the Insert -> Spry there is only a Spry Collapsible Panel
    option, not group. Do I have to download an update? Is there
    something wrong with my install?
    I appreciate any help.

    Hi Lithium,
    The Spry features in Dreamweaver are a subset of the total
    features in the Spry framework. The CP Group is not an option in
    the Insert Bar, but it is pretty simple to write the code for it.
    I am sure you have seen the sample for it:
    http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html

  • SPRY Question - how to return to a SPRY accordian with the appropriate pannel expanded?

    I am using a SPRY accordion
    http://apoko.abetterplacetobe.org/ChapterDocuments/MeetingMinutes/MeetingMinutesIndex.html )
    to control access to a variety of meeting minutes. Each
    accordion panel
    represents a school year and contains a collection of links
    to items within
    that school year. By default, the window (i.e. the "index")
    opens with the
    first panel collection expanded.
    When a user clicks on any of the items within a panel
    collection on the
    "index" page, control passed to a linked "detail" page. I
    want the user to
    be able to return to the "index" page, with the appropriate
    panel collection
    expanded, by clicking on the title area (i.e. "Brotherhood
    Meeting") on the
    "detail" page.
    I have placed an anchor tag (i.e. identifying "the year") on
    each panel
    header on the "index" page and use that relative address as
    the return link
    from the "detail" page. Control does returns from the
    "detail" page to the
    appropriate anchor on the "index" page but the panel
    collection does not
    expand. I have only implements these links on the 1952-1953
    and 1953-1954
    panel tabs.
    How can I get control to return and expand the appropriate
    panel tab?

    http://helpx.adobe.com/x-productkb/global/find-serial-number-student-teacher.html

Maybe you are looking for

  • New Epson WF-7620 will not print; is offline after installing setup software

    This is a problem that took me many hours to solve; but I did solve it.  I thought I would offer it up so no one has to go thru the pain I did. The problem is that during the Epson set-up procedure for Wireless printing, the mac cannot find the print

  • Longevity of Harman Soundsticks III speakers?

    I just bought the Airport Express and am using it with Bose Companion II speakers (also new - trying out and not crazy about them). SO, I am considering buying the Harman Soundsticks III. I hear great things about them from reviews, but I just have o

  • Field Exit for VA11 screen ?

    Hello Abapers,                      I need ur help to find out the field exit available for VA11 screen. How to find the field exit wht is the procedure? Thks

  • Abap function to test system by CCMSPING

    Hi, We are developing a very simple webdynpro (abap) to show the availability status of the systems (giving access to the workcenters is quite too much info for our managers). Is there any abap function to check the availability of the systems by the

  • CUA - how can I disable child system user record RENAME?

    I have setup CUA.  How can I disable SU01/RENAME from the child system?  If a user is Renamed directly in the child system, the new record is unlocked and can be edited in the child system.  These new records are now out of sync with CUA master data.