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

Similar Messages

  • Linking to a Tab in another page which has 3 tabbed panels

    Hi
    I have created a page which has three tabbed panels.  The first is a horizontal Tabbed panel with two tabs.  Each of these tabs has a vertical tabbed panel with 4 tabs in each.
    I want to be able to link from another page to the 2nd horizontal tab and the first vertical tab on that page.
    If I use the URL  ?tab=1, the link takes me to the second horizontal tab but also then to the second vertical tab.
    I have tried the following
    giving the target tabs the same id and targeting ?tab=news
    setting the url to ?tab=1&tab=0
    setting the url to ?tab=TabbedPanel1.tab1&TabbedPanel2.tab2
    but none of these work.
    Javascript is not my thing (as you have probably guessed!).  Is there a way that I can target any combination of tabs on one page through the URL?
    Any ideas, much appreciated.
    Thanks

    Data:
    Tab on main tabbed panels = primetab
    Tab on nested tabbed panels = secondtab
    URL Link = myPage.html?primetab=2&secondtab=2
    Markup:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryTabbedPanels.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="TabbedPanels2" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">Tab 1.1</li>
                <li class="TabbedPanelsTab" tabindex="0">Tab 1.2</li>
              </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">Content 1.1</div>
                <div class="TabbedPanelsContent">Content 1.2</div>
              </div>
            </div>
        </div>
        <div class="TabbedPanelsContent">
            <div id="TabbedPanels3" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">Tab 2.1</li>
                <li class="TabbedPanelsTab" tabindex="0">Tab 2.2</li>
              </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">Content 2.1</div>
                <div class="TabbedPanelsContent">Content 2.2</div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <script src="SpryAssets/SpryTabbedPanels.js"></script>
    <script src="SpryAssets/SpryURLUtils.js"></script>
    <script>
    var params = Spry.Utils.getLocationParamsAsObject();
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.primetab ? params.primetab : 0});
    var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2", {defaultTab: params.secondtab ? params.secondtab : 0});
    var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3", {defaultTab: params.secondtab ? params.secondtab : 0});
    </script>
    </body>
    </html>
    The highlighted parts denote the markup required over and above the original markup for tabbed panels, placing JS at the bottom of the document is a peculiarity of mine an is therefore not a necessity.
    Gramps

  • 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?

  • Linking to a specific panel from another page and from higher up on same page Spry-UI-1.7

    Hi all,
    I am using Spry-UI-1.7 for a 4 tab tabbed panel on the bottom of my home page.  I'd like to link to the second tab from another page and also from the top of the home page.
    I previously used method: http://foundationphp.com/tutorials/spry_url_utils.php and it worked great.
    Now, with the Spry-UI-1.7 Tabbed Panel "widget", that method isn't working.
    I've reviewed the code from the samples page: http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
    but cannot figure out what I am doing wrong.  It shows the following code for linking from another page:
    <a href="#" onclick="TabbedPanels2.showPanel(1); return false;">Tab 2</a>
    I tried this 'as is' and it didn't work. 
    I tried it with index.html in place of the # and it didn't work.
    (e.g.   <a href="index.html" onclick="TabbedPanels2.showPanel(1); return false;">Tab 2</a>   )
    What am I missing here?
    (I have the tabbed panel on "index.html" and want to link from "maps.html" and from the top of "index.html"
    Thanks for any help for this spry newbie! (read: I need it spelled out like I was a 6 yr. old

    This works
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
    <script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryTabbedPanels2.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js" type="text/javascript"></script>
    <link href="Spry-UI-1.7/css/TabbedPanels2/SpryTabbedPanels2.css" rel="stylesheet" type="text/css">
    <script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2138522" binding="#TabbedPanels2" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div id="TabbedPanels2">
      <h2>Tab 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id. Phasellus blandit ullamcorper dignissim. In rutrum, ante non congue fermentum, metus odio bibendum elit, ut congue sapien arcu ac justo. Vivamus sit amet erat nibh, quis dignissim libero. Pellentesque in sapien felis, et volutpat eros. Maecenas adipiscing, eros sit amet placerat cursus, arcu lacus consectetur lectus, non ultricies neque urna laoreet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
      <h2>Tab 2</h2>
      <p>Nulla facilisi. Vestibulum ipsum elit, tincidunt sed tristique sit amet, faucibus in orci. Nunc sit amet elit lorem. Sed eget arcu ipsum, pharetra ullamcorper lectus. Sed ac diam ac tortor mattis mollis. Etiam mattis felis vel augue tempus in rhoncus ligula elementum. Vestibulum ut iaculis risus. Aliquam erat sem, feugiat vel laoreet in, lobortis non mauris. Vestibulum neque nibh, vehicula eleifend tincidunt sed, bibendum id dolor. Pellentesque quis libero nec orci porttitor faucibus vitae in velit. Pellentesque dignissim sem ut justo interdum id egestas tellus fringilla. Vestibulum tempor, turpis eget dignissim luctus, est erat ultricies turpis, non tempus massa elit in nulla. Sed eu arcu vel enim laoreet hendrerit at vel enim. Integer semper malesuada sem quis porttitor.</p>
      <h2>Tab 3</h2>
      <p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. In accumsan consectetur ante a vestibulum. Phasellus eu nulla et lectus tincidunt porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mauris massa, venenatis ut fringilla interdum, imperdiet et neque. Sed ut risus metus.</p>
    </div>
    <script type="text/javascript">
    // BeginOAWidget_Instance_2138522: #TabbedPanels2
            var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
                injectionType: "replace",
                widgetID: "TabbedPanels2",
                autoPlay: false,
                defaultTab: params.tab ? params.tab : 0,
                enableKeyboardNavigation: true,
                hideHeader: true,
                tabsPosition: "top",
                event:"click",
                stopOnUserAction: true,
                displayInterval: 5000,
                minDuration: 300,
                maxDuration: 500,
                stoppedMinDuration: 100,
                stoppedMaxDuration: 200,
                plugIns:[]
    // EndOAWidget_Instance_2138522
    </script>
    </body>
    </html>

  • How do you link to a specific location in another page?

    I'm working in Dreamweaver CS4.  I'm trying to create a link to go to a specific location on another page in my website.  Any advice?

    All the information I have seen about Named Anchors deals with information that is contained on the same page.  I am looking to go to a specific location on a different page.  Is this possible using Named Anchors?  If so, how?
    Sure it is.
    Place a named anchor on your destination page near the bottom of your page for this test.  And name your anchor  1.
    On the parent page, your link will look like this:
    <a href="some_page.html#1">this is a link to named  anchor 1</a>
    Save both pages and test in browser.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • How to define the hyperlink command in the online help to go to a specific place on another page?

    Hi,
    I run my online help (WebHelp) in an application in Firefox. When clicking a link on a page, I want to go to a specific section on another page. In the hyperlink I am using the #<bookmark> to go to the bookmark on the other page. This works in IE, but not in FireFox. Do I need to use a different command or do I have to change some settings in my browser to make it work?
    Thanks!

    Does your page design use frames (classic frames or inline frames)?
    From past threads:
    Make sure your bookmark doesn't contain a #. In other words, if the bookmark is Chapter1, Firefox will require #Chapter1 on the link, but if the bookmark is #Chapter1, then Firefox will require ##Chapter1 on the link.
    If your page changes height after loading, for example, you use a script that collapses some sections, Firefox may go to the original location in the page instead of the updated location. The workaround for this would be to have a script in the page check the hash and scroll to the correct location after changing the height.

  • Navigation to specific tab within a page

    I have an event set up to navigate to a certain page however this is not good enough for me. I want to navigate to a specific tab within that page. Is there a way to do this?

    I'm not entirely sure I understand what you want, but if you want to simply go directly to a specific tab, you can use it's direct access URL. If you login to portal and bring up Oracle's portal help (use the help link in the upper right on any of the default pages), search for direct access URL and they do a nice job of explaining how to reach a page, tab, subpage, item, etc.
    To access a subtab called mytab1 on the mytab tab in Portal release 2 or portal 10g prior to 10.1.4:
    http://<hostname>:<portnumber>/pls/portal/url/page/<pagegroupname>/<pagename>/mytab/mytab1
    (Note that the names needed for the url are the "Name" field when looking at properties, not the "Display Name")
    The URL structure has changed in 10.1.4.
    Rgds/Mark M.

  • 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

  • Linked Column to Item on Another Page

    How does one link a report column to an item on another page? I can link to another page, but I can't get the value into an item on that page.

    Hi - I presume you want to implement something like an 'edit' link, where you click on a row in a report and get redirected to a form where you can edit that record's data.
    What's going on here is this:
    1. Redirect to the form page;
    2. Set the primary key field's value on that page; and
    3. Perform a row fetch to populate the form items.
    The 'edit' column of the report will normally hold the PK value.
    In the link attributes for the edit column you need specify the value you want to set when you redirect (the name of the PK item on the form page) and the value you want to set it to (normally the edit column name).
    Easiest way to see this in action is to create a Form and Report on a Table using the wizard and look at what APEX puts into the first report column. You can see the ID value being passed in the URL as you link to the form page.
    Hope this helps.
    Regards,
    John.

  • Setting up a link from a grid to another page

    All,
    Is there a way to create a link from a grid to another page?
    Thanks.

    You will need to find a tutorial for a drop down or cascading menu.  What you should try is to Google "AS2 drop down menu tutorial" and "AS2 cascading menu tutorial".  You may not find exactly what you are describing, but will hopefully find something you can figure out how to adapt to meet your goals.

  • I'm currently signed onto my home network and want to go on with another computer but don't remember my password for my network.  Does anyone know where to find this?  It's a password that I set myself, not the one that came with my router.

    I'm currently signed onto my home network and want to go on with another computer but don't remember my password for my network.  Does anyone know where to find this?  It's a password that I set myself, not the one that came with my router.

    It's in your Keychain on the computer you usually use to connect to your network - the "kind" will be "AirPort Network Password".
    Your Keychain can be opened by using the Keychain Access program. It is in your Utilities Folder.
    Open Keychain Access, and type airport in the search field. You will see a number of entries. Choose the one with the name of your wireless network, open it, and check the box next to "show password". Before it reveals itself you will be asked for your login password - the one you use to log in to your MacBook.
    The network password will appear in the box.
    Quit Keychain Access.

  • In Muse can you link to an element on another page?

    I was hoping that there was a way to link to an "element" (Not a page!) located on anther page either through Muse natively or by a script.  I'm not a coder or I wouldn't be using Muse.  I know you can link to other pages but I don't know about elements of other pages, specifically a "Lightbox" pop-up.
    I have a pop-up on a secondary page, lets say page 2, that I would like to also pop-up on anther page, lets say page 1, when clicked from page 1 but I don't want to have to put this Lightbox pop-up in two (both) locations because I actually have a couple hundred of these.
    Any suggestions would be greatly appreciated.
    Thanks,
    Ryan.

    If you want the pop up on multiple pages you will need to put it on multiple pages. Or you could add the link to the pop up as well as the pop up itself to a template and create the pages that you want that pop up using that template. Another one you can try is to have your pop up on a page all by itself with no template or other content and then add the page to any other page using an iFrame.

  • Create new pages but don't publish yet.

    Is it possible to create multiple pages ready for publishing but only publish selected ones today?
    To clarify if I create 10 pages today but don't want to publish them all today, 5 today 5 tomorrow is there a way to publish them in stages? The publish selection only has the options of publish 'all  or publish 'modified'.
    Thanks Mick

    Go to plan view, right click a page and deselect "Export":

  • Link to specific text from another web page

    Hello all
    Is is possible to link from one page to a specific piece of
    text in another web page in the same site? I have tried named
    anchor, hyperlink, etc but it just goes to the page rather than the
    text. I don't know if I am attempting the impossible. Can you help?
    Thank v much.

    > This also has a css rule so this 9pt thing is left over
    from copy and
    > pasting
    > from Word. I have it cleaned up as you suggested but I
    still have:
    > <span style="font-family:Arial; font-size:9.0pt; is
    there way of avoiding
    > this?
    It depends on your settings for how you copy/paste. See your
    PREFERENCES
    for those. I don't get such things because my settings are
    'tight' in that
    they are restrictive to what stying is carried into the page.
    > How I do this in a nav bar?
    Change this -
    .nav {
    font: bold normal 14px/normal Arial, Helvetica, sans-serif;
    text-transform: none;
    color: #003300;
    font-weight: bold;
    a.nav:link {
    font: normal 12px/normal Arial, Helvetica, sans-serif;
    text-transform: none;
    color: #003300;
    text-decoration: none;
    a.nav:visited {
    font: normal 12px/normal Arial, Helvetica, sans-serif;
    text-transform: none;
    color: #003300;
    text-decoration: none;
    to this -
    .nav {
    text-align:center;
    .nav a {
    font: bold normal 12px/normal Arial, Helvetica, sans-serif;
    color: #030;
    font-weight: bold;
    text-decoration:none;
    margin-right:35px;
    and then change this -
    <div align="center"><a href="index.html"
    class="nav">Home</a>       <span
    class="nav">About
    Us</span>      <a
    href="impact_HE.html" class="nav">Impact of HE
    Proposal</a>      <a
    href="purpose_ED.html"
    class="nav">The Purpose of
    ED</a>      <a
    href="procedures.html"
    class="nav">Procedures </a>     <a
    href="what_can_we_do.html" class="nav">What Can We
    Do?</a></div>
    to this -
    <div class="nav"><a
    href="index.html">Home</a><a
    href="about_us.html">About
    Us</a><a href="impact_HE.html">Impact of HE
    Proposal</a><a
    href="purpose_ED.html">The Purpose of ED</a><a
    href="procedures.html">Procedures</a><a
    href="what_can_we_do.html">What Can
    We Do?</a></div>
    But an even better way would be to make the menu an unordered
    list, like
    this -
    <ul>
    <li><a
    href="index.html">Home</a></li>
    <li><a href="about_us.html">About
    Us</a></li>
    <li><a href="impact_HE.html">Impact of HE
    Proposal</a></li>
    <li><a href="purpose_ED.html">The Purpose of
    ED</a></li>
    <li><a
    href="procedures.html">Procedures</a></li>
    <li><a href="what_can_we_do.html">What Can We
    Do?</a></li>
    </ul>
    And use this CSS -
    .nav {
    text-align:center;
    .nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    .nav li {
    float:left;
    width:150px;
    margin-right:5px;
    border-right:1px solid green;
    .nav a {
    font: bold normal 12px/normal Arial, Helvetica, sans-serif;
    color: #030;
    font-weight: bold;
    text-decoration:none;
    If you want to make the current page look like it doesn't
    have a link, then
    do this -
    <ul>
    <li><a href="index.html"
    id="home">Home</a></li>
    <li><a href="about_us.html" id="about">About
    Us</a></li>
    <li><a href="impact_HE.html" id="impact">Impact
    of HE Proposal</a></li>
    <li><a href="purpose_ED.html" id="purpose">The
    Purpose of ED</a></li>
    <li><a href="procedures.html"
    id="procedure">Procedures</a></li>
    <li><a href="what_can_we_do.html" id="what">What
    Can We Do?</a></li>
    </ul>
    and add this to each page (use the proper ID) -
    a#about {
    cursor:default;
    /* any other styles you want to make the current page show
    > I am being a complete idiot today (maybe it's because
    it's Sunday) Can you
    > talk me through this.
    Make the changes manually in code view.
    If you are getting the idea that you will need to ramp your
    HTML and CSS
    skills to do this stuff, you are right on target!
    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
    ==================
    "Dottydog" <[email protected]> wrote in
    message
    news:[email protected]...
    > Dear Murrray
    > Thank you very much for your comments.
    >
    > Can I ask you the following:
    > 1. p.MsoNormal {
    > Using Microsoft Word to build an HTML page is not
    advisable. Use DW only
    > or
    > clean up the Word markup
    >
    > This also has a css rule so this 9pt thing is left over
    from copy and
    > pasting
    > from Word. I have it cleaned up as you suggested but I
    still have:
    > <span style="font-family:Arial; font-size:9.0pt; is
    there way of avoiding
    > this?
    >
    > 2.
           <span
    class
    > Using non-breaking spaces as a layout tool is not
    advisable. Use CSS
    > margins/padding instead..
    >
    >
    > 3. This is not a named anchor point. It is not even a
    link. For that you
    > would need -
    > <p style="font-family:Arial,helvetica,sans-serif;
    font-size:small; "
    > id="BDBC">What we have said to
    B&amp;DBC</p>
    >
    > I am being a complete idiot today (maybe it's because
    it's Sunday) Can you
    > talk me through this.
    >
    > Thank you very much for your time. Much appreciated.
    >
    >
    >
    >
    >

  • Can you link to specific start and end pages of pdf in a web page

    I'm using iframes to display a pdf on a web page. i want to be able to link to for example pages 2-3 of a 20page document.
    I know i can link to a start page or a bookmark/destination but i only want those 2-3pages available to the viewer not the whole document.
    Is this possible?

    Not without a server-side application that extracts those pages as a new
    file and opens it instead of the original.

Maybe you are looking for