6 Replies Latest reply: May 24, 2011 11:32 AM by BerlyMeister RSS

    link named anchor to specific tab on widget

    lisaellensegal Community Member

      I have a page - http://jenniferyarro.com/schedule_postcard.htm.  I want it to link to the named anchors within a tabbed Spry widget - see page http://jenniferyarro.com/schedule_detail.htm.

       

      I put a named anchor inside each tabbed panel, I also tried to put the anchor on each tab.  Neither one works. It appears that the anchor sees the widget as one object, therefore I am taken to the correct page, but always to the same tab (ie the one that is set as default).  I was wondering if there is a way to have it link directly to the tab that I want open.

       

      Regards,


      Lisa

        • 1. Re: link named anchor to specific tab on widget
          Phil_W Community Member

          Hi,

           

          You want something along the following lines.

           

          In the link from the external page have a querystring in the link

           

          i.e. mytabbedpanelpage.html?panel=2

           

          Then have a bit of script in the tabbed panel page.

           

          var params= Spry.URLutils.geturlparamsasobject();

           

          if (params.panel)

          {

          TabbedPanels1.showPanel(params.panel);

          }

           

          Check out the Spry documentation for exact syntax as at work at present and not in front of documentation.

           

          Regards

           

          Phil.

          • 2. Re: link named anchor to specific tab on widget
            lisaellensegal Community Member

            Dear Phil,

             

            This answer helps me, but I am relatively new to web design and I don't really understand how to make this happen.

            With regards to your reply:

            "Check out the Spry documentation for exact syntax as at work at present and not in front of documentation."

             

            How do I find this specific answer in the Spry documentation?

             

            Thanks,

             

            Lisa

            • 4. Re: link named anchor to specific tab on widget
              lisaellensegal Community Member

              wow, that was fast!

              Thanks for the link, it is stil a bit over my head.  I found this in the Adobe site -

              Open panels programatically

              Use JavaScript functions to programatically open specific panels. For    example, you might have a button on your page that opens a particular tabbed    panel when the user clicks the button.

              Remember, Spry uses a zero-based counting system, so 0 indicates the first,    leftmost tabbed panel. If the tabbed panel has an ID, you can also use the ID to    refer to panels.

              Use the following          functions to open specific tabbed panels:

              <button onclick="TabbedPanels1.showPanel(0)" >open first panel</button>
              <button onclick="TabbedPanels1.showPanel('tabID')">open panel</button>
              <script type="text/javascript">
                   var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
              </script>

              Here is part of the link that you sent:

              URL Utils Sample

              This page demonstrates the use of the following URL utilities:

              • Spry.Utils.getLocationParamsAsObject - Gets parameters from the current URL.
              • Spry.Utils.getLocationHashParamsAsObject - Gets hash values from the current URL
              • Spry.Utils.getURLParamsAsObject - Gets parameters from a url variable.
              • Spry.Utils.getURLHashParamsAsObject - Gets hash values from a url variable.
              • Spry.Utils.urlComponentToObject - Gets values from a partial string.
              • Example - These objects in action.

              Which one is the best one for me to use?

               

              Thanks for your help,

               

              Lisa Segal

              • 5. Re: link named anchor to specific tab on widget
                lisaellensegal Community Member

                Dear All,

                 

                I found a really and easy to understand resolution to my question:

                 

                Link to answer = http://foundationphp.com/tutorials/spry_url_utils.php

                 

                I'm buying the book!

                 

                Lisa

                • 6. Re: link named anchor to specific tab on widget
                  BerlyMeister Community Member

                  The instructions above SEEM like just what I need - but when I update the script at the bottom of the code to

                   

                  var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});

                   

                  The content from all of my panels moves to one panel, and the widget no longer works.