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/

Similar Messages

Set Default Spry Tabbed Panel As Close Until Mouse Over

Dear All,
Is there a way to set the default spry tabbed panel to be closed when the page load untilI mouse over it??
here is the link to my page http://www.senhuiauto.com/model_code_link.html. As you can see, it roll down by default.
How to fix??
Below is my SpryTabbedPanel.js
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.bindings = [];
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
   this.defaultTab = 0;
else
   var count = this.getTabbedPanelCount();
   if (this.defaultTab >= count)
    this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
   children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
   continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
   return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
   return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
   if (ele == arr[i])
    return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
   element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
   element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.ENTER_KEY = 13;
Spry.Widget.TabbedPanels.SPACE_KEY = 32;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
return true;
this.showPanel(tab);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
   var child = root.firstChild;
   while (!stopTraversal && child)
    stopTraversal = this.preorderTraversal(child, func);
    try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
   if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
    var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
    if (tabIndexAttr)
     tabIndexEle = node;
     return true;
    if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
     tabAnchorEle = node;
   return false;
if (tabIndexEle)
   this.focusElement = tabIndexEle;
else if (tabAnchorEle)
   this.focusElement = tabAnchorEle;
if (this.focusElement)
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
   if (tabs[i])
    this.removeClassName(tabs[i], this.tabSelectedClass);
   if (panels[i])
    this.removeClassName(panels[i], this.panelVisibleClass);
    panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);

You may be better off asking this question over at the forum dedicated to the Spry Widgets:
Spry forum.

Link to non-default Tabbed Panel

I'm looking to set up a link from one page of a site to
another. The destination page has a TabbedPanels widget. I would
like to be able to have the link bring the user to a non-default
TabPanel. I have found some information about doing this from the
within same page, but not from another page in the site (or any
external url).
The page is currently here:
http://staging.smudgedgraphics.com/whitelamb/rates.html
I would like to link to:
http://staging.smudgedgraphics.com/whitelamb/specials.html
[to the Cottages Tab]
Any help would be appreciated.
Thanks!

I've read through that page several times, and the
information is great, but for a more digested version of what you
want to achieve, you can also check out
Opening
Specific Tabs and Accordion Panels from Another Page
Nicely laid out on how to use the SpryURLUtils.js file to
achieve exactly what you are looking for.

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;

Linking text on one spry tab to another spry tab on the same page

Before I get to my question, let me say that I have already searched the forum and did not find anything that helped me out. I found information about doing this in CS3. I have CS5. While it is probably very similar, I don't know javascript, compounding my confusion.
My page in question is http://www.abilityaxis.com/expo.html
The page uses spry tabs. I have two places on the Employers tab that I wish to link to the Exhibitors tab and the Program tab respectfully. Since I haven't figured out how to do this yet, I created anchors to the top of the Employers tab, so that users can just click on the required tab. Not effecient.
What I need is plain english explaination.
Can you please help me?
thanks in advance,
Deb

No, unfortunately, that doesn't work.
I had tried almost the same thing this morning after I got your first reply.
<a href="#exhibitors" onclick="TabbedPanels1.showPanel(1);">Exhibitors tab above</a>
and
<a href="#program" onclick="TabbedPanels1.showPanel(1);">Exhibitors tab above</a>
(The Expo anchor is acutally at the top of the Expo page, not in the tabs.)
I tried a couple of other things, which now seem silly, but they obviously didn't work either.
I really appreciate your help.
You have been so helpful. I am just happy I am getting onto the right tab.
Regards,
deb

Seperating Spry Tabs and Panel.

