Linking to a Specific Spry panel (modified for RSS Reader)

Hi – I would like to implement the following tutorial however have it work for the Spry Framework RSS Reader: http://foundationphp.com/tutorials/spry_url_utils.php
I understand the concept of this article and have been able to implement the solution up to step 4 however for my solution I am not working with tabbed panels or an accordion widget but the RSS Reader from the latest Spry Framework. I would like to have a specific feed and article selected on the page depending on what link the user has come from.
So instead of working with the tabbed panel and accordion variables I would be using the variables:
var dsCategories
var dsFeeds
var dsChannel
var dsArticles
I would like to know if anyone can assist me in modifying the solution to suit this scenario? or if it is even possible?
Thanks.
Michael.

Hi Ben,
Thanks for pointing me to this tutorial.
To keep things easier for myself I have kept the variable name as row. I have added the following code to the head of my called page:
On lines 9-10:
<script type="text/javascript" src="js/SpryURLUtils.js"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject();</script>
On lines 19-26:
//define the data set
            var ds1 = new Spry.Data.XMLDataSet("data/LocalFeeds.xml", "feeds/feed");
            //get the url parameter for the row number
            var params = Spry.Utils.getLocationParamsAsObject();
            //set an observer so that when the data is loaded, we update the current row to the url param value
            ds1.addobserver({ onPostLoad: function(ds, type) {
                                                                                                                            ds1.setCurrentRow(params.row); }
Currently my called page is still not loading in the wanted state with calling page passing the parameter row=2.
I aren’t sure what I am still missing but think it is perhaps something to do with setting the spry:region and spry:repeat to equal ds1? But not sure where I should be placing this.
Am I nearly there?
http://www.michael-williams.com.au/
Thanks.

Similar Messages

  • Linking to a specific SLIDING panel remotely

    I'm trying to link to a specific SLIDING panel (not a tabbed
    panel) from a remote link. I'm sure this can be done using
    SpryURLUtils.js as I've successfully achieved the result with
    tabbed panels. There's not as much online information on doing this
    with sliding panels, though, and I've had no luck experimenting on
    my own.
    Can anyone help?
    Here are two example pages of the pages in question:
    http://www.studiohyperset.com/sandbox/aafd/impressionist.php
    http://www.studiohyperset.com/sandbox/aafd/fullsizepgs/impressionist/stillLifeFlowers.htm
    The user launches the second page from the first and should
    be able to get back to the second sliding panel on the first page
    by clicking "RETURN." Right now, when the user clicks "RETURN,"
    s/he returns to the first slide in the sequence.
    Thanks in advance for any help.

    http://foundationphp.com/blog/2008/02/09/spry-tutorial-linking-to-a-non-default-panel/comm ent-page-1/
    Comment 29: David Powers

  • Linking to a specific spry tab in design view

    hi there,
    I am a dreamweaver novice and i only use design view for the most part. I am trying to make a link from some content in one tab to another tab. I looked up many such threads and they say that the spryurlutils.js is to be used. I do not know how and where to insert the script, because that area is uneditable in the code view. Here is the link to the URL.
    http://192.168.17.13/testpagetraining.html
    In the 'About training' tab, in the 2nd paragraph , there are the words "The Partnership".
    I would like to make a link to the 3rd tab "The Partnership" from those words in the first tab.
    Thanks.
    A

    I cannot open the page at the location you specified, it looks like a local server.
    I you want a tutorial on the subject, have a look here http://foundationphp.com/tutorials/spry_url_utils.php

  • Implement an initial state in iframe for rss reader

    Hi,
    I am using the latest spry framework 1.6.1 and have implemented the rssreader in a web page. I have not changed any of the code on how this works but just modified the stylesheet to change its appearance. When the page is first loaded there is no content displaying within the iframe until one of the links from the sub-menu is selected as it should work. I am wondering however if there is a simple way to have an initial screen loaded in the iframe before anything is selected?
    Any help would be much appreciated.

    Just change the src of the iframe?
    <div id="RSSItemContent">
          <iframe id="RSSItemContentIFrame" src=""></iframe>
        </div>

  • 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%"><!-- TemplateBeginEditable
    name="playername1" -->
    <div align="center" class="style3 style5">Player
    name</div>
    <!-- TemplateEndEditable -->
    <p align="center"><!-- TemplateBeginEditable
    name="playerpic1" --><img alt="" name="playerpic" width="180"
    height="245" border="1" id="playerpic" /><!--
    TemplateEndEditable --></p>
    <!-- TemplateBeginEditable name="playerinfo1" -->
    <p align="center" class="style3 style6 style4">Click a
    player name to view their profile. </p>
    <!-- TemplateEndEditable -->
    <p align="center"> </p></td>
    <td width="46%"><p align="center"><!--
    TemplateBeginEditable name="teamphoto1" --><img alt=""
    name="teamphoto" width="250" height="150" border="1" align="top"
    id="teamphoto" /><!-- TemplateEndEditable --></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"><!--
    TemplateBeginEditable name="playername2" --><span
    class="style5">Player name</span><!--
    TemplateEndEditable --></div>
    <p align="center"><!-- TemplateBeginEditable
    name="playerpic2" --><img alt="" name="playerpic" width="180"
    height="245" border="1" id="playerpic2" /><!--
    TemplateEndEditable --></p>
    <!-- TemplateBeginEditable name="playerinfo2" -->
    <p align="center" class="style3 style4 style6">Click a
    player name to view their profile.</p>
    <!-- TemplateEndEditable --></td>
    <td width="46%"><p align="center"><!--
    TemplateBeginEditable name="teamphoto2" --><img alt=""
    name="teamphoto" width="250" height="150" border="1" align="top"
    id="teamphoto2" /><!-- TemplateEndEditable --></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%"><!-- TemplateBeginEditable
    name="playername3" -->
    <p align="center" class="style3 style6 style4">Player
    name</p>
    <!-- TemplateEndEditable -->
    <p align="center"><!-- TemplateBeginEditable
    name="playerpic3" --><img alt="" name="playerpic" width="180"
    height="245" border="1" id="playerpic3" /><!--
    TemplateEndEditable --></p>
    <!-- TemplateBeginEditable name="playerinfo3" -->
    <p align="center" class="style3 style6 style4">Click a
    player name to view their profile.</p>
    <!-- TemplateEndEditable -->
    <p align="center"> </p></td>
    <td width="46%"><p align="center"><!--
    TemplateBeginEditable name="teamphoto3" --><img alt=""
    name="teamphoto" width="250" height="150" border="1" align="top"
    id="teamphoto3" /><!-- TemplateEndEditable --></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%"><!-- TemplateBeginEditable
    name="playername4" -->
    <div align="center" class="style3 style4
    style6">Player name</div>
    <!-- TemplateEndEditable -->
    <p align="center"><!-- TemplateBeginEditable
    name="playerpic4" --><img alt="" name="playerpic" width="180"
    height="245" border="1" id="playerpic4" /><!--
    TemplateEndEditable --></p>
    <!-- TemplateBeginEditable name="playerinfo4" -->
    <p align="center" class="style3 style4 style6">Click a
    player name to view their profile.</p>
    <!-- TemplateEndEditable -->
    <p align="center"> </p></td>
    <td width="46%"><p align="center"><!--
    TemplateBeginEditable name="teamphoto4" --><img alt=""
    name="teamphoto" width="250" height="150" border="1" align="top"
    id="teamphoto4" /><!-- TemplateEndEditable --></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)

  • 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

  • ANN: Linking to non-default Spry tab or panel - tutorial

    Spry 1.6 includes a file called SpryURLUtil.js that makes it
    easy to
    link to a specific tab or panel in a Tabbed Panels or
    Accordion widget.
    I've created a step-by-step tutorial explaining how to use
    it. You can
    find it on my site at the following URL:
    http://foundationphp.com/tutorials/spry_url_utils.php
    David Powers, Adobe Community Expert
    Author, "The Essential Guide to Dreamweaver CS3" (friends of
    ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

    That should be built in, as it is in all PVII Widgets.
    Being how Spry has grown to be such an important part of your
    books and
    other writings, perhaps you would agree (and maybe even be
    able to influence
    Adobe) that what Spry needs is a re-writing rather than
    updates.
    Al Sparber - PVII
    http://www.projectseven.com
    Extending Dreamweaver - Nav Systems | Galleries | Widgets
    Authors: "42nd Street: Mastering the Art of CSS Design"
    "David Powers" <[email protected]> wrote in message
    news:fokosr$l1e$[email protected]..
    > Spry 1.6 includes a file called SpryURLUtil.js that
    makes it easy to link
    > to a specific tab or panel in a Tabbed Panels or
    Accordion widget. I've
    > created a step-by-step tutorial explaining how to use
    it. You can find it
    > on my site at the following URL:
    >
    >
    http://foundationphp.com/tutorials/spry_url_utils.php
    >
    > --
    > David Powers, Adobe Community Expert
    > Author, "The Essential Guide to Dreamweaver CS3"
    (friends of ED)
    > Author, "PHP Solutions" (friends of ED)
    >
    http://foundationphp.com/

  • Xsl for removing specific nodes and modifying one node.

    Hello,
    i have the urgent need to remove specific nodes
    and modify one node in my XML.
    the xml as input :
    <?xml version="1.0" encoding="utf-8"?>
    <PLOT>
      <REQUEST>
        <GET_LAYOUT>
          <PROPERTIES>
            <MAPNAME name="xxxx" />
           </PROPERTIES>
          <DATAFRAME id="MAIN">
            <LAYERLIST>
              <LAYERDEF id="0" visible="false" query="" />
              <LAYERDEF id="1" visible="false" query="" />
              <LAYERDEF id="2" visible="false" query="" />
              <LAYERDEF id="3" visible="false" query="" />
              <LAYERDEF id="4" visible="false" query="" />
              <LAYERDEF id="5" visible="false" query="" />
              <LAYERDEF id="6" visible="false" query="" />
              <LAYERDEF id="7" visible="false" query="" />
              <LAYERDEF id="8" visible="false" query="" />
              <LAYERDEF id="9" visible="false" query="" />
              <LAYERDEF id="10" visible="false" query="" />     
            </LAYERLIST>
            <MAPSERVICELIST>   
              <MAPSERVICEDEF  service="BASEMAP" >
                <LAYERLIST>
                  <LAYERDEF id="2" visible="True" query="" />
                  <LAYERDEF id="1" visible="False" query="" />
                </LAYERLIST>
              </MAPSERVICEDEF>
              <MAPSERVICEDEF service="MAP1">
                <LAYERLIST>
                  <LAYERDEF id="4" visible="True" query="" />
                  <LAYERDEF id="3" visible="True" query="" />
                  <LAYERDEF id="2" visible="True" query="" />
                  <LAYERDEF id="1" visible="False" query="" />
                </LAYERLIST>
              </MAPSERVICEDEF>
            </MAPSERVICELIST>
          </DATAFRAME>
        </GET_LAYOUT>
      </REQUEST>
    </PLOT>
    what i want to have is:
    <?xml version="1.0" encoding="utf-8"?>
    <PLOT>
      <REQUEST>
        <GET_LAYOUT>
          <PROPERTIES>
            <MAPNAME name="xxxx" />
          </PROPERTIES>
          <DATAFRAME id="MAIN">
            <LAYERLIST>
       <LAYERDEF id="6" visible="True" query="" />
                <LAYERDEF id="5" visible="True" query="" />
                <LAYERDEF id="4" visible="True" query="" />
                <LAYERDEF id="3" visible="False" query="" />
    <LAYERDEF id="2" visible="True" query="" />
    <LAYERDEF id="1" visible="False" query="" />       
            </LAYERLIST>
            <MAPSERVICELIST/>   
          </DATAFRAME>
        </GET_LAYOUT>
      </REQUEST>
    </PLOT>
    as you see, <MAPSERVICELIST/>   is empty and <LAYERLIST> contains all <LAYERDEF> of <MAPSERVICEDEF>/<LAYERLIST> 
     The ones  of BASEMAP  are kept unchanged  but the ones of MAP1 are having a new attribute value for id.
    Thanks four your help.
    Regards.

    You can implement very straightforward map in BizTalk like below:
    If you are interested in XSLT of this map, I copied below which visual studio gave me when i validated the map:
    <?xml version="1.0" encoding="UTF-16"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:var="http://schemas.microsoft.com/BizTalk/2003/var" exclude-result-prefixes="msxsl var" version="1.0">
    <xsl:output omit-xml-declaration="yes" method="xml" version="1.0" />
    <xsl:template match="/">
    <xsl:apply-templates select="/PLOT" />
    </xsl:template>
    <xsl:template match="/PLOT">
    <PLOT>
    <REQUEST>
    <GET_LAYOUT>
    <PROPERTIES>
    <MAPNAME>
    <xsl:if test="REQUEST/GET_LAYOUT/PROPERTIES/MAPNAME/@name">
    <xsl:attribute name="name">
    <xsl:value-of select="REQUEST/GET_LAYOUT/PROPERTIES/MAPNAME/@name" />
    </xsl:attribute>
    </xsl:if>
    <xsl:value-of select="REQUEST/GET_LAYOUT/PROPERTIES/MAPNAME/text()" />
    </MAPNAME>
    <xsl:value-of select="REQUEST/GET_LAYOUT/PROPERTIES/text()" />
    </PROPERTIES>
    <DATAFRAME>
    <xsl:if test="REQUEST/GET_LAYOUT/DATAFRAME/@id">
    <xsl:attribute name="id">
    <xsl:value-of select="REQUEST/GET_LAYOUT/DATAFRAME/@id" />
    </xsl:attribute>
    </xsl:if>
    <LAYERLIST>
    <xsl:for-each select="REQUEST/GET_LAYOUT/DATAFRAME/MAPSERVICELIST/MAPSERVICEDEF">
    <xsl:for-each select="LAYERLIST/LAYERDEF">
    <LAYERDEF>
    <xsl:if test="../../../../LAYERLIST/LAYERDEF/@id">
    <xsl:attribute name="id">
    <xsl:value-of select="../../../../LAYERLIST/LAYERDEF/@id" />
    </xsl:attribute>
    </xsl:if>
    <xsl:if test="@id">
    <xsl:attribute name="id">
    <xsl:value-of select="@id" />
    </xsl:attribute>
    </xsl:if>
    <xsl:if test="../../../../LAYERLIST/LAYERDEF/@visible">
    <xsl:attribute name="visible">
    <xsl:value-of select="../../../../LAYERLIST/LAYERDEF/@visible" />
    </xsl:attribute>
    </xsl:if>
    <xsl:if test="@visible">
    <xsl:attribute name="visible">
    <xsl:value-of select="@visible" />
    </xsl:attribute>
    </xsl:if>
    <xsl:if test="../../../../LAYERLIST/LAYERDEF/@query">
    <xsl:attribute name="query">
    <xsl:value-of select="../../../../LAYERLIST/LAYERDEF/@query" />
    </xsl:attribute>
    </xsl:if>
    <xsl:if test="@query">
    <xsl:attribute name="query">
    <xsl:value-of select="@query" />
    </xsl:attribute>
    </xsl:if>
    </LAYERDEF>
    </xsl:for-each>
    </xsl:for-each>
    <xsl:value-of select="REQUEST/GET_LAYOUT/DATAFRAME/LAYERLIST/text()" />
    </LAYERLIST>
    <MAPSERVICELIST>
    <xsl:text> </xsl:text>
    </MAPSERVICELIST>
    <xsl:value-of select="REQUEST/GET_LAYOUT/DATAFRAME/text()" />
    </DATAFRAME>
    <xsl:value-of select="REQUEST/GET_LAYOUT/text()" />
    </GET_LAYOUT>
    <xsl:value-of select="REQUEST/text()" />
    </REQUEST>
    </PLOT>
    </xsl:template>
    </xsl:stylesheet>
    You can highlight the issue if you have any specific one.
    Please mark it as Answer if this answers your question
    Thanks.
    Mo
    The contents I write here is my personal views, not the view of my employer and anyone else.

  • Sprytab Panel code for fade transition.

    Hello,
    I am using the spry panel tabs, and they work great for what I need them for. However I thought it would be cool in this day and time to see if there would be a small script tag to add to the code to get them to fade on click to next tab content.
    Here is the direct link.
    Fantasy Football: DA-DARK_2015
    Here is the spry on that page.
    <div id="TabbedPanels41" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Breaking News</li>
        <li class="TabbedPanelsTab" tabindex="0">Trending Now</li>
        <li class="TabbedPanelsTab" tabindex="0">League Articles</li>
        <li class="TabbedPanelsTab" tabindex="0">Previews</li>
        <li class="TabbedPanelsTab" tabindex="0">Recaps</li>
        <li class="TabbedPanelsTab" tabindex="0">Videos</li>
        <li class="TabbedPanelsTab" tabindex="0">Trash-Talk Video</li>   
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent"><module name="NEWS_ARTICLES" COUNT="10"/> </div>
        <div class="TabbedPanelsContent"><module name="HOT_NEWS"/> </div>
        <div class="TabbedPanelsContent"><module name="ARTICLE"/> </div>
        <div class="TabbedPanelsContent"><module name="FANTASY_PREVIEW"/> </div>
        <div class="TabbedPanelsContent"><module name="FANTASY_RECAP"/> </div>
        <div class="TabbedPanelsContent"><module name="YOUTUBEVIDEO"/>  </div>
        <div class="TabbedPanelsContent"><module name="TRASHTALKVIDEOS"/>  </div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels = new Spry.Widget.TabbedPanels("TabbedPanels41");
    </script>
    Where the <script> tag is, I was hoping something more could go there for the fade effect and have some control over it also would be ideal.
    Thank you

    So is it me or does this github page don't have a direct download of these scripts? I didn't see it if they did, however I was able to grab the effect script and make my own JS file from it.
    and I see some issues with this unfortunately.
    The site
    Fantasy Football: DA-DARK_2015
    Bottom page you can see my test tabs
    Here is my code altered from what as posted for my content and I removed the css file and tab js as I have those pulled already.
    <div id="TabbedPanels1" class="TabbedPanels"> 
      <ul class="TabbedPanelsTabGroup"> 
        <li id="fade1" class="TabbedPanelsTab" tabindex="0" onclick="fade1.start(); fade_content1.start();">My Roster</li> 
    <li id="fade2" class="TabbedPanelsTab" tabindex="0" onclick="fade1.start(); fade_content1.start();">My News</li> 
        <li id="fade3" class="TabbedPanelsTab" tabindex="0" onclick="fade2.start(); fade_content2.start();">My Bye Weeks</li> 
        <li id="fade4" class="TabbedPanelsTab" tabindex="0" onclick="fade3.start(); fade_content3.start();">Pending Waivers</li> 
        <li id="fade5" class="TabbedPanelsTab" tabindex="0" onclick="fade4.start(); fade_content4.start();">All My Leagues</li> 
      </ul> 
      <div class="TabbedPanelsContentGroup"> 
        <div class="TabbedPanelsContent"> 
          <div id="fade_content1"><module name="ROSTER"/>   </div> 
        </div> 
        <div class="TabbedPanelsContent"> 
          <div id="fade_content2"><module name="MY_NEWS" COUNT="10"/></div> 
        </div> 
        <div class="TabbedPanelsContent"> 
          <div id="fade_content3"><module name="MY_BYE_WEEKS"/> </div> 
        </div> 
        <div class="TabbedPanelsContent"> 
          <div id="fade_content4"><module name="MY_PENDING_WAIVERS"/> </div> 
        </div> 
       <div id="fade_content5"><module name="ALL_MY_LEAGUES"/></div> 
        </div> 
      </div> 
    </div> 
    <script src="http://www.dagrafixdesigns.com/DA/spryeffects.js"></script> 
    <script> 
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); 
    var fade1 = new Spry.Effect.Fade("fade1", {duration:3000, from:0, to:100, toggle:false});  
    var fade_content1 = new Spry.Effect.Fade("fade_content1", {duration:3000, from:0, to:100, toggle:false}); 
    var fade2 = new Spry.Effect.Fade("fade2", {duration:3000, from:0, to:100, toggle:false}); 
    var fade_content2 = new Spry.Effect.Fade("fade_content2", {duration:3000, from:0, to:100, toggle:false}); 
    var fade3 = new Spry.Effect.Fade("fade3", {duration:3000, from:0, to:100, toggle:false}); 
    var fade_content3 = new Spry.Effect.Fade("fade_content3", {duration:3000, from:0, to:100, toggle:false}); 
    var fade4 = new Spry.Effect.Fade("fade4", {duration:3000, from:0, to:100, toggle:false}); 
    var fade_content4 = new Spry.Effect.Fade("fade_content4", {duration:3000, from:0, to:100, toggle:false}); 
    </script>
    Probably I am seeing is the actual tab next to the one you click is showing fade effects, I don't want any of the tabs having an effect, just the content.
    Second problem I see is, only one you click to a tab, and then back to the first tab MY ROSTERS, does that content actually fade....only.   Each tab content should fade with tab click as it comes into view.
    Are these fixable, or should I just let it go and focus on another newer platform as in the first post?

  • Change text "link" color only in Spry Tab content area

    I need to have multiple text link colors in my site for light
    and dark background colors. The only regions in my site that have a
    white background are in the Spry Tab Panel content area. I can't
    figure out how to change the text color for text links in the spry
    content only. I tried to add a:link ..etc... to the style sheet,
    but it did not effect anything
    (I also need to clean my style sheet (s). But that comes
    next.
    Here
    is a Link to a Sample Page in my site
    null

    Here is the SpryTabbedPanels style sheet in my site. I can't
    seem to figure out the changes I need to make to effect the content
    area.
    I tried to add the following (see .TabbedPanelsContentGroup
    below)
    a: link {
    color: #0099CC;
    text-decoration: none
    a:active {
    color: #99CC33;
    text-decoration: none
    a:visited {
    color: #0099CC;
    text-decoration: none
    a:hover {
    color: #99CC33;
    text-decoration: underline
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab
    buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container.
    For our
    * default style, this container does not contribute anything
    visually,
    * but it is floated left to make sure that any floating or
    clearing done
    * with any of its child elements are contained completely
    within the
    * TabbedPanels container, to minimize any impact or
    undesireable
    * interaction with other floated elements on the page that
    may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels
    widget, set a
    * width on the TabbedPanels container. By default, the
    TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this
    selector is not
    * necessary to make the widget function. You can use any
    class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
    margin: 0px;
    float: right;
    clear: none;
    width: 82%; /* IE Hack to force proper layout when preceded
    by a paragraph. (hasLayout Bug)*/
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 2px;
    padding-left: 0px;
    /* This is the selector for the TabGroup. The TabGroup
    container houses
    * all of the tab buttons for each tabbed panel in the
    widget. This container
    * does not contribute anything visually to the look of the
    widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in
    this selector is not
    * necessary to make the widget function. You can use any
    class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This
    container houses
    * the title for the panel. This is also the tab "button"
    that the user clicks
    * on to activate the corresponding content panel so that it
    appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1
    pixel down from
    * where it wold normally render. This allows each tab to
    overlap the content
    * panel that renders below it. Each tab is rendered with a 1
    pixel bottom
    * border that has a color that matches the top border of the
    current content
    * panel. This gives the appearance that the tab is being
    drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this
    selector is not
    * necessary to make the widget function. You can use any
    class name you want
    * to style this tab container.
    .TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    background-color: #CCCC99;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    /* This selector is an example of how to change the appearnce
    of a tab button
    * container as the mouse enters it. The class
    "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as
    the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
    background-color: #99CC33;
    color: #000000;
    /* This selector is an example of how to change the
    appearance of a tab button
    * container after the user has clicked on it to activate a
    content panel.
    * The class "TabbedPanelsTabSelected" is programatically
    added and removed
    * from the tab element as the user clicks on the tab button
    containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are
    positioned
    * 1 pixel down from where it would normally render. When the
    tab button is
    * selected, we change its bottom border to match the
    background color of the
    * content panel so that it looks like the tab is part of the
    content panel.
    .TabbedPanelsTabSelected {
    background-color: #FFFFFF;
    border-bottom: 1px solid #EEE;
    color: #000000;
    /* This selector is an example of how to make a link inside
    of a tab button
    * look like normal text. Users may want to use links inside
    of a tab button
    * so that when it gets focus, the text *inside* the tab
    button gets a focus
    * ring around it, instead of the focus ring around the
    entire tab.
    .TabbedPanelsTab a {
    color: black;
    text-decoration: none;
    /* This is the selector for the ContentGroup. The
    ContentGroup container houses
    * all of the content panels for each tabbed panel in the
    widget. For our
    * default style, this container provides the background
    color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in
    this selector is
    * not necessary to make the widget function. You can use any
    class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
    clear: both;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    background-color: #FFFFFF;
    color: #000000;
    a: link {
    color: #0099CC;
    text-decoration: none
    a:active {
    color: #99CC33;
    text-decoration: none
    a:visited {
    color: #0099CC;
    text-decoration: none
    a:hover {
    color: #99CC33;
    text-decoration: underline
    /* This is the selector for the Content panel. The Content
    panel holds the
    * content for a single tabbed panel. For our default style,
    this container
    * provides some padding, so that the content is not pushed
    up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this
    selector is
    * not necessary to make the widget function. You can use any
    class name you
    * want to style the Content container.
    .TabbedPanelsContent {
    padding: 4px;
    /* This selector is an example of how to change the appearnce
    of the currently
    * active container panel. The class
    "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element
    as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules
    above so that the
    * TabbedPanels widget renders with its tab buttons along the
    left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will
    have to be made
    * to switch a horizontal tabbed panels widget to a vertical
    tabbed panels
    * widget, is to use the "VTabbedPanels" class on the
    top-level widget
    * container element, instead of "TabbedPanels".
    /* This selector floats the TabGroup so that the tab buttons
    it contains
    * render to the left of the active content panel. A border
    is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #CCCC99;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    /* This selector disables the float property that is placed
    on each tab button
    * by the default TabbedPanelsTab selector rule above. It
    also draws a bottom
    * border for the tab. The tab button will get its left and
    right border from
    * the TabGroup, and its top border from the TabGroup or tab
    button above it.
    .VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    /* This selector disables the float property that is placed
    on each tab button
    * by the default TabbedPanelsTab selector rule above. It
    also draws a bottom
    * border for the tab. The tab button will get its left and
    right border from
    * the TabGroup, and its top border from the TabGroup or tab
    button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #CCCC99;
    border-bottom: solid 1px #999;
    /* This selector floats the content panels for the widget so
    that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;

  • Spry Panel State - open/closed ?

    Hello Guys/Gals,
    I don't want to re-invent the wheel here if at all possible...
    Has anyone ever included the Spry Collapsible Panel in menu by PHP Includes?
    Here is what I need to accomplish, the spry panels are in 1 file which is included throughout the entire site with php includes.
    I need the open/closed state to be remembered - so if you open panel #2 and click a link, you end up on that page with only panel #2 open.
    If the user closes that panel, then the panel is closed on any page visited.
    Tracking user with cookies or what?
    Can someone point me to any example code for this?
    Thanks,
    RD

    Does this help:
    http://www.spry-it.com/examples/spry-widget-cookie-history/
    http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel

  • 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

  • Help with putting links on graphics in spry accordion

    I have a sidebar with a spry accordian. Each content area has an image in it. I want users to be able to click on the image (after the accordian is open to it) and link to another page. But I can't find anyway to attach a link to the image, inside the accordian. Please Help!!
    Thank you.

    Also, after a panel is opened and clicked on, it closes and the first panel opens. I have compared the code on the style sheet with the code from Backyard furniture but it looks identical. Where is the code that tellls a panel to stay open?
    There are three accordion panels for the backyardfurniture.com.au menu systems. Each page uses a unique set of instructions within the constructors of each panel.
    For the home page the constructors (near the bottom of each document) look like
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, useFixedPanelHeights: false, defaultPanel: 0 }); /* open 1st panel */
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false, useFixedPanelHeights: false, defaultPanel: -1 }); /* all panels closed */
    var Accordion3 = new Spry.Widget.Accordion("Accordion3", { useFixedPanelHeights: false, useFixedPanelHeights: false, defaultPanel: -1 }); /* all panels closed */
    For the Product->Your Backyard Furniture page it looks like
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, useFixedPanelHeights: false, defaultPanel: 2 }); /* open 3rd panel */
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false, useFixedPanelHeights: false, defaultPanel: 0 }); /* open 1st panel */
    var Accordion3 = new Spry.Widget.Accordion("Accordion3", { useFixedPanelHeights: false, useFixedPanelHeights: false, defaultPanel: -1 }); /* all panels closed */
    You can follow the other pages and see the same kind of constructors for each of the pages.
    Gramps

  • Using Spry Panels & Browser BackButton

    Hi,
    I successfullly programmed opening a Spry panel from a remote
    link. However, I have run into another issue. Say a user clicks on
    a link appearing on a panel, for instance, with a tab index of 2
    (IOW, not the default panel), is taken to the page to which the
    link is referring, and then hits the browser back button to get
    back to the panel where he or she was. I know it is a redirect
    situation, but don't know how to program it. Can you all help me
    with this?
    Thanks,
    KT Pardue

    This document contains JavaScript code for a widget that no
    longer exists. If you don't remove
    the code, the browser might display JavaScript errors when
    loading the page. Would you like
    Dreamweaver to find all instances of this code for you?
    var sp1 = new Spry.Widget.SlidingPanels("PANELS",{
    duration:850, fps: 60, defaultPanel:0 });
    Yes No
    Just above the end-body tag I have the script:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",{
    duration: 350, useFixedPanelHeights: false, defaultPanel: 0 });
    The only ID I have is " <DIV id="Accordion1"
    class="accordian_div Accordion">" as a container for the panels.
    Should I
    change an ID name or a var name ? The SlidingPanels work
    fine. It's just that I'm using the "open recent files automatically
    on startup" sort of option and each page displays the above
    error and stops, until I reply to it, then continues to load the
    next file.
    - GR

Maybe you are looking for