Tabbed Panel issue. Need to default to users last choice.
My issue is that I can not seem to find the code to force the tabbed panel to default to that tab viewed by the viewer. So if you use this spry to navigate a larger website, on the refresh, the spry always defaults to the zero position. I need it to default to whatever page that user was interfacing on.
Check out http://go.spry-it.com/cookie
Similar Messages
-
Spry Tabbed Panels: Issue in Safar 4
I am having an issue with Spry Tabbed Panels that only seems to happen in Safari 4. I am using Spry Tabbed Panels 1.4 through Dreamweaver CS3. The tab panel still works great. Now, though, when you select a tab, it put a blue link border around the tab itself. When you load the page the tabs are fine. It only occurs when you select a tab and only on the selected tab. I looked around for any other sites that were using tabbed panels and it happens on those sites as well.
I am including a site I found that has a perfect example:
http://www.daughterskitchen.com/cookiediet.html
Click on one of the tabs where it says about the cookie diet.
I have looked into any way to stop this from happening. Has anyone seen this and come up with a solution?
If you need more info, let me know.
Thanks.I think your are referring to the css attribute: outline:none;
Added outline:none; to the css rule and it should be gone. -
Spry Tabbed Panels - Start with no default tab??
Hi all,
Is there any way that I can have a spry tabbed panels widget
and NOT have any tabs open when the page loads? I want to put
multiple tabbed panel widgets on one page for an artist's
discography
example:
Singles
- tab 1 - tab 2 - tab 3 - etc. etc.
Albums
- tab 1 - tab 2 - tab 3 - etc. etc.
Misc
- tab 1 - tab 2 - tab 3 - etc. etc.
I just want the page to look clean and compact - I don't want
any default tab to display. Is this possible? I looked on the Adobe
customization help for the widget but I can't seem to find an
answer. I managed to achieve this by deleting the
(this.defaultTab); part of this line in the .js file:
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
But when I did this, if I created multiple widgets, the
second widget and so on's tabs would not work properly, for some
odd reason. I'm kind of a newbie so I apologize for not making much
sense.
Thanks in advance.Hi all,
Is there any way that I can have a spry tabbed panels widget
and NOT have any tabs open when the page loads? I want to put
multiple tabbed panel widgets on one page for an artist's
discography
example:
Singles
- tab 1 - tab 2 - tab 3 - etc. etc.
Albums
- tab 1 - tab 2 - tab 3 - etc. etc.
Misc
- tab 1 - tab 2 - tab 3 - etc. etc.
I just want the page to look clean and compact - I don't want
any default tab to display. Is this possible? I looked on the Adobe
customization help for the widget but I can't seem to find an
answer. I managed to achieve this by deleting the
(this.defaultTab); part of this line in the .js file:
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
But when I did this, if I created multiple widgets, the
second widget and so on's tabs would not work properly, for some
odd reason. I'm kind of a newbie so I apologize for not making much
sense.
Thanks in advance. -
Firefox - Spry tabbed panel issue
Hi, need a little trouble shooting help here.
This works fine in ie7 but not Firefox 2 or 3. The Spry
Tabbed Panel just looks like an ordinary unordered list but it's
still clickable.
I've placed the script in the header and the css is imported
in the main style sheet.
The live site is here:
www.precisionhomesanddesign.com
Thanks to all who take a moment to look into this.
- palmtekCory C. wrote:
> Hi, need a little trouble shooting help here.
> This works fine in ie7 but not Firefox 2 or 3. The Spry
Tabbed Panel just
> looks like an ordinary unordered list but it's still
clickable.
> I've placed the script in the header and the css is
imported in the main style
> sheet.
> The live site is here:
http://www.precisionhomesanddesign.com/
Cory,
I copied and pasted your code into a new document locally and
then attached the JavaScript and CSS files for the Tabbed panels
and it styled and worked correctly for me. I then noticed that your
live page you have the Spry CSS files imported into your mainStyler
using the following syntax:
@import url ("../includes/SpryTabbedPanels.css");
I tried similar syntax using Dreamweaver to link in the css
file into an attached CSS file and it created code like this:
@import url("../SpryAssets/SpryTabbedPanels.css");
and it then began to work. It took a while, but it finally
struck me that there is a space between url and ( in your code and
none in the code I had created. So I added a space to my code and
then the styling broke, removed it and the styling came back. So
try removing the space (probably for all 3 @imported files) and see
how that works out for you.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert -
Tabbed Panel issue. The tabs scroll together with the content.
Hi,
The idea is to "block" the tabs above, so the visitor, when scrolling a content, he can still see ALWAYS the tabs in the top, so he can change to the other tabs quickly. WIth other tabbed panels I didn't have this problem. The explorers have to do here? Mozilla, Opera?
I use safari. DW CS5.
If more info from me is needed please,l et me know. Help appreciated.
I uploaded the video to Metacafe.com. I saw this video site reliable and appareantly is pretty faster to download video.
Thx in advance for your help.
The video of the problem is shown in the following link:
http://www.metacafe.com/watch/6107040/tabbed_panels_issue_in_dw_cs5/Add/modify the following to your document
.TabbedPanelsContentVisible {
height: 200px;
overflow: auto;
Gramps
PS Love the video -
I'm having an issue with a footer table that is underneath my spray asset. When you open the site in Safari, this table appears off to the side of the spry content, when I'd like it to appear beneath the content..as it is a footer..This ONLY happens in Safari! It works perfectly fine in IE, Chrome, and Firefox.
I think it may have something to do with the fact that each content area of the tabbed panels is a different height, but I'm not sure how to go about fixing this. Can anyone help me?
Here's the website:
http://www.duffsdepew.com
Thanks so much!You are using Spry version 1.4. At the very least you should be using Spry version 1.6 which will likely overcome your problem.
Even better is if you switch to Spry Tabbed Panels 2. Have a look here http://labs.adobe.com/technologies/spry/ui/
I hope this helps.
Ben -
Hi , I already have 2 tab panels in the tabstrip container item..I wanted to add one more tab panel. I added it and cleked on Verify ..the new tab panel is deleted automatically .. what is the reason for this..can anyone help me solve this..
ThanksER,
I'm guessing you are on BI 7?
I am using the tabs in 3.5, what I foudn when I extend the tabs is that if I dont have the Tab Number in sequenece it is ignored.
i.e. Here where I have "head_TAB3", I need to ensure that I have a head_TAB1 & head_TAB2 before hand.
Hope that may be of help.
Regards
Gill -
Tabbed Panels - Default Tab on Mouseout
Morning!
I have looked all over the place for the answer to this question but alas...no luck!
So I'm working on just adding one small bit of functionality for the basic spry tabbed panels; the ability that when the user moves their mouse off of the tabbed panels it resets the focused tab to whatever the declared defaultTab is on the page.
So how do I set a mouseout event to reset the panel back to the defaultTab?
Thanks!<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script>
function myMouseOutHandler(event) {
TabbedPanels1.showPanel(0);
</script>
</head>
<body>
<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>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
Spry.Utils.addEventListener("TabbedPanels1", "mouseout", myMouseOutHandler, false);
</script>
</body>
</html> -
Tabbed panels repeat region in cms displays 2nd item as a block of content
Hi everyone, hope someone can help:
I have a test page live
http://aegmotorhomes.co.uk/usedtest1.php
Problem is this-
I have added a repeat region on my dreamweaver template
I use Perch CMS as my management for staff to add new items for sale on this page
I have built a tabbed panels to list the item
On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
I think it is to do with the ID and applies the java file only to item one, thats my guess.
I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
TEMPLATE
<style type="text/css">
#container1 {
width: 700px;
background-color: #E6E6E6;
border: .1em solid #999;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
height: auto;
margin-bottom: 30px;
#item_description {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
color: #333;
background-color: #FFF;
height: 30px;
border-bottom-width: .1em;
border-bottom-style: dotted;
border-bottom-color: #333;
font-weight: bold;
margin-bottom: 10px;
#price {
margin-top: 5px;
float: right;
width: 150px;
background-color: #EAEAEA;
border: 0.1em solid #CCC;
.BOLDTEXT {
font-weight: bold;
text-align: center;
color: #FFF;
.BOLDTEXT_PRICE {
color: #333;
#engine_spec {
float: left;
width: 190px;
font-family: Arial, Helvetica, sans-serif;
font-size: .75em;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #099;
float: right;
width: 150px;
font-weight: bold;
text-align: right;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#overview_picture {
height: 150px;
width: 200px;
background-color: #CCC;
float: left;
margin-right: 10px;
margin-top: 5px;
.BOLDTEXT_blackprice {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#smallprint {
font-family: Arial, Helvetica, sans-serif;
font-size: .5em;
color: #666;
margin-top: 2px;
table tr td {
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
.specwhite {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
#reserve {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #FFF;
background-color: #099;
width: 140px;
float: right;
margin-top: 10px;
padding: 5px;
text-align: center;
border: .1em solid #999;
</style>
<script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<div id="container1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Overview</li>
<li class="TabbedPanelsTab" tabindex="0">Description</li>
<li class="TabbedPanelsTab" tabindex="0">Images</li>
<li class="TabbedPanelsTab" tabindex="0">Specification</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="item_description"><perch:content id="Title1" label="Title" type="text" />
<div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
</div>
<div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
<div class="engine_spec" id="engine_spec">
<table width="100%" border="0" cellpadding="5" cellspacing="7">
<tr>
<td width="35%" bgcolor="#EAEAEA">Year of Make</td>
<td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Current Miles</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Engine Size</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Body Colour</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Transmission</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
</tr>
</table>
</div>
<div id="price">
<table width="150" border="0" cellspacing="9">
<tr>
<td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
<td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
</tr>
</table>
</div>
<div id="reserve">Reserve Motorhome</div>
</div>
<div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
<div class="TabbedPanelsContent"><table width="650" cellspacing="5">
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
</table></div>
<div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
.JS file
(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, "click", 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);
})(); // EndSpryComponent
>CSS file
@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.
/* 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 {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* 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;
background-color: #DDD;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: small;
font-weight: bold;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 4px;
/* 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: #CCC;
/* 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: #FFF;
color: #333;
border-top-color: fff;
border-right-color: fff;
border-bottom-color: fff;
border-left-color: fff;
border-color: fff;
outline-color: fff;
/* 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;
background-color: #F9F9F1;
height: auto;
margin-bottom: 3px;
border: .1px solid #999;
/* 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;
/* 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 {
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #333;
padding: 20px;
clear: both;
margin-bottom: 5px;
height: auto;
/* 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".
.VTabbedPanels {
overflow: hidden;
zoom: 1;
/* 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: #EEE;
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: #EEE;
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;
/* 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:none !important;
height: 100%;
#TabbedPanels1 {
height: auto;
padding-top: 5px;
background-color: #EAEAEA;
width: 700px;
I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
Can anybody HELP PLEASE PLEASEI think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
There are a couple of things that create the problem.
There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
There needs to be a constructor for each tabbed panels like
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
Gramps -
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 -
Help Using Spry tabbed panel as a menu.
Thanks in advance to all who take the time to read and any assistance you can offer.
I'm picking up where someone else started a website. They used Spry tabbed panels as a menu system (CS4). Each Panel is a top-level "menu" and when it opens, sub-menus (hyperlinks) come up vertically under the panel. I REALLY don't want to start over if I don't have to - need the site up and running - but cannot figure out how to make the "HOME" tabbed panel (the first one) actually take users back to the home page. For now, I've created a "submenu" (link) under HOME tabbed panel to help the user navigate back to the home page.
HELP?
http://www.orange.k12.nc.us/ec/beta/default.htmlThank you Gramps - for your prompt and helpful response! Your solution absolutely fixed the problem I asked about.
If I had followed forum advisories and asked the question correctly, the navigation on this website would probably be working perfectly by now. Your solution fixes the home page. Can you look at one more page and advise please??
On the "subpages" of this site, the same tabbed panel "fake menu" exists. I replaced the equivalent line of code in the template for those pages (at line 45) with what you gave me. I'm obviously missing something in the code to send the user back to the HOME page from these pages.
In the sample link below, you will be starting from a "subpage" of the site. Clicking on the "HOME" tab leads you not to the actual home page (default.html in the root directory) but to a default.html page within the subdirectory for the page you are on (which doesn't exist.) Can I add something to that line of code to get them back to the home page?
Again... thank you!!
http://www.orange.k12.nc.us/ec/beta/Students/Student_Resources.html -
Dynamically Adding/Editing/Deleting Tabs on Tabbed Panels
I am using the tabbed panels and need to know how to
dynamically create a new tab with javascript with some content
inside ( and switch to it ). Also, I need to figure out how I can
delete tabs at "runtime"? I have tried many things to do this, but
everytime, it has been failing. I need a functions just like this:
addTab(title, innerHTMLcontent);
deleteTab(currIndex);
Also, I think all of the Spry Widgets should have an easy way
to dynamically change content.Hi,
here is the js file. I am also attaching a sample (I named it
as Spry.Widget.ExtendedTabbedPanels, may be you could change it).
Let me know if you face any issues.
===================START-JS
FILE==============================
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget
= {};
Spry.Widget.ExtendedTabbedPanels = function(element, opts) {
Spry.Widget.TabbedPanels.call(this, element, opts);
Spry.Widget.ExtendedTabbedPanels.prototype = new
Spry.Widget.TabbedPanels();
Spry.Widget.ExtendedTabbedPanels.prototype.constructor =
Spry.Widget.ExtendedTabbedPanels;
Spry.Widget.ExtendedTabbedPanels.prototype.addTab = function
(tabname, tabcontent, position) {
var tabs = this.getTabs();
if((!position && position != 0)|| position >
tabs.length)
position = tabs.length;
var newtab = tabs[tabs.length - 1].cloneNode(true);
this.setElementNodeValue(newtab, tabname);
this.getTabGroup().insertBefore(newtab, tabs[position]);
var tabContents = this.getContentPanels();
var newContentPanel = tabContents[tabContents.length -
1].cloneNode(false);
newContentPanel.innerHTML = tabcontent;
this.getContentPanelGroup().insertBefore(newContentPanel,
tabContents[position]);
this.addPanelEventListeners(newtab, newContentPanel);
this.showPanel(position);
Spry.Widget.ExtendedTabbedPanels.prototype.removeTab =
function(tabindex) {
var tabs = this.getTabs();
if((tabs.length == 1) || (!tabindex && tabindex !=
0) || tabindex >= tabs.length)
return false;
var tabToRemove = tabs[tabindex];
this.getTabGroup().removeChild(tabToRemove);
var contentPanelToRemove =
this.getContentPanels()[tabindex];
this.getContentPanelGroup().removeChild(contentPanelToRemove);
this.removePanelEventListeners(tabToRemove,
contentPanelToRemove);
if(this.getCurrentTabIndex() == tabindex) {
if(this.getTabs().length <= tabindex)
this.showPanel(this.getTabs().length - 1);
else
this.showPanel(tabindex);
Spry.Widget.ExtendedTabbedPanels.removeEventListener =
function(element, eventType, handler, capture)
try
if (element.removeEventListener)
element.removeEventListener(eventType, handler, capture);
else if (element.detachEvent)
element.detachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.ExtendedTabbedPanels.prototype.removePanelEventListeners
= function(tab, panel)
var self = this;
Spry.Widget.ExtendedTabbedPanels.removeEventListener(tab,
"click", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.ExtendedTabbedPanels.removeEventListener(tab,
"mouseover", function(e) { return self.onTabMouseOver(e, tab); },
false);
Spry.Widget.ExtendedTabbedPanels.removeEventListener(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.ExtendedTabbedPanels.removeEventListener(this.focusElement,
"focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.ExtendedTabbedPanels.removeEventListener(this.focusElement,
"blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.ExtendedTabbedPanels.removeEventListener(this.focusElement,
"keydown", function(e) { return self.onTabKeyDown(e, tab); },
false);
Spry.Widget.ExtendedTabbedPanels.prototype.setElementNodeValue
= function(element, nodevalue) {
var currentElement = element;
var tmpElement = this.getElementChildren(element);
while(tmpElement.length != 0) {
currentElement = tmpElement[0];
tmpElement = this.getElementChildren(tmpElement[0]);
currentElement.innerHTML = nodevalue;
====================END JS
FILE==================================
===================SAMPLE
TEST===================================
<!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=utf-8" />
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryExtendedTabbedPanels.js"
type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<div class="TabbedPanelsTabGroup">
<span class="TabbedPanelsTab"
tabindex="0"><b>Tab 1</b></span>
<span class="TabbedPanelsTab" tabindex="0">Tab
2</span>
</div>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<input type="text" id="tabname" />
<input type="text" id="tabcontent" />
<input type="text" id="position" />
<input type="button" value="add tab" onclick="add();"
/>
<input type="button" value="delete tab"
onclick="TabbedPanels1.removeTab(parseInt(document.getElementById('position').value));"
/>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.ExtendedTabbedPanels("TabbedPanels1");
function add() {
var tabTitle = document.getElementById("tabname").value;
var tabcontent = document.getElementById("tabcontent").value;
var position = document.getElementById("position").value;
TabbedPanels1.addTab(tabTitle, tabcontent,
parseInt(position));
//-->
</script>
</body>
</html>
===================SAMPLE TEST
END======================= -
Spry tabbed panels, opening a tabbed panel, problem with IE
i've have made a site, with tabbed panels,
all the pages are made of a template;
everythings works fine; in Firefox and Opera,
but only in IE when i open a tabbed panel from a menubar, the contents is opened behind my header location;
i've used spry 1.6.1 and spryUtils to open the tabbed panel.
because there no other posibilty to open a tabbed panel from my other page.
i've tested the site on CSS and all, and i've don't get any errors.
this site is only on our intranet, and DVD;
so is not a online site
i' dont have anything modified in the java script.
just changed some minor adjustments to the CSS of the tabbed panels
The page is containing a fixed footer and header, FOR all browsers therefore is the CSS IE hacks also.
and all other functions work normal.
i'm only a beginner at this
CSS
body,html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
body{
color: #000;
background-attachment: fixed;
background-image: url(../afbeeldingen/Sitepictures/HaupteingangPB.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 95%;
#img2 {
height: 2cm;
width: 2cm;
border:0;
#img {
margin-right: 10px;
height: 3cm;
width: 3cm;
border:0;
TD{
font-family: Arial;
font-size: 8pt;
line-height: normal;
vertical-align: top;
text-align: left;
#header-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 5;
#header-container {
height: 120px;
background-repeat: repeat-x;
background-position: left bottom;
#header {
width: 1040px;
margin: 0 auto;
position: relative;
#header-content{
width: 1040px;
position: relative;
background-image: url(../afbeeldingen/Sitepictures/background.jpg);
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#header ul li {
float: left;
margin-right: 2px;
#container {
width: 1040px;
padding-top: 120px;
padding-bottom:50px;
background-color: #FFF;
margin-bottom: 0px;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;
position: relative;
height: auto;
min-height:100%;
#container a:link {
color: #00C;
text-decoration: none;
#container a:visited {
color: #F8495A;
text-decoration: none;
#container a:hover {
color: #00C;
text-decoration: underline;
#container a:active {
color: #00B004;
text-decoration: none;
#kolommaker
width:1040px;
background-color: #CEECAE;
height: 100%;
float: left;
#boven {
width: 1040px;
position: static;
height: 180px;
background-color: #FFF;
#sitecontent {
width: 1040px;
background-color: #FFF;
height: 100%;
#TabbedPanels1 {
width: 1040px;
position: static;
background-color: #FFF;
height: 100%;
float: left;
.links, .rechts, .midden {
height:100%;
display: inline-table;
background-color: #FFF;
.links{
float: left;
width: 330px;
font-size: 12px;
padding-top: 5px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
.rechts{
padding-top: 5px;
float: right;
width: 330px;
text-align: left;
font-size: 12px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
.midden{
padding-top: 5px;
width: 330px;
text-align: left;
font-size: 12px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
#footer-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 5;
#footer-container {
height: 50px;
background-image: url(../images/footer-bg.png);
background-repeat: repeat-x;
background-position: left bottom;
#footer {
width: 1040px;
margin: 0 auto;
position: relative;
background: #FFF;
#contentfooter {
width: 1040px;
margin-top: 0;
margin-right: auto;
position:relative;
margin-bottom: 0;
margin-left: auto;
height:50px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #F00;
text-align: center;
.leftfooter {
float: left;
.rightfooter {
float: left;
#iframe {
height: 600px;
min-height: 600px; }
.result_title a:link {
color: #00C;
text-decoration: none;
.result_title a:visited {
color: #F8495A;
text-decoration: none;
.result_title a:hover {
color: #00C;
text-decoration: underline;
.result_title a:active {
color: #00B004;
text-decoration: none;
.description { font-size: 100%; color: #008000; }
.docs {border:0;}
.pdf {border:0;}
.images {border:0;}
.excell {border:0;}
.exe {border:0;}
.clock {
text-align: center;
background: #FFF;
border: 1px solid #CCC;
height: 20px;
width: 175px;
font-size: 12px;
.clearfix {
content:".";
width:100%;
height: 0;
clear: both;
display: block;
visibility: hidden;
/* Hides from IE-mac \*/
.clearfix {height: 1%;} /* for IE/Mac */
CSS IE hacks
html{
overflow: hidden;
body{
overflow: auto;
#header-wrap, #footer-wrap {
position: absolute;
#header-container, #footer-container,{
margin-right: 16px;
#ie6-container-wrap {
position: absolute;
width: 100%;
height:100%;
overflow:auto;
#TabbedPanels1 {
position: absolute;
.TabbedPanels {
position: absolute;
#boven {
padding-top: 100px;
#container {
padding-top: 60px;
height :100%;
#sitecontent {
height: 100%;
#footer-wrap {
bottom: -1px;
#header img, #footer img
display: block;
Template
<!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=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Naamloos document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>
<!--[if lt IE 7 ]>
<link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!--ZOOMSTOP-->
<div id="header-wrap">
<div id="header-container">
<div id="header">
<div id="header-content">
<table width="890" border="0" cellspacing="1">
<tr>
<td width="100" height="50"><a href="../Sites/Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
<td width="680">
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
<ul class="sub">
<li><b>Alg. Procedure</b></li>
<li><a href="#nogo3" class="fly">Car Policy</a>
<ul>
<li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
<li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Gsm Policy</a>
<ul>
<li><a href="#nogo8">Gsm Policy NL</a></li>
<li><a href="#nogo9">Gsm Policy FR</a></li>
</ul>
</li>
<li><b>Diversen</b></li>
<li><a href="../Algemeen/Skills.htm">Skills</a></li>
<li><a href="../Sites/Verlof-Recup.html">Verlof</a></li>
<li><a href="../Sites/Verlof-Recup.html">Recup</a></li>
</ul>
</li>
<li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
<ul class="sub">
<li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
<li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
<li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
<li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
<li><a href="#nogo7" class="fly">Onkostennota</a>
<ul>
<li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
<li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Online Tools</a>
<ul>
<li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
<li><a href="../Sites/login.html">Online map</a></li>
<li><a href="../Sites/Fujitsu.html">Fujitsu Portal</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">FAX Franchisé</a>
<ul>
<li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
<li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
</ul>
</li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
<li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
<li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
<ul class="sub">
<li><a href="../Sites/Aldi.html">Aldi</a></li>
<li><a href="../Sites/Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
<li><a href="../Sites/Bonita.html">Bonita</a></li>
<li><a href="../Sites/Carrefour.html">Carrefour</a></li>
<li><a href="../Sites/C&A.html">C & A</a></li>
<li><a href="../Sites/Decathlon.html">Decathlon</a></li>
<li><a href="../Sites/Delhaize.html">Delhaize</a></li>
<li><a href="../Sites/Ici Paris XL.html">Ici Paris</a></li>
<li><a href="../Sites/Ikea.html">Ikea</a></li>
<li><a href="../Sites/Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
<li><a href="../Sites/Kruidvat.html">Kruidvat</a></li>
<li><a href="../Sites/Lidl.html">Lidl</a></li>
<li><a href="../Sites/Living Tomorrow.html">Living Tomorrow</a></li>
<li><a href="../Sites/Mediamarkt.html">Mediamarkt</a></li>
<li><a href="../Sites/Scapino.html">Scapino</a></li>
<li><a href="../Sites/Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
<li><a href="../Sites/Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
</ul>
</li>
<li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
<ul class="sub">
<li><a href="../Sites/third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
<li><a href="../Sites/third party.html?tab=4#tabbedpanels1">HP</a></li>
<li><a href="../Sites/third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
<li><a href="../Sites/third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
<li><a href="../Sites/third party.html?tab=1#tabbedpanels1">Scanners</a></li>
<li><a href="../Sites/third party.html?tab=0#tabbedpanels1">Scales</a></li>
</ul>
</li>
<li class="top"><a href="../Sites/Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
<li class="top"><a href="../Sites/Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
</td>
</tr>
</table>
<table width="1038" border="0" cellspacing="1">
<tr>
<td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
<td> </td>
<td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--ZOOMRESTART-->
<div id="ie6-container-wrap" >
<div id="container">
<!-- TemplateBeginEditable name="EditRegion1" -->
<div id="boven">test<br />
<br />
</div>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Algemeen</li>
<li class="TabbedPanelsTab" tabindex="0">Tools</li>
<li class="TabbedPanelsTab" tabindex="0">Pc's</li>
<li class="TabbedPanelsTab" tabindex="0">Kassa's</li>
<li class="TabbedPanelsTab" tabindex="0">Selfscanning</li>
<li class="TabbedPanelsTab" tabindex="0">Self Check Outs</li>
<li class="TabbedPanelsTab" tabindex="0">EN andere</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven
<p>Hier wordt de inhoud voor id midden weergegeven</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
</div>
<div class="clearfix:after"> </div>
</div>
<!-- TemplateEndEditable -->
</div>
<div class="clearfix:after"> </div>
</div>
<!--ZOOMSTOP-->
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">
<div id="contentfooter"><div class="leftfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
<div class="rightfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
//-->
</script>
</body>
</html>
PAGE where i open the tabbed panels
<!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/Naamloos-2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Third Party</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>
<!--[if lt IE 7 ]>
<link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!--ZOOMSTOP-->
<div id="header-wrap">
<div id="header-container">
<div id="header">
<div id="header-content">
<table width="890" border="0" cellspacing="1">
<tr>
<td width="100" height="50"><a href="Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
<td width="680">
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
<ul class="sub">
<li><b>Alg. Procedure</b></li>
<li><a href="#nogo3" class="fly">Car Policy</a>
<ul>
<li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
<li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Gsm Policy</a>
<ul>
<li><a href="#nogo8">Gsm Policy NL</a></li>
<li><a href="#nogo9">Gsm Policy FR</a></li>
</ul>
</li>
<li><b>Diversen</b></li>
<li><a href="../Algemeen/Skills.htm">Skills</a></li>
<li><a href="Verlof-Recup.html">Verlof</a></li>
<li><a href="Verlof-Recup.html">Recup</a></li>
</ul>
</li>
<li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
<ul class="sub">
<li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
<li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
<li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
<li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
<li><a href="#nogo7" class="fly">Onkostennota</a>
<ul>
<li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
<li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Online Tools</a>
<ul>
<li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
<li><a href="login.html">Online map</a></li>
<li><a href="Fujitsu.html">Fujitsu Portal</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">FAX Franchisé</a>
<ul>
<li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
<li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
</ul>
</li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
<li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
<li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
<ul class="sub">
<li><a href="Aldi.html">Aldi</a></li>
<li><a href="Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
<li><a href="Bonita.html">Bonita</a></li>
<li><a href="Carrefour.html">Carrefour</a></li>
<li><a href="C&A.html">C & A</a></li>
<li><a href="Decathlon.html">Decathlon</a></li>
<li><a href="Delhaize.html">Delhaize</a></li>
<li><a href="Ici Paris XL.html">Ici Paris</a></li>
<li><a href="Ikea.html">Ikea</a></li>
<li><a href="Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
<li><a href="Kruidvat.html">Kruidvat</a></li>
<li><a href="Lidl.html">Lidl</a></li>
<li><a href="Living Tomorrow.html">Living Tomorrow</a></li>
<li><a href="Mediamarkt.html">Mediamarkt</a></li>
<li><a href="Scapino.html">Scapino</a></li>
<li><a href="Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
<li><a href="Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
</ul>
</li>
<li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
<ul class="sub">
<li><a href="third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
<li><a href="third party.html?tab=4#tabbedpanels1">HP</a></li>
<li><a href="third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
<li><a href="third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
<li><a href="third party.html?tab=1#tabbedpanels1">Scanners</a></li>
<li><a href="third party.html?tab=0#tabbedpanels1">Scales</a></li>
</ul>
</li>
<li class="top"><a href="Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
<li class="top"><a href="Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
</td>
</tr>
</table>
<table width="1038" border="0" cellspacing="1">
<tr>
<td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
<td> </td>
<td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--ZOOMRESTART-->
<div id="ie6-container-wrap" >
<div id="container">
<!-- InstanceBeginEditable name="EditRegion1" -->
<div id="boven"><img src="../afbeeldingen/Sitepictures/Datalogic_logo.jpg" alt="Datalogic" name="img2" width="100" height="100" id="img2" /> <img src="../afbeeldingen/Sitepictures/PSC-Logo4C.jpg" alt="PSC" name="img2" width="450" height="160" id="img2" /> <img src="../afbeeldingen/Sitepictures/NCRlogo.jpg" alt="NCR" name="img2" width="116" height="116" id="img2" /> <img src="../afbeeldingen/Sitepictures/symbol-logo.jpg" alt="Symbol" name="img2" width="200" height="150" id="img2" /></div>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">kassascanners</li>
<li class="TabbedPanelsTab" tabindex="0">Handscanners</li>
<li class="TabbedPanelsTab" tabindex="0">Scales</li>
<li class="TabbedPanelsTab" tabindex="0">Kassaprinters</li>
<li class="TabbedPanelsTab" tabindex="0">HP</li>
<li class="TabbedPanelsTab" tabindex="0">Fujitsu-Siemens</li>
<li class="TabbedPanelsTab" tabindex="0">Datalogic</li>
<li class="TabbedPanelsTab" tabindex="0">Vensafe</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
</div>
<div class="clearfix:after"> </div>
</div>
<!-- InstanceEndEditable -->
</div>
<div class="clearfix:after"> </div>
</div>
<!--ZOOMSTOP-->
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">
<div id="contentfooter"><div class="leftfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
<div class="rightfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
//-->
</script>
</body>
<!-- InstanceEnd --></html>
TABBED PANELS CSS
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - 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.
/* 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 {
width: 1040px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
position: static;
float: left;
/* 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: static;
top: 1px;
float: left;
font: bold 0.7em sans-serif;
background-color: #FF0033;
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;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
/* 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: #75A7D0;
/* 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 {
border-bottom: 2px solid #EEE;
color: #FFF;
background-color: #000;
/* 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-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
float: left;
/* 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;
height: 100%;
width: 1032px;
float: left;
/* 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 {
background-color: #FFF;
/* 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: #CCC;
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: #EEE;
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;added also the css for the menubar
pro_dropdown_3.css
.preload1 {
background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
.preload2 {
background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
#nav {
padding:0;
margin:0;
list-style:none;
height:38px;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
background-repeat: repeat-x;
#nav li.top {
display:block;
float:left;
width: auto;
#nav li a.top_link {
display:block;
float:left;
height:35px;
line-height:33px;
color:#ccc;
text-decoration:none;
font-size:11px;
font-weight:bold;
cursor:pointer;
background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
width: 85px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 2px;
#nav li a.top_link span {
float:left;
display:block;
height:35px;
background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
background-repeat: no-repeat;
background-position: right top;
width: 70px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
#nav li a.top_link span.down {
float:left;
display:block;
padding:0 10px 0 12px;
height:35px;
background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
background-repeat: no-repeat;
background-position: right top;
#nav li:hover a.top_link {
color:#fff;
background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
background-repeat: no-repeat;
#nav li:hover a.top_link span {
background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
background-repeat: no-repeat;
background-position: right top;
#nav li:hover a.top_link span.down {
padding-bottom:3px;
background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
background-repeat: no-repeat;
background-position: right top;
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
background-color: #50b5d0;
background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
color:#fff;
background-color: #3f96a9;
background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
color:#fff;
border-color:#fff;
background-color: #3f96a9;
background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
color:#000;
border-color:#50b5d0;
background-color: #50b5d0;
background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
background-repeat: no-repeat;
background-position: 80px 6px; -
Using Srpy tabbed panels with slidding panels
I am very new to spry and so I am still just figuring it all
out. How I found it was I wanted a tabbed panel like the one on the
IBM website. Anyway, I am trying to
use the tabbed panels with the sliding panels and it just does not
seem to be working. I found
this
tutorial and followed the codes but it still only works as just the
tabbed panels - nothing has changed at all. Can someone tell me
what I might be doing wrong? I am attaching both my html and css
code for you to inspect.
HTML Code
<!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=utf-8" />
<title>Untitled Document</title>
<script
src="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link
href="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 1</a></li>
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 2</a></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>
css code to follow in post below - too many characters.and here is the css code
CSS Code
@charset "UTF-8";
/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4
/* 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;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
/* 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;
font: bold 0.7em sans-serif;
background-color: #DDD;
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;
/* 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: #CCC;
/* 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: #EEE;
border-bottom: 1px solid #EEE;
/* 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: #EEE;
/* 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: #EEE;
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: #EEE;
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;
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door
and CSS Sprites */
/* Revision by Craig Malcolm Petrou of CPMMUG.com */
.TabbedPanels {
margin: 10px 0 5px 0;
.TabbedPanelsTab {
font-weight: bold;
font-size: 100%;
background-color: #FFF;
border: solid 0 #FFF;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #FFF;
position: relative;
.TabbedPanelsContentGroup {
background-color: #FFF;
ul.TabbedPanelsTabGroup a {
display: block;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/brown.png) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/brown.png) no-repeat 100% 0;
padding: 7px 10px 5px 0;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/brown.png) no-repeat 0 -41px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/brown.png) no-repeat 100% -41px;
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and
CSS Sprites */
Also - is there a way to get rounded corners on the tabs in
spry? Any good tutorials I can follow about spry - more
specifically about using widgets and effects together.
Thanks so much -
Thanks in advance to anyone who can help. I'm having a problem with my spry tabbed panel. It works but the actual CSS isn't working on the spry. The panel goes down onto the content.
Here is a screen cap: http://img32.imageshack.us/img32/2598/53451133.jpg
Coding:
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - 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.
/* 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;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* 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;
font: bold 0.7em sans-serif;
background-color: #DDD;
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;
/* 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: #CCC;
/* 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: #EEE;
border-bottom: 1px solid #EEE;
/* 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: #EEE;
/* 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: #EEE;
position: absolute;
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: #EEE;
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;Hi Ben,
I creat a new page ( a simple page...):
http://dev.achab.it/test/test.htm
Our web-graphics are insert into
<script type="text/javascript" src="../common/js_func/parameters.js"></script>
the SpryTabbedPanels.js scripts.
On the new simple, you can click to 4 Tabs on the left.
If you want to see the 5 or 6 content tab you can click the label into the 3 or 5 content tab.
When you click on the label "here" on the 3° Tab (for example), you can see the content change and the "Tab 3" is not selected.
I'd like to change the content and leave the "Tab 3" selected.
I hope in your help :-)
thank in advance
regards
Stefano
Maybe you are looking for
-
Hi Gurus, We have a situation where users are trying to login to ESS portal and we can find below dump at backend in ST22. Runtime Errors OBJECTS_OBJREF_NOT_ASSIGNED_NO Exception CX_SY_REF_IS_INITIAL Access via 'NULL' object refe
-
Hello Friends, I am having some doubts in accessing a restricted webservice from a java program. The Webservices is deployed with basic authentication. When i access in Mozilla ,it asks for username and password. While i give correct login, i get wsd
-
S-ips monitor - is it preferred ?
I will be purchasing a new monitor. I have recently been informed of ips monitors. I do mostly video and photo edting , in Premiere and Photoshop. I don't know if the ips type monitors will be best for my use. I am considering a Dell ultra sharp mode
-
Deleting Vaults that have nothing in them
I have some Vaults on another HD but they don't show up in the Aperture Interface so I can't delete them. It says there locked. When I do a "Get Info" and unlock them in the "get Info" menue, there still locked. I can tell there's nothing in them bec
-
Managed to misplace our "admin" password for logging into DSCC web interface. Is there a way to recover it? I searched the forum and someone said that it is a security violation. I understand that. But I also believe that there are legitimate reasons