I know this is asked a lot. And on some topic someone said it was impossible.
But i cant believe it cant be done.
I posted the same message here: http://forums.adobe.com/message/2694106
But because no one awnsers to it, and i believe it IS possible to alter the Spry code so it works in a seperate way im posting this as a new topic.
I have a site already and hate to change everything just because i like to use Spry tabbed panels.
I now have this set up with div floats.
HEADER
MENU CONTENT
FOOTER
I already have this working code in the Menu div. The buttons work and the code is ready for Spry if i get the seperate content working.
<div id="WNavigation">
         <div id="TabbedPanels1" class="VTabbedPanels">
            <ul class="TabbedPanelsTabGroup">
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
          <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Home">
          <a href="/index.html" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
          </li>
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Info a{display:block;color:transparent;} #Info a:hover{background-position:left bottom;}a#Info {display:none}</style>
          <table id="Info" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Info">
          <a href="/Info.html" title="Info" style="background-image:url(Buttons/Info.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
          </li>
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Gallerij a{display:block;color:transparent;} #Gallerij a:hover{background-position:left bottom;}a#Gallerij {display:none}</style>
          <table id="Gallerij" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Gallerij">
          <a href="/gallerij.html" title="Gallerij" style="background-image:url(Buttons/Gallerij.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
        </li>
          <li class="TabbedPanelsTab" tabindex="0">
          <style>#Contact a{display:block;color:transparent;} #Contact a:hover{background-position:left bottom;}a#Contact {display:none}</style>
          <table id="Contact" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Contact">
          <a href="/Contact.html" title="Contact" style="background-image:url(Buttons/Contact.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
        </li>
        </ul>
        </div>
     </div>
I put animated buttons on it. And if i ever get the seperate Content div working i need to change the links to open the panel instead of a normal URL.
What i want to do next is put the TabbedPanelsContent into the Content div instead of the Menu div.
But everything i tried didnt work out right.
The TabbedPanelsTabGroup is now completly in the Menu div and i wish someone can post alternate code that i can put in the Content div.
So i am not using this code right now: (my page works without it for now)
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
Please let someone make the content and tabs seperate!!!

