Tabbed Panel Focus
I am using tabbed panels to neatly display web part on a
portal. The only problem I have encountered is tab focus being lost
when I page through the content. Example: Tab 3 displays, in
batches of 10, frequently used documents. When navigating to the
next batch the page is returned with the default tab displayed. Is
there a way to maintain focus for this example?
You could pass call a function that would set the tab default
to what ever so say they click on the next button have an onclick
to call say the keepTab function or what ever
so like
<a href="#" onclick="keeptab(2);">Next</a>
function keeptab(ID)
Spry.Widget.TabbedPanels("tp1", { defaultTab: ID });
haven't tested it but it should work.
Similar Messages
-
Spry - Changing focus on each tabbed panel
Hello,
I am not sure if this is the correct place to post this.
I have been asked to modify this page, http://webpac.lvlspa.org/screens/moco_mainmenu.html , and I was wondering how I could have the focus be on the input box when a patron clicks on each tabbed panel?
Thanks for your time,
MattAutomatically setting the focus in a form field is normally a trivial operation. However, it's not so simple with tabbed panels because the tabs and their content are all on the same web page.
I decided to give this a try, and think that I have come up with a solution. The code is specific to your setup, which uses "targetEncore" and "searcharg" as the name of the input fields you want to have focus when a tab is clicked. Add the following script block at the bottom of the page, just before the closing </body> tag:
<script>
if (document.getElementsByClassName) {
function findField(node) {
var node = node || document.getElementsByClassName('TabbedPanelsContentVisible')[0];
if (node.hasChildNodes()) {
var child = node.firstChild;
while (child) {
if (child.nodeType === 1 && child.nodeName == 'INPUT') {
if (child.name == 'targetEncore' || child.name == "searcharg") {
child.focus();
break;
} else {
findField(child);
child = child.nextSibling;
findField();
var tabs = document.getElementsByClassName('TabbedPanelsTab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', (function (num) {
return function() {
findField();
})(i), false);
</script>
This script works in all modern browsers, included Internet Explorer 9. However, it does not work in IE 8 or earlier. Getting it to do so would involve a lot more scripting, so is probably not worthwhile.
Message was edited by: David_Powers to wrap script in conditional statement that tests support for document.getElementsByClassName. -
SPRY Tabbed Panels on focus/URL
Can you land on a page and control which tab has focus? If I want to link to content on a tab, or cross-reference between two tabs, how could you construct a url...
Thanks,
ShearakYou can also use Spry for this. Have a look here http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
There are a lot of discussions on this topic within this forum. Use the 'search forum' feature to obtain more info.
And have a look here http://foundationphp.com/tutorials/spry_url_utils.php
I hope this helps.
Ben -
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 -
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, 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; -
Spry tabbed panels java script error screwing up whole page when I reopen document in dreamweaver
I need help!
I am creating a site in dreamweaver and I am using spry tabbed panels for my content on every page. I've created 4 pages. When I go to reopen the pages after quitting dreamweaver 2 open and work just fine. However, for the other two I receive a window that says,
this document contains javascript code for a widget that no longer exists. If you don't remove the code, the browser may display javascript errors when loading the page. Would you like dreamweaver to find all instances of this code for you.
I've selected both yes and no options and either way my entire page becomes all jumbled. I've tried deleting the script in code view and it doesn't help?<!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>LEAP 2 GROW</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #090909;
background-image: url(k2-mountain-1280x800-1.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
.twoColFixLtHdr #container {
width: 1200px;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #header {
padding: 0;
margin-top: 10px;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #8CC543;
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0;
background-color: #25A8E0;
margin-top: 40px;
height: 400px;
.twoColFixLtHdr #mainContent {
margin-right: 0;
margin-bottom: 0px;
margin-left: 248px;
border: 1px solid #8CC543;
margin-top: 40px;
text-align: center;
background-position: center center;
color: #8CC543;
font-family: "Century Gothic";
font-size: medium;
text-transform: none;
height: 400px;
background-image: url(k2-faded.jpg);
.twoColFixLtHdr #footer {
padding: 0;
text-align: left;
font-family: "Century Gothic";
text-transform: uppercase;
color: #25A8E0;
letter-spacing: 5px;
font-size: small;
word-spacing: normal;
display: block;
margin-left: 0px;
margin-top: 10px;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #25A8E0;
text-decoration: none;
a:hover {
color: #8CC543;
text-decoration: none;
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
//-->
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: xx-small; color: #EEEEEE; }
a:visited {
text-decoration: none;
color: #25A8E0;
a:active {
text-decoration: none;
.style3 {
color: #FFFFFF;
font-weight: bold;
.style4 {color: #FFFFFF}
-->
</style>
<style type="text/css">
<!--
.style5 {font-size: x-large}
h1 {
font-size: medium;
color: #25A8E0;
.style6 {color: #444444}
.style8 {color: #444444; font-weight: bold; }
-->
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
<!-- end #header --></h1>
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="volunteer.html">VOLUNTEER</a> </li>
<li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
<li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
</ul>
</div>
<div id="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="mission.html">mission/overview</a></li>
<li><a href="ourteam.html">OUR team</a></li>
</ul>
</li>
<li><a href="problem.html">THE PROBLEM</a></li>
<li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
<ul>
<li><a href="solution.overview.html">overview</a></li>
<li><a href="solution.structure.html">structure</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
<ul>
<li><a href="parentcollege.html">parent college</a></li>
<li><a href="mentor.html">MENTOR program</a></li>
<li><a href="farming.html">urban farming</a></li>
<li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
<ul>
<li><a href="location.fulton.html">fulton county ga</a></li>
<li><a href="location.haiti.html">haiti</a></li>
<li><a href="location.tribe.html">native american tribe</a></li>
</ul>
</li>
<li><a href="news.html">NEWS|RESOURCES</a></li>
<li><a href="contact.html">CONTACT US</a></li>
<li><a href="#">DONATE</a></li>
</ul>
</div>
<div class="style3" id="mainContent">
<div align="left" class="style4">
<p class="style5">MENTOR PROGRAM</p>
<div id="TabbedPanels2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
<li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
<li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
<li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
<li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
<li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<blockquote>
<p><em>“Those who have the ability, have the responsibility”</em></p>
<p><u>Avenue of attention:</u> <strong> MENTOR PROGRAM</strong> <br />
Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models. </p>
<p>Two levels of involvement: </p>
<ol>
<li>High School Academic Mentors</li>
<li>Community-Leader Mentors</li>
</ol>
<p><u>Program title:</u> <strong>Talent 2 Kids</strong> </p>
<p><u>Why Program Important</u><strong>:</strong> </p>
<ol>
<ul>
<li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
<li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
<li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress. Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
</ul>
</blockquote>
</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
<div class="TabbedPanelsContent">Content 5</div>
<div class="TabbedPanelsContent">Content 6</div>
</div>
</div>
<p> </p>
</div>
<p> </p>
<p> </p>
</div>
<div id="footer">
<table width="1200" border="0">
<tr>
<td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
<td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
<td><div align="center"><a href="farming.html">urban farming</a></div></td>
<td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
</tr>
</table>
<p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels2");
//-->
</script>
</body>
</html> -
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 -
Spry Accordions, Tabbed Panels, and Collapsible Panels: changing colors
I wanted to alert everyone to a great new Community article published by our very own David Powers. The article details the various best practices and methods for changing the colors of Accordion, Tabbed Panels, and Collapsible Panels widgets, including tab backgrounds, borders, and so on.
Here's the article:
http://kb2.adobe.com/community/publishing/504/cpsid_50437.html
Customization questions are pretty frequent in both the Spry and Dreamweaver forums. This new styling guide is sure to answer lots of peoples' questions.
Furthermore, the appearance of such an article is a great example of how Community content can interact and live symbiotically with Adobe Help. We've linked directly to David's piece from our own customization pages for the Spry Accordion, Tabbed Panels, and Collapsible Panels widgets:
Customize the Accordion widget
Customize the Tabbed Panels widget
Customize the Collapsible Panels widget
Thanks a lot to David for hammering out this article.
If you're interested in publishing Community articles of your own, you can download the Community Publishing AIR application and get right to work!The borders you see, are called outline, its a accesiblity feature of the browsers,
Actually called 'focus' lines :-)
Here's an article about the Bluefocus lines seen in Safari.
http://www.brunobergher.com/blog/2009/01/19/safaris-blue-focus-lines/
Without creating a Spry widget myself right now to test, but I'm sure thata there is a 'focus' rule in the css...
trying the
{outline:none;}
on that rule. -
Set Default Spry Tabbed Panel As Close Until Mouse Over
Dear All,
Is there a way to set the default spry tabbed panel to be closed when the page load untilI mouse over it??
here is the link to my page http://www.senhuiauto.com/model_code_link.html. As you can see, it roll down by default.
How to fix??
Below is my SpryTabbedPanel.js
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.bindings = [];
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
this.defaultTab = 0;
else
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
if (ele == arr[i])
return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.ENTER_KEY = 13;
Spry.Widget.TabbedPanels.SPACE_KEY = 32;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
return true;
this.showPanel(tab);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
if (tabs[i])
this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i])
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);You may be better off asking this question over at the forum dedicated to the Spry Widgets:
Spry forum. -
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> -
Spry Tabbed Panel Defaults to home page with recordset paging
I have Spry ver. 1.6.1. A Spry Tabbed Panel titled "Check Ride Activity Report" (Tab 6) accesses a mysql database and shows the records in a table format. Instead of having all the records display at once I want to limit the records displayed to a few at a time. e.g. 5 per page. I added a recordset navigation bar and set the $maxRows_GetChkRideRecs = 5; It works but each time the navigation bar "Next" or "Last" or "First" or "Previous" is clicked the page reloads with the default Home page Tab displayed. The user then has to click on Tab 6 to view the new results. The url where this can be viewed is at http://Training.reliantair.com. Is there a way to code this tab so that Tab 6 remains the default tab once it is selected until the user selects another tab?
I want to avoid putting another button on the page to accomplish this as shown in the spry utils samples where the user clicks to set the default tab.
Can this be done within the recordset paging code similar to how it is done on a form submit to keep the focus on the current tab?I didn't try the cookie method suggested. The tab method listed in spry utils does work but requires an additional button, so I came up with this solution.
In the Head of the HTML document I put this code. It searches for the query string in the HREF when any of the record paging buttons is pressed.
<script type="text/javascript" src="SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
if (location.href.indexOf("GetChkRideRecs") != -1 && location.href.indexOf("tab") == -1)
location.href +="&tab=5#TabbedPanels1";
</script>
Then in the body of the HTML document at the bottom of the page the tabbed panel widget is changed like this:
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab: (params.tab ? params.tab:0)});
The first time a recordset paging link is clicked the HREF attribute of &tab=5#TabbedPanels1 is added to the location HREF. Subsequent clicks of any of the links do not change the HREF because the code looks for "tab" and does nothing if it is found. -
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 -
Spry Tabbed Panel - Dotted outline around selected tab
Hello there,
I noticed in Spry Tabbed Panels, once a tab is selected,
there is a dotted outline around the selected tab (the 'focus').
How do I hide it? I've seen a similar set up using JQuery which has
the dotted outline automatically disappear after a tab is selected.
I've set up a demo at my personal website to illustrate what I'm
getting at.
http://www.sgdanielwang.com/spry/tabbed.htm
Could someone spare a bit of time to have a look and advise
me?
Thanks in advance.
DanThanks, Arnout.
Your solution got rid of the dotted focus outline. However
the problem persists in Internet Explorer. I read at the following
site:
http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt- i
that the focus can be hidden using a javascript which looks
for all <a> element in the HTML file and disables the focus.
But in the case of the Spry Tabbed Panel, the <a> is actually
specified in CSS. Is there a CSS 'hack' to make the focus disappear
in Internet Explorer?
Rgds,
Dan -
Tabbed Panels Show on Hover, Not Click
Hi,
I'm using the Spry Tabbed Panels widget (obviously). I'd like
the content panels to show on hover, rather than on click.
Reason being is my content in the content panels are images
-- as you hover over a tab, the image changes. Clicking on the tab
takes you to the tab's page. That's the end goal, at least.
The answer's in the SpryTabbedPanels.js file, I'm positive.
All my tinkering hasn't produced the desired result, though. Spare
a few minutes and direct me to the sections of the javascript file
I need to change?
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.bindings = [];
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
this.defaultTab = 0;
else
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element
for the tab content
// to show by default. The caller is allowed to pass in the
element itself or the
// element's id, so we need to convert the current value to
an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren =
function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName =
function(ele, className)
if (!ele || !className || (ele.className &&
ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName =
function(ele, className)
if (!ele || !className || (ele.className &&
ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" +
className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj,
optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName]
== undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup =
function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels =
function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele,
arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
if (ele == arr
return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex =
function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex =
function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount =
function(ele)
return Math.min(this.getTabs().length,
this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element,
eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e,
tab)
this.showPanel(tab);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver =
function(e, tab)
this.addClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabMouseOut =
function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e,
tab)
this.hasFocus = true;
this.addClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e,
tab)
this.hasFocus = false;
this.removeClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.ENTER_KEY = 13;
Spry.Widget.TabbedPanels.SPACE_KEY = 32;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e,
tab)
var key = e.keyCode;
if (!this.hasFocus || (key !=
Spry.Widget.TabbedPanels.ENTER_KEY && key !=
Spry.Widget.TabbedPanels.SPACE_KEY))
return true;
this.showPanel(tab);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
Spry.Widget.TabbedPanels.prototype.preorderTraversal =
function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null;
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners =
function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "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)
this.removeClassName(tabs
, this.tabSelectedClass);
if (panels)
this.removeClassName(panels
, this.panelVisibleClass);
panels.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
, panels);
this.showPanel(this.defaultTab);near line 282 u will see the function:
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners =
function(tab, panel)
in there u will find
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);
change this to:
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover",
function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e,
tab); }, false);
and it should work.
Maybe you are looking for
-
I recently purchased a new computer with Windows 7 OS. When trying to learn the transition experience from Windows XP to this new OS version, I was presented with this problem of going around in circles. When trying to view "Discover Windows 7" via "
-
Mac OS X Lion and Lightroom 3 import issue
Hi, I upgraded to Lion and migrated my applications and data through the migration assistant. Now I have a problem with importing. I use to import by converting to dng from cr2 (Canon EOS 350D), using a card reader. Nothing changed in my setup from S
-
I'm having a great deal of trouble getting my java web start working I've set up everything on the site but when I click the link it shows the XML code from my JNLP file. I read that I have to set a MIME type on the server but I have no way of changi
-
I followied the how to guids "How To convert an IDoc-XML structure to a flat file and vice versa in XI 3.0" and "How to Use ABAP-Mapping in XI 3.0". After I built created the ABAP-OO class Z_ABAP_MAPPING_IDOC_TO_FLAT and implemented every thing, duri
-
Hi, I have a small doubt in Pricing... I have 4 condition types (CT1,CT2,CT3,CT4)in my Pricing Procedure....and the access sequence for in one of my condition type (say CT1) has 4 Access which are not marked as exclusive access.. Can someone explain