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.
AI 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...
ThanksAdd 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 youSo 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
nullHere 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,
RDDoes 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&panel=3#TabbedPanelsTab&Accordion1" title="Disappeared Children" target="_self"><img src="images/homeArgentina.gif" alt="Argentina website" /></a><br />
<em>Website (early project):<br />
“Disappeared Children: We Search for Them”</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 PardueThis 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
-
Safari won't open it unexpectedly quits
Can someone please help me, I can't open Safari, immediately a message comes up that it unexpectedly quit, tried several times by clicking reopen but the same message pops up. By clicking report, I found this: Process: Safari [411] Path:
-
Burning DL, doesn't recognise the disk?
Morning I was just starting a disk off this morning, before I went to work, and it's 6.6GBs. I have a DL burner, and I bought a Verbatim DL disk yesterday. I put the disk in my drive and pressed "Burn Disk". What happened! The iDVD programme said tha
-
Transfer files from old macbook pro to new macbook pro using mavericks
I have called Apple support about 5 times about this and have been given 3 or 4 different response none of them work. I do not have an ethernet cable. The computers are on same network. I have time capsule not yet set up. Apple support told me to u
-
How can I get microsoft feeds for microsoft at home and at work newsletter?
I can't get the "microsoft at home and at work newsletter" It keeps asking me to register
-
Unreasonable space requirements for syncing photos to nano...
I have a 1st generation 4GB nano, with up to date firmware (version 1.3.1, Mac formatted). I'm using iTunes version 7.6 (29) and having trouble syncing photos (from iPhoto) to my nano. I have configured iTunes to sync photos from only one, relatively