WRobN1 wrote:
I know this is asked a lot. And on some topic someone said it was impossible.
But i cant believe it cant be done.
In a previous post I did say that you cannot separate the tabs from the panel. By that I really meant that you must keep the structure, including ID's and CLASSes as follows for the widget to work in its standard format.
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
If you want to use the DIV <div id="TabbedPanels1" class="TabbedPanels"> as your mainContent area, UL <ul class="TabbedPanelsTabGroup"><div class="TabbedPanelsContentGroup"> as your menu and DIV as your content area, then that is OK.
Using style rules you can style the tabs as you wish as well as the content area. You can move the content area down from the tabs using the following style rule
.TabbedPanelsContentGroup {
   margin-top: 150px;
As said, it does not matter how you style the widget, the structure must stay intact.
WRobN1 wrote:
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
          <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr><td style="padding-right:0px" title ="Home"><a href="/index.html" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td></tr></table></li>
When you do use the mark-up as above, please remember that by definition the <STYLE>-tag must be within the <HEAD>-area and try to use DIV's, SPAN's etc instead of using tables.
I hope the above helps.
Ben

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

Spry Tabs + Collapsable Panels

Hello,
I have tabs within collapsable panels and in firefox and IE you can see the tabs even if that panel is not open. Any ideas on how to fix this situation?
Thanks, here's my example:
http://www.robvanwyen.com/cv/rfblair/
Best,
Rob

V1 Fusion I was going through Spry forums and saw a problem
that another user had similiar to mine and was wondering if you
could offer some support. I am using the Tabbed panel from Spry and
can only get 5 tabs across before it starts a new tab below the
others. I was looking thru CSS file but not sure what can be
changed so I can allow 6 tabs accross. I'd send you link but it's
behind a firewall. I can send you a screen shot with email address.
Any help greatly appreciate it!!!!!!

Multiple sets of Spry Tabbed Sliding Panels?

I have my code set up for one sliding panel set with three tabs but I want to copy that set and create another set of the same 3 sliding tabs right below it with different content. However, when I copy it to the next set, clicking the second set of tabs still causes the first sets sliding Panel to slide. Furthermore, a few elements of the css are no longer being read for the second set, including the script in the .SlidingPanels that hides any of the text box outside of the specified dimensions.
Attached are a txt file for my html and css if that helps.
Any help on this would be greatly appreciated.
Thanks!
[Moved to Spry forum by moderator]

The constructor appears at the bottom of your sliding panel code, in exactly the format that Arnout has shown. You do not need to go into the javascript file for it.
But the first thing I think you need to do is to make sure that you match the classes (and format) you are using with the classes per your sliding panels style sheet.
Here is the essential markup (your content is not here; this is based on a plain example widget):
<div style="margin: 0 auto; width: 350px; border: solid 1px red;">
<a href="#" onclick="sp.showFirstPanel();">First Panel</a> | <a href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> | <a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#" onclick="sp1.showLastPanel();">Last Panel</a> | <a href="#" onclick="sp1.showPanel('p4');">Panel 4</a>
<div id="panelwidget" class="SlidingPanels" style="margin: 0 auto;">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">Panel 1</div>
    <div class="SlidingPanelsContent" id="p2">Panel 2</div>
    <div class="SlidingPanelsContent" id="p3">Panel 3</div>
    <div class="SlidingPanelsContent" id="p4">Panel 4</div>
    <div class="SlidingPanelsContent" id="p5">Panel 5</div>
    <div class="SlidingPanelsContent" id="p6">Panel 6</div>
        </div>
    </div>
    <script type="text/javascript">
   var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
Note that the ID of the <div id="panelwidget" class="SlidingPanels"> matches the "panelwidget" in the constructor
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
For your second panelgroup, make <div id="panelwidget_01" class="SlidingPanels"> and change the constructor to
var sp2 = new Spry.Widget.SlidingPanels("panelwidget_01");
And of course the onclicks in the nav area should change for the second sliding panels set to use sp2 instead of sp1.
I hope that Arnout will correct me if I have got it wrong!
Best,
Beth

Link to spry tab or accorion not working

I have gone to http://foundationphp.com/tutorials/spry_url_utils.php by Mr.Powers (great suff by the way!) and tried using the code in the tutorial just as described to create links to non-default tabs or accordions on other pages but not having any luck. The link takes me to the page, but not the target tab or accordion - whichever I try.
Also, once I change the scrip code at the bottom of the page, it causes the tab or accordion panels to display as a continuation down the page, not contained within the element. As if a div tag were left out or something.
First I copied SpryURLUtils.js from the Spry 1.6 release into the SpryAssets folder.
(The 2 pages shown here are working test pages within my site for an accordion panel link).
Here are the locations and code I entered into this page ( www.wilsonchiropractic.net/Research/Copy_CurrentLit.html )
for a link to the bottom unopened (H1N1...) accordion panel:
At the end of the head section:
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
Then at the end of the page withing the script tags, I modified the Accordion1 variable identifier to:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0});
(this is the code that makes the entire panel set, accordion or tabs, to continue out of the panel container).
Lastly this is the link from the starting page - ( http://www.wilsonchiropractic.net/LinkTest.html ):
<a href="http://www.wilsonchiropractic.net/Research/Copy_CurrentLit.html?Panel=1#Addordion1">test link to research panel</a>
There are a number of other links to tabs or other accordions I need to create. I would assume if I can get this coding figured out, I can get the others to work.
Please Help!! Thank you!! --Jeff

One obvious problem is this:
<link href="../SpryAssets/SpryAccordion2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
The link to SpryURLUtils.js is pointing to the wrong location. It should be this:
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>

Need help linking spry tabbed panel from external page

Could use some help. I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck. When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable. This is a key feature I need in a new site being developed.

I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck.
Have you tried http://foundationphp.com/tutorials/spry_url_utils.php ?
When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable.
Depending on what the code looks like, it can do all sorts of things.
Please be reminded that the best way for us to help you is by you supplying a link to your site with a one sentence description of the problem.
Gramps

Internal Links in Spry tabbed Panels

Does anyone know how to create internal links from tabbed
panel to tabbed panel in a Spry tabbed panel asset?
I used a tabbed panel layout for articls on my site, with
each subsection of the article in a different tabbed panel.
I want to put a link at the bottom of each tabbed panel's
content allowing the reader to go to the next tabbed panel's
content.
I know the reader can click on the tabs at the top, but I
want them to be able to click a "next page" button
at the bottom of each tab as well.
When I place a named anchor within the content of a tab's
content and link to it from a word within another tab's content,
the link does not work. I've tried it in Safari, Firefox, and IE.
Doesn't work in any.
If there's a Spry/Ajax expert out there, could you come up
with a work around? Internal links within Spry Tabbed Panels would
be very useful.
An example of using the Spry tabbed panel format for a news
article is here:
http://www.avalonwine.com/Zanzibar-Cellars.php
Thanks for help anyone can offer.
Jean

I am having the exact same problem. I would like to link an
image from my "Home" tab to the top of my "Projects" tab. But the
image link to the Named Anchor at the top of the "Projects" tab
does not work. Named anchors within a tabbed panel work fine. I'm
just not able to cross between tabs. Is there some script we can
add to the link to invoke the Spry tabbed panel widget? thanks,
Jen

Simple (?) question about Spry tabbed panel

Hi, I'm a bit of a noob at DW and am wondering if there's any way to open a link from within a Spry tabbed panel, and have the content load in the same panel.
I would have thought this would be simple, or even default behavior, but every target I try opens a new browser window or just loads it over everything in the current window.
Any advice would be greatly appreciated.

See if this article by David Powers is any help towards getting what you're after:
http://foundationphp.com/tutorials/spry_url_utils.php
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap

Help with spry tabbed menu bar

Hi.
I need help with the spry tabbed menu panel (horizontal) It
works fine in dreamweaver ( pressing f12 ) but when i goto my
website www.so-nouveau.com it puts it all over and not in boxes
either just the writing.
I ahve double checked all uploading is correct and files are
located but it wont work.
Here is what i did >
new> html> 1 column elastic,centered. i have not
changed any other settings at all. Do i need to change the doc type
or css layout in the drop down menus before starting (doc
type=xhtnl 1.0 transitional and layout css=add to head)
I am still on cs3 , does this matter ? or is 4 easier ?
any help out there guys is much appreciated but please bear
in mind that i am not a web designer or pc expert at all , this is
just me building my own site , until nowit has been an enjoyable
experience but grrrrrr when it dont work
Thanks
Jay

so-nouveau wrote:
> Hi.
> I need help with the spry tabbed menu panel (horizontal)
It works fine in
> dreamweaver ( pressing f12 ) but when i goto my website
www.so-nouveau.com it
> puts it all over and not in boxes either just the
writing.
Please post links directly to the page having an issue. I saw
no tabs on the home page, but I noticed that there is a link on the
bottom of the page to this page that has a Spry tab on it:
http://www.so-nouveau.com/test%208.html
> I ahve double checked all uploading is correct and files
are located but it
> wont work.
That page refers to a Spry JavaScript file and a Spry CSS
file, which should be at the following locations but are not
present:
http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.js
http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.css
Make sure you upload the SpryAssests folder and see where
you're at after that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry tabbing and URL variables

Hi there,
Thanks to these forums I can now link to my lovely Spry tabs.
However, I'm no longer able to pass my page variable by URL and I
was wondering if there was a work-around for this. My basic link is
as follows:
<a href="index.cfm?ID=#ID#"
onclick="TabbedPanels1.showPanel('third'); return
false;">#eventName#</a>
The link is tied to a specific database entry and, when
clicked, should load that entry on the panel. The entry is to
display on the third panel. While the panel links fine, the
database entry isn't called as the variable isn't passed.
Any ideas how I can best this little problem?
Thanks!

Kibbage.TEESO wrote:
The biggest reason I try to not use URL parametersis that URL paramteres open you to SQL injection attacks.
No more then Form variables do. If you think that form variables are somehow magically more secure from injection or any other type of tampering then url variables then you have a very week understanding of Internet technology.
It is no harder for me to modify a form [POST] variable then it for me to modify a url [GET] variable on any request I send to your server. If your server trusts the form variables and does not take precautions; then your application is open to SQL injuection and other hacks.

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

Similar Messages

Maybe you are looking for