Spry Tabs Panels: Limit to number of tabs?
I have set up simple tabs on my site to separate a weekly
newsletter. Across my page, there should be room for at least 10
tabs, but when I reach placing 5 tabs on the page, the content
mysteriously disappears! The first time this happened, I thought I
might have accidentally caused this, but then it happened a second
time. I had been very careful not to mess with the code, mainly
using the properties panel to add tabs, then clicking in the
preview window to paste content. So I can see all the tabs, but the
content disappears. So I have to start all over again by adding a
new Spry tabs widget.
http://www.austinhighschoolptsa.com/weekly.htm
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!!!!!!
Similar Messages
-
Spry tabbed panels as menu system
Hi,
This is actually for Dreamweaver CS6. What I'm trying to do is use spry tabbed panels as horizontal my menu system. I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected. I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
My current problems are these:
I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
Any help or suggestions would be greatly appreciated!!
Below is my tabbed panels css:
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #000;
width: 1000px;
height: 25px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 21px;
margin: 0px 0px 0px 0px;
background-color: #000;
list-style: none;
border-left: solid 0px #000;
border-bottom: solid 0px #000;
border-top: solid 2px #000;
border-right: solid 0px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 1000;
height: 15px;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
.TabbedPanelsTabHover {
background-color: #D31145;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabSelected {
background-color: #D31145;
border-bottom: 0px solid #D31145;
color: #FFFFFF;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 2px #D31145;
border-bottom: solid 2px #D31145;
border-top: solid 2px #D31145;
border-right: solid 2px #D31145;
background-color: #FFFFFF;
visibility: visible;
width: 50%;
position: inherit;
height: auto;
/* 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 {
overflow: hidden;
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
THe Javascript for my tabbed panels are below:
// SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.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.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
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.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
var el = false;
if (key == this.previousPanelKeyCode && i > 0)
el = tabs[i-1];
else if (key == this.nextPanelKeyCode && i < tabs.length-1)
el = tabs[i+1];
if (el)
this.showPanel(el);
el.focus();
break;
return this.cancelEvent(e);
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) { self.onTabClick(e, tab);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);
})(); // EndSpryComponentNote - I agree with Nancy
As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from 21px to 18px.
.TabbedPanelsTab {
-moz-user-select: none;
background-color: #000000;
border-color: #000000;
border-left: 0 solid #000000;
border-style: solid;
border-width: 2px 0 0;
cursor: pointer;
float: left;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
height: 15px;
list-style: none outside none;
margin: 0;
padding: 4px 18px;
position: relative;
top: 0;
Don't use dummy text without normal length text with breaks -
Spry tabbed panels - Different Hover Class for each tab
Already posted this in the general Dreamweaver section, but just realized there was a specific Spry section. So, my apologies for the repost.
I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.
However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.
Any help?
Thanks.Just in case you did not notice the announce at the top of this forum's main page, I have copied it here.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Yoru question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.
by Arnout Kazemier at Oct 23, 2009 2:47 PM
landon_tc wrote:
Actually, I do remember posting that, and have updated it with what worked for me. However, I could not recall posting it in a specific ajax spry forum, so I assumed I just posted in the general forum. Hence the current situation.
Yeah and my name is not Ben Pleysier.
landon_tc wrote:
Any help with the current problem?
Please have a look at this thread http://forums.adobe.com/message/2662019#2662019
I hope this helps.
Ben Pleysier -
I have Spry Tabbed panels and all my content is suddenly displaying in the first, default tab. Also, the turquoise "Spry Tabbed Panels" is missing from the top of my widget. This has happened on three different pages so far, and all I have found is that I must insert a new tabbed panel. My <div> codes all match up, so I'm stumped. Any help would be really appreciated.
Source Code in this post
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/base_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>BCCA Library - Abstracts</title>
<meta name="Description" content="Designed and developed by Codify Design Studio - codifydesign.com" />
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceParam name="Content Left" type="boolean" value="true" -->
<!-- InstanceParam name="Content Right" type="boolean" value="true" -->
</head>
<body>
<div class="bannerArea">
<div class="container">
<div class="bannernav"><a href="http://www.bccancer.bc.ca/" target="_blank" >BC Cancer Agency</a> • <a href="http://POD" target="_blank" >POD</a> • <a href="http://www.phsa.ca" target="_blank" >PHSA </a>• <a href="mailto:[email protected]?subject='Contact Us' from Library Links" >Contact Us</a></div>
<div class="toplogo"><a href="index.html" target="_parent"><img src="images/liblinks_infobase.png" alt="Library Links Home Page" hspace="135" border="0" /></a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="topnavigationArea">
<div class="container">
<div class="topnavigationgroup">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="databases.html" class="MenuBarItemSubmenu">Databases</a>
<ul>
<li><a href="databases.html">All Databases</a></li>
<li><a href="remote.html">Remote Access</a></li>
<li><a href="mobile.html">Mobile Resources</a></li>
<li><a href="training_bcca.html">Training</a></li>
<li><a href="autoalerts.html">AutoAlerts</a></li>
<li><a href="primal.html">Primal Pictures</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="journals.html">Journals</a>
<ul>
<li><a href="journals.html" class="MenuBarItemSubmenu">Journals</a>
<ul>
<li><a href="http://atoz.ebsco.com/home.asp?Id=BCCA230F" target="_blank">BCCA A-Z e-journals</a></li>
<li><a href="http://bcca.andornot.com/results.aspx?TN=bccacat&QY=find%20(Format%20ct%20Serial)%20not%20 (Status%20%3DDiscarded%20%2F%20%3DMissing)%20and%20(Location%20ct%20library)&RF=WebBriefDa te&DF=WebFull&BU=http%3A%2F%2Fbcca.andornot.com%2Fdefault.htm&MR=10&NP=255&RL=0&DL=0&MF=bc cawpmsg.ini&AC=QBE_QUERY" target="_blank">Print Journals BCCA</a></li>
<li><a href="http://toby.library.ubc.ca/ejournals/ejournals.cfm/" title="UBC Print and E-journals" target="_blank">UBC Journals</a></li>
<li><a href="mailto:[email protected]?subject=Request articles" title="Request articles from BCCA Library">Request Articles</a></li>
</ul>
</li>
<li><a href="ebooks.html">E-books</a></li>
<li><a href="abstracts.html">Abstracts/Conferences</a></li>
<li><a href="remote.html">Remote Access</a></li>
<li><a href="mailto:[email protected]?subject=Request articles">Request Articles</a></li>
</ul>
</li>
<li><a href="refworks.html">RefWorks</a></li>
<li><a href="catalogues.html" class="MenuBarItemSubmenu">Catalogues</a>
<ul>
<li><a href="catalogues.html">Catalogues</a></li>
<li><a href="http://bcca.andornot.com/" title="BCCA Library Catalogue" target="_blank" class="MenuBarItemSubmenu">BCCA</a>
<ul>
<li><a href="http://bcca.andornot.com/topics.htm" title="Automated Searches" target="_blank">Popular Topics</a></li>
<li><a href="ebooks.html" target="_blank">E-books</a></li>
<li><a href="http://tinyurl.com/4jmvwpn" title="Books added this month" target="_blank">BCCA New Books</a></li>
</ul>
</li>
<li><a href="http://library.ubc.ca/" title="UBC Library Catalogue" target="_blank" class="MenuBarItemSubmenu">UBC</a>
<ul>
<li><a href="http://toby.library.ubc.ca/ejournals/ejournals.cfm/" title="UBC Print and E-journals" target="_blank">UBC Journals</a></li>
<li><a href="http://webcat2.library.ubc.ca/vwebv/searchBasic/" title="UBC Books & more" target="_blank">UBC Books</a></li>
<li><a href="http://services.library.ubc.ca/borrowing/library-cards/" target="_blank">UBC Library Cards</a></li>
<li><a href="http://www.it.ubc.ca/cwl/homelink.shtml/" title="Campus Wide Login" target="_blank">Campus Wide Login</a></li>
<li><a href="http://www.library.ubc.ca/home/proxyinfo/" title="Connect from Home" target="_blank">VPN / EZ Proxy</a></li>
<li><a href="mailto:[email protected]?subject=Request Articles" title="Request from BCCA Library">Request Articles</a></li>
</ul>
</li>
<li><a href="http://library.sfu.ca/" title="SFU Library Catalogue" target="_blank">SFU</a></li>
<li><a href="http://www.bcit.ca/library/" title="BCIT Library Catalogue" target="_blank">BCIT</a></li>
<li><a href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=nlmcatalog" title="National Library of Medicine Catalogue" target="_blank">NLM (U.S.)</a></li>
<li><a href="http://library.unbc.ca/" title="UNBC Library Catalogue" target="_blank">UNBC </a></li>
<li><a href="http://www.ubc.ca/okanagan/library/welcome.html" title="UBC Okanagan Library" target="_blank">UBC Okanagan</a></li>
<li><a href="http://library.uvic.ca/" title="U Vic Library Catalogue" target="_blank">U Victoria</a></li>
<li><a href="http://www.vpl.ca/" title="Vancouver Public Library" target="_blank">Vancouver Public </a></li>
</ul>
</li>
<li><a href="professional.html" class="MenuBarItemSubmenu">Professional Practice</a>
<ul>
<li><a href="abstracts.html">Abstracts/Conferences</a></li>
<li><a href="admin.html">Administration</a></li>
<li><a href="guidelines.html">Cancer Guidelines</a></li>
<li><a href="nursing.html">Nursing</a></li>
<li><a href="nutrition.html">Nutrition</a></li>
<li><a href="pharmacy.html">Pharmacy</a></li>
<li><a href="physicians.html">Physicians</a></li>
<li><a href="psychosocial.html">Psychosocial</a></li>
<li><a href="rt.html">RT / Physics</a></li>
<li><a href="researchers.html">Researchers</a></li>
<li><a href="writers.html">Writing & Authors</a></li>
</ul>
</li>
<li><a href="training_bcca.html" class="MenuBarItemSubmenu">Training</a>
<ul>
<li><a href="training_bcca.html" class="MenuBarItemSubmenu">Training Home Page</a>
<ul>
<li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
<li><a href="training_ac.html">AC Training</a></li>
<li><a href="training_csi.html" title="CSI Training">SAHCSI Training</a></li>
<li><a href="training_fvc.html">FVC Training</a></li>
<li><a href="training_vc.html" title="VC Training">VC Training</a></li>
<li><a href="training_vic.html">VIC Training</a></li>
</ul>
</li>
<li><a href="https://edreg.cw.bc.ca/phsaedcalendar/Home.aspx" target="_blank">Learning Hub</a></li>
<li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
<li><a href="primal.html">Primal Pictures</a></li>
</ul>
</li>
<li><a href="library.html" class="MenuBarItemSubmenu">Library Services</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Contacts & Info</a>
<ul>
<li><a href="../Documents/VC_Staff_Information_Sheet.pdf">VC - Vancouver</a></li>
<li><a href="../Documents/VIC_Staff_Information_Sheet.pdf">VIC - Victoria</a></li>
<li><a href="../Documents/SAHCSI_Staff_Information_Sheet.pdf">SAHCSI - Kelowna</a></li>
<li><a href="../Documents/FVC_Staff_Information_Sheet.pdf">FVC - Surrey</a></li>
<li><a href="../Documents/AC_Staff_Information_Sheet.pdf">AC - Abbotsford</a></li>
<li><a href="../Documents/CN_Staff_Information_Sheet_Library.pdf">CN - Prince George</a></li>
<li><a href="http://www.bccancer.bc.ca/PPI/Library/Contacts.htm" target="_blank">Library webpage</a></li>
</ul>
</li>
<li><a href="mailto:[email protected]?subject=Request a Search" title="Request a Search">Request a Search</a></li>
<li><a href="mailto:[email protected]?subject=Request Article(s)" title="Request Articles">Request Articles</a></li>
<li><a href="http://www.bccancer.bc.ca/PPI/RecommendedLinks/default.htm" target="_blank">Recommended Websites</a></li>
<li><a href="autoalerts.html" title="AutoAlert Searches">AutoAlert Searches</a></li>
<li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
<li><a href="pamphlets.html" title="May need an install from IMIT">Pamphlets Database</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="copyright.html" title="Copyright">Copyright</a></li>
<li><a href="patients_reading.html">What patients are reading</a></li>
<li><a href="patients.html" title="Services for Patients">Services for Patients</a></li>
<li><a href="archives.html">Archives</a></li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;"> </div>
</div>
</div>
<div class="contentArea">
<div class="container">
<!-- InstanceBeginEditable name="Content Left" -->
<div class="contentleft">
<h1>Abstracts and Conferences</h1>
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"> AACR</li>
<li class="TabbedPanelsTab" tabindex="0"> ASCO</li>
<li class="TabbedPanelsTab" tabindex="0"> ASH</li>
<li class="TabbedPanelsTab" tabindex="0"> ASTRO</li>
<li class="TabbedPanelsTab" tabindex="0"> CARO</li>
<li class="TabbedPanelsTab" tabindex="0"> ECCO</li>
<li class="TabbedPanelsTab" tabindex="0"> ESMO</li>
<li class="TabbedPanelsTab" tabindex="0"> ESTRO</li>
<li class="TabbedPanelsTab" tabindex="0"> ISPOR</li>
<li class="TabbedPanelsTab" tabindex="0"> San Antonio </li>
<li class="TabbedPanelsTab" tabindex="0"> UICC</li>
<li class="TabbedPanelsTab" tabindex="0"> Finding and Citing</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<h2>AACR - <a href="http://www.aacr.org/" target="_blank">American Association for Cancer Research</a></h2>
<p>These abstracts are available in two places - from the <strong>AACR</strong> website and from the journal <strong>Cancer Research.</strong></p>
<p> </p>
<p><strong>1. Cancer Research. 2009-present</strong>. </p>
<blockquote>
<p>These abstracts were published in the journal <em>Cancer Research</em>. They can be downloaded from the journal to RefWorks.
Use Advanced Search at <a href="http://cancerres.aacrjournals.org/search" target="_blank">http://cancerres.aacrjournals.org/search</a>.
Check the "Search Only Meeting Abstracts" box. You can also limit your search to April of the year you want.</p>
<p> </p>
<p><img src="images/AACR_search_meetings.jpg" alt="Search meetings" width="226" height="55" border="1" /></p>
</blockquote>
<h3>2. <a href="http://www.aacrmeetingabstracts.org/search.dtl" target="_blank">AACR online - <strong>2004-2010</strong></a></h3>
<blockquote>
<p>This online searchable database has the capability to download to RefWorks. </p>
<p> </p>
<p>Try to avoid using the sections called <em>Specify Journals to Search </em>and <em>Specify Meetings to Search</em>. They occasionally cause the search to fail without explanation.</p>
</blockquote>
<blockquote>
<p><strong>Warning</strong>: If you download these abstracts to RefWorks, they download as 'Journal Articles'. For your own sake, you should change the Reference Type to 'Abstract'. (see below)</p>
</blockquote>
<p><strong>3.</strong> <strong>1982-2004 </strong>(Volumes 23-45)</p>
<blockquote>
<p>The BCCA VC Library has print copies of AACR abstract books. Some older versions may need to be retrieved from Storage.</p>
</blockquote>
<h3>AACR Education Book <a href="http://educationbook.aacrjournals.org/search.dtl" target="_blank">2005-current</a></h3>
<blockquote>
<p><strong>Warning</strong>: If you download these abstracts to RefWorks, they download as 'Journal Articles'. For your own sake, you should change the Reference Type to 'Abstract'. (see below)</p>
</blockquote>
<h3>RefWorks: Change Reference Type to 'Abstract'</h3>
<h3> </h3>
<p><img src="images/RW_abstracts.jpg" alt="Change the Reference Type" width="423" height="440" border="1" /></p>
<p> </p>
<h3>Webcasts of 2012 AACR Meeting</h3>
<p> </p>
<p><a href="http://www.aacr.org/page29436.aspx" target="_blank"><img src="images/AACR_2012_webcasts.jpg" alt="Webcasts from 2012 conference" width="325" height="180" border="1" /></a></p>
<p> </p>
<h3>AACR 2013</h3>
<p> </p>
<p><a href="http://www.aacr.org/home/scientists/meetings--workshops/aacr-annual-meeting-2013.aspx" target="_blank"><img src="images/AACR_2013.jpg" alt="AACR 2013" width="154" height="200" border="1" /></a></p>
<p><br />
</p>
</div>
<div class="TabbedPanelsContent">
<h3>ASCO - <a href="http://www.asco.org/" target="_blank">American Society of Clinical Oncology</a></h3>
<p><br />
These abstracts are available in two places - from the journal <strong>JCO</strong> and from the <strong>ASCO</strong> Conference website. </p>
<p> </p>
<h3>1. <a href="http://jco.ascopubs.org/search.dtl">JCO</a> - 2004-current </h3>
<p>These references can be downloaded to RefWorks. Restrict your search of JCO by ticking the box "Specify Sources to Search":</p>
<blockquote>
<p><img src="images/asco_jco.jpg" alt="" width="411" height="79" /></p>
</blockquote>
<br />
<h3>2. <a href="http://jco.ascopubs.org/search.dtl" target="_blank">ASCO</a> - 2007-current</h3>
<p> This database is searchable, <strong>but you</strong> <strong>can't download to RefWorks</strong>. You may use copy and paste to add these abstracts to RefWorks.</p>
<blockquote>
<p><a href="http://www.asco.org/ASCOv2/Meetings/Abstracts" target="_blank">2007 - 2011</a><br />
</p>
<p> </p>
<p> </p>
</blockquote>
<h3>ASCO 2013 </h3>
<h3> <strong>May 31-June 4, 2013 | McCormick Place | Chicago, Illinois</strong></h3>
<p> </p>
<p><a href="http://chicago2013.asco.org/" target="_blank"><img src="images/ASCO_2013.jpg" width="366" height="260" /></a></p>
</div>
<div class="TabbedPanelsContent">
<h3>ASH - <a href="http://www.hematology.org/" target="_blank">American Society of Hematology</a></h3>
<h3><br />
Abstracts</h3>
<p>Published in <em>Blood</em>, these abstracts can be downloaded to RefWorks.</p>
<p><a href="http://abstracts.hematologylibrary.org/content/vol118/issue21/" target="_blank">2011</a></p>
<p><a href="http://abstracts.hematologylibrary.org/content/vol116/issue21/" target="_blank">2010</a></p>
<p><a href="http://bloodjournal.hematologylibrary.org/misc/ASH_Meeting_Abstracts_Info.dtl" target="_blank">2007-current</a></p>
<p><strong><br />
Hematology, </strong>the <em><strong>Education Program Book</strong></em>.<br />
</p>
<p><em><strong><a href="http://www.asheducationbook.org/contents-by-date.0.shtml" target="_blank">Hematology</a></strong></em> is published annually by the American Society of Hematology (ASH) in one volume per year. The <em>Education Program Book</em> provides review articles from the Education Program from the ASH Annual Meeting. In this book, each chapter relates to a session presented at the meeting</p>
<p> </p>
<p><a href="http://asheducationbook.hematologylibrary.org/content/current">Current issue</a></p>
<p><a href="http://www.asheducationbook.org/contents-by-date.0.shtml">Previous issues</a>.</p>
<p> </p>
<h3>ASH 2012 - Atlanta - December 8-12, 2012</h3>
<p> </p>
<p><a href="http://www.hematology.org/meetings/annual-meeting/"><img src="images/ASH_2012.jpg" width="440" height="275" alt="ASH 2012" /></a></p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<h3>ASTRO - <a href="https://www.astro.org/" target="_blank">American Society for Radiation Oncology</a></h3>
<h3><a href="http://www.redjournal.org/content/astro_abstracts" target="_blank">Abstracts</a> - from the annual conference</h3>
<p>These abstracts can be downloaded to RefWorks.</p>
<p> </p>
<p><a href="http://www.astro.org" target="_blank">ASTRO</a>’s role in research includes the promotion and support of basic, translational, clinical and outcomes/health services research and training in radiation oncology, biology and physics. These activities are facilitated through the ASTRO Research Council.</p>
<p> </p>
<p>Founded in 1958, ASTRO’s mission is to advance the practice of radiation oncology by promoting excellence in patient care, providing opportunities for educational and professional development, promoting research and disseminating research results and representing radiation oncology in a rapidly evolving healthcare environment.</p>
<blockquote>
<blockquote>
<blockquote>
<p><em>from:</em> <a href="http://www.astro.org/AboutUs/index.aspx" target="_blank">www.astro.org/AboutUs/index.aspx</a></p>
<p> </p>
</blockquote>
</blockquote>
</blockquote>
<h3>ASTRO 2012 - Boston - October 28-31, 2012</h3>
<p> </p>
<p><a href="https://www.astro.org/Meetings-and-Events/2012-Annual-Meeting/Index.aspx" target="_blank"><img src="images/ASTRO_2012.jpg" alt="ASTRO_2012" width="440" height="108" border="1" /></a></p>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<h3>CARO - <a href="http://www.caro-acro.ca" target="_blank">Canadian Association of Radiation Oncology</a></h3>
<p> </p>
<p>The abstracts are published in print, in <em><a href="http://www.sciencedirect.com/science/journal/01678140" target="_blank">Radiotherapy & Oncology</a></em>. All abstracts are listed in a .pdf document and are not downloadable to RefWorks. To add these abstracts to RefWorks or other citation managers, you must copy and paste.<br />
</p>
<p> </p>
<p>2011 not yet available (as of Mar 1/12)</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/96/supp/S2" target="_blank">2010</a> 96 Suppl 2</p>
<p><a href="../Documents/caro_2009_green_journal_abstracts_sept2.pdf" target="_blank">2009</a> (not yet published in R&O, but the Libary has a copy in .pdf format.)</p>
<p><a href="http://tiny.cc/j4q2r" target="_blank">2008</a> 88 Suppl 1<br />
<a href="http://www.sciencedirect.com/science/journal/01678140/84/supp/S2" target="_blank">2007</a> 84 Suppl 2</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/80/supp/S1" target="_blank">2006</a> 80 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/76/supp/S1" target="_blank">2005</a> 76 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/72/supp/S1" target="_blank">2004</a> 72 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/69/supp/S1" target="_blank">2003</a> 69 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/65/supp/S1" target="_blank">2002</a> 65 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/article/pii/S0360301601016728" target="_blank">2001</a> These abstracts were published in <em>Int J Radiat Oncol Biol Phys;</em>50(5):1380-1418<strong>.</strong></p>
<p> </p>
<p> </p>
<h4>CARO 2012 - Ottawa - Sept 12-15</h4>
<p><img src="images/CARO_2013.jpg" width="384" height="192" /></p>
</div>
<div class="TabbedPanelsContent">
<h3>ECCO - <a href="http://www.ecco-org.eu/" target="_blank">European CanCer Organization</a></h3>
<p> </p>
<p><a href="http://www.ecco-org.eu/Conferences/Conferences/Past-conferences.aspx" target="_blank">Past Conferences</a></p>
<ul>
<li><a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html" target="_blank">ECCO 16 2011</a> or <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 47 Suppl 1</a></li>
<li><a href="http://www.ecco-org.eu/ecco_content/ECCO15_AbstractBook/index.html" target="_blank">ECCO 15 2009</a></li>
<li><a href="http://www.ecco-org.eu/ecco_content/ECCO14_AbstractBook/index.html" target="_blank">ECCO 14 2007</a> or CD-ROM in Library: QZ200 E88 2007 vol. 2</li>
<li><a href="http://www.ecco-org.eu/ecco_content/ECCO13_abstractbook/index.html#/1/zoomed" target="_blank">ECCO 13 2005</a> or CD-ROM in Library: QZ200 E88 2005 vol. 2</li>
</ul>
<p>Education Books</p>
<ul>
<li>ECCO 15 2009 <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 45 Suppl 1</a> or CD-ROM in Library: QZ200 J74 2009</li>
<li>ECCO 14 2007 CD-ROM in VC Library: QZ200 E88 2007 vol. 1</li>
<li>ECCO 13 2005 CD-ROM in VC Library: QZ200 E88 2005 vol. 1</li>
</ul>
<h3>ECCO 2013</h3>
<p> </p>
<p><a href="http://eccamsterdam2013.ecco-org.eu/" target="_blank"><img src="images/ECCO_2013.jpg" width="384" height="165" border="1" /></a></p>
</div>
<div class="TabbedPanelsContent">
<h3>ESMO - <a href="http://www.esmo.org/" target="_blank">European Society for Medical Oncology</a></h3>
<p><a href="http://www.esmo.org/education-research/abstracts-virtual-meetings-and-meeting-reports.html">List of meetings</a></p>
<p> </p>
<p><a href="http://www.esmo.org/education-research/educational-books.html" target="_blank">ESMO Educational books</a></p>
<p>ESMO 36 2011 European Journal of Cancer <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html">47 Suppl 1</a></p>
<p>ESMO 35 2010 : Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/21/suppl_8" target="_blank">21 Suppl 8</a> (Milan)</p>
<p>ESMO 34 2009 European Journal of Cancer Supplements <a href="http://www.ecco-org.eu/ecco_content/ECCO15_AbstractBook/index.html">7(2) Sept 2009</a> (Berlin)</p>
<p>or <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 45 Suppl 1</a></p>
<p>ESMO 33 2008 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/19/suppl_8.toc">19 Suppl 8</a> (Stockholm)</p>
<p>ESMO 32 2007 Annals of Oncology <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html" target="_blank">18 Suppl 9</a> (Lugano)</p>
<p>ESMO 31 2006 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/17/suppl_9.toc?etoc" target="_blank">17 Suppl 9</a> (Istanbul)</p>
<p>ESMO 29 2004 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/15/suppl_3.toc" target="_blank">15 Suppl 3</a> (Vienna)</p>
<p> </p>
<h3>ESMO 2013 Amsterdam</h3>
<p> </p>
<p><a href="http://eccamsterdam2013.ecco-org.eu/" target="_blank"><img src="images/ECCO_2013.jpg" width="384" height="165" border="1" /></a></p>
</div>
<div class="TabbedPanelsContent">
<h3>ESTRO - <a href="http://www.estro.org" target="_blank">European Society for Therapeutic Radiology and Oncology</a></h3>
<p> </p>
<p>Many of these abstracts are published in the green journal,<em> Radiotherapy & Oncology</em>. Some of the <a href="http://www.estro-members.org/publications/Pages/AbstractBooks.aspx" target="_blank">abstract books</a> are also available for download from the ESTRO website.</p>
<p>You can't download these abstracts to RefWorks.</p>
<p> </p>
<table width="479" border="0" cellspacing="1" cellpadding="3">
<tr align="left">
<th width="33" scope="row">2011*</th>
<td width="135">30th Annual Meeting</td>
<td width="289"><p>European Journal of Cancer <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html">47 Suppl 1</a></p></td>
</tr>
<tr align="left">
<th scope="row">2010</th>
<td>29th Annual Meeting</td>
<td><a href="http://www.estro-events.org/Documents/ESTRO29_report.pdf" target="_blank">Abstracts</a> (Barcelona) </td>
</tr>
<tr align="left">
<th valign="top" scope="row">2009*</th>
<td valign="top">28th Annual Meeting</td>
<td>(abstracts not available)(ECCO15 / ESTRO 28), Berlin 20-24 September, 2009?)</td>
</tr>
<tr align="left">
<th scope="row">2008</th>
<td>27th Annual Meeting</td>
<td>Radiotherapy & Oncology <a href="http://www.estro-members.org/publications/Documents/ESTRO2720AbstractBook.pdf" target="_blank">88 Suppl 2</a></td>
</tr>
<tr align="left">
<th scope="row">2007*</th>
<td>26th Annual Meeting</td>
<td>(abstracts not found)</td>
</tr>
<tr align="left">
<th scope="row">2006</th>
<td>25th Annual Meeting</td>
<td>Radiotherapy & Oncology <a href="http://www.sciencedirect.com/science?_ob=PublicationURL&_tockey=#TOC#5155#2006#999189999.8 998#665740#FLT#&_cdi=5155&_pubType=J&_auth=y&_acct=C000054470&_version=1&_urlVersion=0&_us erid=1766625&md5=971c04d2d708ca04155e86c400b96821" target="_blank">81 Suppl 1</a></td>
</tr>
<tr align="left">
<th scope="row">2005*</th>
<td>24th Annual Meeting</td>
<td>(abstracts not found)</td>
</tr>
<tr align="left">
<th scope="row">2004</th>
<td>23th Annual Meeting</td>
<td><a href="http://www.estro-members.org/publications/Documents/2AbstractbookESTRO23.pdf" target="_blank">online abstract book</a></td>
</tr>
<tr align="left">
<th scope="row">2003*</th>
<td>22th Annual Meeting</td>
<td>(abstracts not found)</td>
</tr>
<tr align="left">
<th scope="row">2002</th>
<td>21th Annual Meeting</td>
<td>Radiotherapy & Oncology <a href="http://www.sciencedirect.com/science/journal/01678140/64/supp/S1" target="_blank">64 Suppl 1</a></td>
</tr>
<tr align="left">
<th scope="row">2001</th>
<td>20th Annual Meeting</td>
<td>(abstracts not found)</td>
</tr>
<tr align="left">
<th scope="row">2000</th>
<td>19th Annual Meeting</td>
<td>Radiotherapy & Oncology <a href="http://www.sciencedirect.com/science/journal/01678140/56/supp/S1" target="_blank">56 Suppl 1</a></td>
-
Spry Tabbed Panels does not work as I want
Sorry, but this is an utter NOOB question.
I tried to use a Gooey ment on my page, but it does not work as intended.
Here it works OK: http://ppbm5.com/DB-PPBM5-2.php
Here it does not work: http://ppbm6.com/Planning.html
I assume it is related to the menu already on this page. Anyway, since this did not work, I tried to replace the Gooey menu with Spry Tabbed panels, but being an utter noob in this area, I have made some mistakes that the experts here can probably help solve easily. What happens:
It looks OK in DW:
Go to Live View and it still looks OK:
but then go to the actual page and it looks like this:
Why do the tabbed panels not display at the top of the page next to the vertical menu, like it does in DW?
Second question: How can I add text to each page/ tabbed panel, like here http://ppbm6.com/Planning.htmlSpry Tabbed Panels 2.0 have a number of support files to make them run.
<!--files for Spry Tabbed panels-->
<script type='text/javascript' src='../Spry-UI-1.7/includes/SpryTabbedPanels2.js'></script>
<script type='text/javascript' src='../Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js'></script>
<script type='text/javascript' src='../Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js'></script>
<link type='text/css' href='../Spry-UI-1.7/css/TabbedPanels2/SpryTabbedPanels2.css' rel='stylesheet'/>
Below, I have a Spry demo page with 3 widgets on it. If you look at the source code, you'll see how the the various support files are organized.
Function code is near the bottom of the page.
http://alt-web.com/DEMOS/Spry-test.html
Second question: How can I add text to each page/ tabbed panel, like here http://ppbm6.com/Planning.html
Turn off CSS. View > Style Rendering > un-tick Display Styles. You'll see an unstyled HTML page in Design View. But this won't effect styles in Live View or Preview.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/ -
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. -
Spry Tabbed Panels and Master/ Detail Page Set interraction
Hi,
I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each tab, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page and select one of the tabs.
Thanks.
TonyHi Tony,
Look at the following, blue coded is comment only, red coded is what has to be added to your existing code and orange coded is added by the SpryDataSet creator if done properly. Where the orange part starts, thats where you place your cursor when creating the dataset.
<p> </p>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">All feedback</li>
<li class="TabbedPanelsTab" tabindex="0">Suggestions for improvement</li>
<li class="TabbedPanelsTab" tabindex="0">What did you like the most</li>
<li class="TabbedPanelsTab" tabindex="0">What did you like the least</li>
<li class="TabbedPanelsTab" tabindex="0">What else would you like to see</li>
<li class="TabbedPanelsTab" tabindex="0">Any other comments</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table border="1" align="center" id="allFeedback"> .... start feedback table tag (line 763)
<tr>
<td width="80"><strong>Feedback Number</strong></td>
<td><strong>Days attended</strong></td>
<td><strong>Arrived by</strong></td>
<td><strong>Arrival arrangements</strong></td>
<td><strong>Expectations met</strong></td>
<td><strong>Ticket price</strong></td>
<td><strong>Zip code</strong></td>
</tr>
.................... rest of table probably your PHP repeat area
</tr>
</table> .... end feedback table tag
<div spry:region="dsAllFeedback">
<table>
<tr>
<th spry:sort="Feedback_Number">Feedback Number</th>
<th spry:sort="Days_attended">Days attended</th>
<th spry:sort="Arrived_by">Arrived by</th>
<th spry:sort="Arrival_arrangements">Arrival arrangements</th>
<th spry:sort="Expectations_met">Expectations met</th>
<th spry:sort="Ticket_price">Ticket price</th>
<th spry:sort="Zip_code">Zip code</th>
</tr>
<tr spry:repeat="dsAllFeedback" spry:setrow="dsAllFeedback" spry:odd="row_odd" spry:even="row_even" spry:hover="row_hover" spry:select="row_select">
<td>{Feedback_Number}</td>
<td>{Days_attended}</td>
<td>{Arrived_by}</td>
<td>{Arrival_arrangements}</td>
<td>{Expectations_met}</td>
<td>{Ticket_price}</td>
<td>{Zip_code}</td>
</tr>
</table>
</div>
<br />
<table border="0">
I hope this helps.
Ben -
Spry Tabbed Panel Defaults to home page with recordset paging
I have Spry ver. 1.6.1. A Spry Tabbed Panel titled "Check Ride Activity Report" (Tab 6) accesses a mysql database and shows the records in a table format. Instead of having all the records display at once I want to limit the records displayed to a few at a time. e.g. 5 per page. I added a recordset navigation bar and set the $maxRows_GetChkRideRecs = 5; It works but each time the navigation bar "Next" or "Last" or "First" or "Previous" is clicked the page reloads with the default Home page Tab displayed. The user then has to click on Tab 6 to view the new results. The url where this can be viewed is at http://Training.reliantair.com. Is there a way to code this tab so that Tab 6 remains the default tab once it is selected until the user selects another tab?
I want to avoid putting another button on the page to accomplish this as shown in the spry utils samples where the user clicks to set the default tab.
Can this be done within the recordset paging code similar to how it is done on a form submit to keep the focus on the current tab?I didn't try the cookie method suggested. The tab method listed in spry utils does work but requires an additional button, so I came up with this solution.
In the Head of the HTML document I put this code. It searches for the query string in the HREF when any of the record paging buttons is pressed.
<script type="text/javascript" src="SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
if (location.href.indexOf("GetChkRideRecs") != -1 && location.href.indexOf("tab") == -1)
location.href +="&tab=5#TabbedPanels1";
</script>
Then in the body of the HTML document at the bottom of the page the tabbed panel widget is changed like this:
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab: (params.tab ? params.tab:0)});
The first time a recordset paging link is clicked the HREF attribute of &tab=5#TabbedPanels1 is added to the location HREF. Subsequent clicks of any of the links do not change the HREF because the code looks for "tab" and does nothing if it is found. -
Greetings everyone:
I had an existing Spry tabbed panel with three tabs. I then
added a fourth tab and used the up arrow to move it to the number
one slot. It displays properly as far as the tab goes, but when the
page loads the original number one tab (now number two) is always
open.
How do I make the new number one tab the default for being
open when the page loads?
Thanks in advance for any help.
GlennDuh! (Smacks self in the forehead!)
How about in the property inspector - Default Panel.
Duh!
From reading all the purists posts on the board (Murray,
David and the rest of the gang) I immediately started looking for
this in the code and couldn't find it, so I posted the question.
I know, looking in the code is a good thing! :)
Thanks.
Glenn -
Spry Tabbed Panel doesn't work
I have a spry tabbed panel on my site. The tabs contain
information, but you cannot open the tab. I can set the default
tab, and the info is there, it just won't allow me to open the
different tabs. Code is below:
<div id="level3MainContent"> <!--
InstanceBeginEditable name="content" -->
<div spry:region="ds1">
<div spry:repeat="ds1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
tabindex="0">Newspaper</li>
<li class="TabbedPanelsTab"
tabindex="0">Location</li>
<li class="TabbedPanelsTab"
tabindex="0">Information</li>
<li class="TabbedPanelsTab" tabindex="0">Microfilim
Holdings</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div
class="TabbedPanelsContent">{ns1:title}</div>
<div class="TabbedPanelsContent">County:
{ns1:county}<br />City: {ns1:city}</div>
<div class="TabbedPanelsContent">Publisher:
{ns1:publisher}<br />Volume: {ns1:volume}<br
/>Published: {ns1:published}<br />Other Information:
{ns1:otherinfo}</div>
<div
class="TabbedPanelsContent">{ns1:microfilm}</div>
</div><p></p>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:1});
//-->
</script>
<!-- InstanceEndEditable --></div>
Link to page is:
http://www.history.nd.gov/archives/counties/barnes.htmlI tried it on a blank page, nothing but the tabbed panel. It
still does not allow the user to open a tab:
http://www.history.nd.gov/trialTAB.html
I am not sure about the generic statement about "some
problems not allowing it to validate. if you sort those". Can you
be more specific. I have had a number of problems with spry panels
that won't open. The spry menus work fine on the site. -
Anchor tag inside Spry Tabbed Panel Content
I have successful been able to use code I found listed on
here to open a specific tab in a Spry Tabbed Panel form a link. Now
I am wondering if anyone has found out how to add an anchor tag
code this so that is goes to a specific location inside that Tabbed
Panel Content?I was looking for an answer on how to open a tab from another tab and found it!
In return I'll give you a hint on how to open a tab from another tab using an anchor
for example,
if you were working on a file named "projects.php"
create an anchor in tab 2
<a name="anchor1" id="anchor1"></a>come next to me
in tab 1 create the link to the anchor in tab 2
<a href="projects.php#anchor1" onclick="TabbedPanels1.showPanel(1); return false;">open tab 2 and go to its anchor 1</a>
In your case you are overlooking the file name and jumping directly to the anchor name.....am I right??
cheers from Lima, Perú -
Spry Tabbed XML data panels within HTMLPanel not working.
Many thanks for reading.
s
I trying to provide a rapid solution using adobe's samples
to make Spry Tabs work within an html panel (in order to avoid
many links in my page).
I am using the following code:
initial page with html panel with the ready products.js to parse the links:
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryPagedView.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLPanel.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryDataExtensions.js"></script>
<script src="SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="../SpryAssets/products.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="TabbedPanels/SpryTabbedPanels.css"/>
<script src="TabbedPanels/SpryTabbedPanels.js"></script<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet("ajaxbibliaxmlbridgetitle.php", "root/row[katigoria=1]", {sortOnLoad: "ID_BIBLIOU", sortOrderOnLoad: "ascending"});
var pv1 = new Spry.Data.PagedView( ds1 ,{ pageSize:10 });
var pv1PagedInfo = pv1.getPagingInfo();
//var TabbedPanels1 = new Spry.Widget.TabbedPanels();
</script>
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="sidebar1">
<div id="productPageLinks">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="booklist.php">Product List</a></li>
<li><a href="test.php">Σχετικά με τη Βιβλιοθήκη</a></li>
</ul>
</div>
</div>
<div id="mainContent">
<br />
<div class="HTMLPanelLoadingContent"> Waiting</div>
<div class="HTMLPanelErrorContent"> error </div>
</div>
</div>
</body>
</html>
Products.js (adobe'S change to can load xml dataset)
var mainPanel = null;
// Our initialization function which unobtrusively attaches
// click handlers on the product links within the page.
function InitProductPage()
mainPanel = new Spry.Widget.HTMLPanel("mainContent" , { evalScripts: true });
var observer = {onPostUpdate: function(){ Spry.Data.initRegions('mainContent');
mainPanel.addObserver(observer);
// For every link on the page which points to a product page,
// attach an onclick handler that will intercept clicks and
// and fire off a request to load the URL via the HTMLPanel.
// For these links, we want to load the static product page
// and extract out the content underneath the "mainContent"
// node.
Spry.$$("#productPageLinks a").addEventListener("click", function(e)
mainPanel.loadContent(this.href, { id: "mainContent" });
return false;
}, false);
// For every link on the page which points to a product HTML
// fragment, attach an onclick handler that will intercept clicks and
// and fire off a request to load the URL via the HTMLPanel.
// For these links, we are loading HTML fragments, so there is no
// need to specify an ID to extract out. The HTMLPanel will insert
// all of the content recieved.
Spry.$$("#productFragmentLinks a").addEventListener("click", function(e)
mainPanel.loadContent(this.href);
return false;
}, false);
// Add our InitProductPage() function as a load listener
// so that it gets executed once the page has fully loaded.
Spry.Utils.addLoadListener(InitProductPage);
XML data and stuff all loaded correctly
What I am trying to do is to load a second page from a link in my initial page
that contains a Tabbed Panel.
The page loads but no panel functionality exists. The first Panel load correctly but behaves as a simple html page .
I have searched several hours the forums and playing around by moving the definition of Spry.Widget.TabbedPanels within
the initial HTMLPanel page and other spots but this produced js errors as expected (because the tab panel definitions exist in bookcategories.php)
which is loaded only when it is called.
Any ideas?
Page to load is like this :
<bookcategories.php>
<link rel="stylesheet" type="text/css" href="TabbedPanels/SpryTabbedPanels.css"/>
<script src="TabbedPanels/SpryTabbedPanels.js"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryDataExtensions.js"></script>
</head>
<body >
<div id="container">
<div id="mainContent">
<div class="TabbedPanels" id="TabbedPanels1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">SOmething ... </li>
<li class="TabbedPanelsTab">Something else </li>
<
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Blah Blah
<div spry:region="pv1" id="bibliapv"><br />
<br />
<div spry:state="ready">
<table width="775" height="42" >
<tr style="color:#900"; >
<th etc>
</tr>
<tr spry:repeat="pv1" spry:even="even" spry:odd="odd">
<td > {ID_}
</td>
<td>{Writer}</td>
<td>{Book_Title}</td>
</tr>
</table>
</div>
</div>
<div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
<div class="TabbedPanelsContent">Tab 4 Content</div>
</div>
</div>
</div>
<br class="clearfloat" />
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Many thanksOk I went back through everything and checked to make sure my
files were in the right places both my SpryTabbedPanels.css and my
SpryTabbedPanels.js are in the SpryAssets folder and they work fine
until I try and add data from an xml file to them then the tabs
populate with the info but become unclickable and the content area
has every bit of content in on tab. Below is what I have let me
know what I'm doing wrong I am using Spry 1.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("solutions3.xml",
"solutions/solution");
//-->
</script>
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div spry:region="ds1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li spry:repeat="ds1" class="TabbedPanelsTab"
tabindex="0">{name}</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div spry:repeat="ds1"
class="TabbedPanelsContent">{desc}</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html> -
Link to tabs in spry collapsible panel work in IE-8; not Firefox or Safari
I have little experience with Spry. I've asked my question on the user forum in Dreamweaver several times with no response. I am hoping that someone somewhere in the Adobe community can help me resolve this issue.
I created links from the top of a page to the tabs of a spry collapsible panel underneath.
In IE-8, on one page, with a small collapsiable panel, clicking the link creates a rollover effect on the appropriate panel. This effect works wonderfully for my purposes.On another page, with a long collapsible panel, clicking the link jumps the user to the panel AND creates a rollover effect. Perfect.
In Firefox and Safari, clicking the link does nothing. If I right-click the link in Firefox, I create a duplicate of the page.
I am using Windows XP and Dreamweaver CS4
http://www.judydiamondstone.net/Writing.html
click any of the links in the first section of the page
Thanks.Arnout, Thank you so much for the guidance!
My code now looks like this:
(Click the first tab
below to open; click to close.)
but it still doesn't work
(I still like the error effect in IE!)
Do I need to add to the CSS or JS script that comes with the spry widget?
I am accessing all the tutorials I can find, including a very clear
explanation of event handlers in a Safari online search but I'm obviously
missing one or more basic concepts.
Page with new code on the
elements:
http://www.judydiamondstone.net/Writing.html -
Spry Tab Panel is not working properly on remote server
Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html" class="current">ABOUT</a></li>
<li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
<ul>
<li><a href="#">Business Plan</a></li>
<li><a href="#">Marketing Plan</a></li>
<li><a href="#">Incorporation</a></li>
<li><a href="#">Accounting System</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">OUR PROCESS</a></li>
<li><a href="#">CAREERS</a> </li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">values</li>
<li class="TabbedPanelsTab" tabindex="0">people</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem n, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, , </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit a, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="legal">
<ul>
<li>Copyright © 2012 Temari&Co</li>
<li>| Privacy Policy |</li>
<li>Terms of Use</li>
</ul>
</div>
<div id="socialmedia">
<ul>
<li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
<li><img src="images/gicongri.png" width="20" height="20" alt="gicon"/></li>
<li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
<li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
</ul>
</div>
</div><!-- end footer-->
</div><!-- end wrapper-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
float: left;
background-color: #FFF;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #666;
height: 30px;
width: 116px;
text-transform: uppercase;
text-align: center;
line-height: 30px;
margin: 0px;
padding: 0px;
.TabbedPanelsTabHover {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
.TabbedPanelsTabSelected {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
height: 30px;
width: 116px;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
background-color: #FFF;
height: 100%;
width: 824px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
.TabbedPanelsContent {
height: 100%;
width: 100%;
overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
background-color: #EEE;
position: relative;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
.TabbedPanelsContent {
clear:both !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 744px;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services -
More than one spry tabbed panels
Hi,
On my index page I have a tabbed panel with it own css (size,
color, etc.)
I would like to insert another tabbed panel on another page
(tabbed panel2). I would like this to have its own css style
(different size, color scheme, etc.)
When I insert a spry tabbed panel in dreamweaver it
automatically takes on the css of my original tab panel design! How
can I let the second tabbed panel take on its own life, completely
independent of the first one?
Thank you."chris.cavage" <[email protected]> wrote in
message
news:gnuk7l$hoj$[email protected]..
> How can I let the second tabbed panel
> take on its own life, completely independent of the
first one?
Create a second set of CSS rules for it. The easiest way is
to make a
copy of SpryTabbedPanels.css, and call it
SpryTabbedPanels2.css. Link
SpryTabbedPanels.css to the original page, and
SpryTabbedPanels2.css
to the page that you want to look different.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com
Maybe you are looking for
-
I have two iPods under same account information and lost one but when I go to track it only the one that isnt lost shows up, is there somewhere I can go to fix this?
-
Events created on iphone over a week into the future do not sync with mac
Hello, I have the following problem: whenever I create an event on iCal on the iPhone (2.2.1 3G), this newly created event sync backs fine to iCal on my mac (macbook running 10.5.6), as long as it occurs within 7 days into the future. Any events that
-
Oracle Discoverer Administrator 'OUT OF MEMORY'
Hi , I'm trying to include a case statement in the custom folder based on a query.when I include the case statement in the SQL query and click Validate SQL button i get error 'out of memory'. can anyone plz help me with this. thanks
-
Another Email Query, hopefully a bit easier to fix...
Hi all, Just had BT Total Broadband activated, this morning. Everything running fine and dandy, good speeds, etc... However.... My '@btinternet' email address does not work, obviously I need this to setup BTFon, Email Accounts, Security software and
-
Message intialization in business process
I've created a business process in XI 3.0 (SP 15) which processes a XML file and sents it in Idoc format to R/3. Now I want to set up an exception handler branch to get possible errors which might happen during the mapping (transformation process). I