Accordian & Tabbed Panel Error
When I have the tabbed panel content set to expand
automatically (ie scroll bars do no appear, the content just
expands as the data gets bigger (or vice versa if the content is
less for the next tab)… it does as it should and the content
area expands or contracts accordingly.
However… if I insert the accordion widget within one of
the content areas, if the accordion is set to auto AND the tabbed
panels are set to auto, the tabbed content does not expand if the
data within the accordion requires it to do so.
Does this make sense?
Let me know if I need to re-explain.
Thank you.
I'm having the same problem. as this problem resides on an
intranet I don't have a url to a demo.
However, to make it clearer - I have a spry accordion with
tabbed panels in it. If the tabbed panel content height is more
than let's say 500px (which is the accordion content height) then a
scrollbar appears on the right. BUT this also causes another issue
which is when you use the scroll bar to scroll through the content,
the tab panels hover over the content!
I've tried changing the content height for both BUT the page
looks stupid when there is content far less than the set content
height!
hope you gifted people can help with this issue.
I have updated my spry to 1.6.
thanks
Anis
Similar Messages
-
I've put Master table with detail inline table in tab panel. Changing the tab and returning back I get
2008.11.27 11:03:21 oracle.adfinternal.view.faces.config.rich.RegistrationConfigurator handleError
SEVERE: Server Exception during PPR, #1
java.net.SocketException: Software caused connection abort: socket write error
at java.net.SocketOutputStream.socketWrite0(Native Method)
at java.net.SocketOutputStream.socketWrite(SocketOutputStream.java:92)
at java.net.SocketOutputStream.write(SocketOutputStream.java:136)
at weblogic.servlet.internal.ChunkOutput.writeChunkTransfer(ChunkOutput.java:525)
at weblogic.servlet.internal.ChunkOutput.writeChunks(ChunkOutput.java:504)
at weblogic.servlet.internal.ChunkOutput.flush(ChunkOutput.java:382)
at weblogic.servlet.internal.CharsetChunkOutput.flush(CharsetChunkOutput.java:249)
at weblogic.servlet.internal.ChunkOutputWrapper.flush(ChunkOutputWrapper.java:171)
at weblogic.servlet.internal.ServletOutputStreamImpl.flush(ServletOutputStreamImpl.java:113)
at weblogic.servlet.internal.ServletResponseImpl.flushBuffer(ServletResponseImpl.java:187)
at javax.servlet.ServletResponseWrapper.flushBuffer(ServletResponseWrapper.java:176)
at javax.servlet.ServletResponseWrapper.flushBuffer(ServletResponseWrapper.java:176)
at com.sun.faces.application.ViewHandlerImpl.renderView(ViewHandlerImpl.java:231)
at javax.faces.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:189)
at org.apache.myfaces.trinidadinternal.application.ViewHandlerImpl.renderView(ViewHandlerImpl.java:188)
at oracle.adfinternal.view.faces.lifecycle.LifecycleImpl._renderResponse(LifecycleImpl.java:652)
at oracle.adfinternal.view.faces.lifecycle.LifecycleImpl._executePhase(LifecycleImpl.java:243)
at oracle.adfinternal.view.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:203)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:266)
at weblogic.servlet.internal.StubSecurityHelper$ServletServiceAction.run(StubSecurityHelper.java:227)
at weblogic.servlet.internal.StubSecurityHelper.invokeServlet(StubSecurityHelper.java:125)
at weblogic.servlet.internal.ServletStubImpl.execute(ServletStubImpl.java:292)
at weblogic.servlet.internal.TailFilter.doFilter(TailFilter.java:26)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:42)
at oracle.adf.model.servlet.ADFBindingFilter.doFilter(ADFBindingFilter.java:181)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:42)
at oracle.adfinternal.view.faces.webapp.rich.RegistrationFilter.doFilter(RegistrationFilter.java:85)
at org.apache.myfaces.trinidadinternal.webapp.TrinidadFilterImpl$FilterListChain.doFilter(TrinidadFilterImpl.java:278)
at org.apache.myfaces.trinidadinternal.webapp.TrinidadFilterImpl._invokeDoFilter(TrinidadFilterImpl.java:238)
at org.apache.myfaces.trinidadinternal.webapp.TrinidadFilterImpl._doFilterImpl(TrinidadFilterImpl.java:195)
at org.apache.myfaces.trinidadinternal.webapp.TrinidadFilterImpl.doFilter(TrinidadFilterImpl.java:138)
at org.apache.myfaces.trinidad.webapp.TrinidadFilter.doFilter(TrinidadFilter.java:92)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:42)
at oracle.security.jps.wls.JpsWlsFilter$1.run(JpsWlsFilter.java:85)
at java.security.AccessController.doPrivileged(Native Method)
at oracle.security.jps.util.JpsSubject.doAsPrivileged(JpsSubject.java:257)
at oracle.security.jps.wls.JpsWlsSubjectResolver.runJaasMode(JpsWlsSubjectResolver.java:250)
at oracle.security.jps.wls.JpsWlsFilter.doFilter(JpsWlsFilter.java:100)
at oracle.security.jps.ee.http.JpsFilter.doFilter(JpsFilter.java:65)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:42)
at oracle.adf.library.webapp.LibraryFilter.doFilter(LibraryFilter.java:149)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:42)
at weblogic.servlet.internal.RequestEventsFilter.doFilter(RequestEventsFilter.java:27)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:42)
at weblogic.servlet.internal.WebAppServletContext$ServletInvocationAction.run(WebAppServletContext.java:3496)
at weblogic.security.acl.internal.AuthenticatedSubject.doAs(AuthenticatedSubject.java:321)
at weblogic.security.service.SecurityManager.runAs(Unknown Source)
at weblogic.servlet.internal.WebAppServletContext.securedExecute(WebAppServletContext.java:2180)
at weblogic.servlet.internal.WebAppServletContext.execute(WebAppServletContext.java:2086)
at weblogic.servlet.internal.ServletRequestImpl.run(ServletRequestImpl.java:1406)
at weblogic.work.ExecuteThread.execute(ExecuteThread.java:201)
at weblogic.work.ExecuteThread.run(ExecuteThread.java:173)
any idea why?Hi,
adding a m/d table to the detail stamp is not supprted in JDeveloper 11
Frank -
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> -
Spry Tabbed Panels - Contribute Error Message
I created a Web site using Dreamweaver CS4 that uses a Spry Tabbed Panels. It works fine, but so far it fails when it is pulled into Contribute CS5. I've read the posts about allowing Spry Widget editing in Contribute, so I've turned on that capability.
When I try to launch the Spry Widget Properties from within Contribute, I get this error:
"This tabbed panel is missing its content. Contact your administrator to add the missing content panel, or delete this panel and insert a new one."
I've tried creating new generic pages with new Spry tabbed panels, but they always fail with this message.
Here is a sample page:
http://www.dougriderconsulting.com/zmcpa/incentives.html
Any ideas? Thanks!The page http://www.dougriderconsulting.com/zmcpa/incentives.html mentioned here has no issues.
If there are any missing codes DW also shows the error as <missing content panel> or <missing tab> when the Tabbed Panel widget is selected.
In Contribute the same pops up as a message.
The issue in page http://www.dougriderconsulting.com/zmcpa/education_in_muskingum_county.html posted in Contribute Blogs is re-solved http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html#more-33. -
Validation Errors with Spry tabbed panels with doctype XHTML 1.0 Strict
I'm getting errors while using the W3C Validation Service on my Strict XHTML 1.0 pages that use the SPRY Tabbed Panels. I've read a few places that W3C has no plans on 'fixing or relaxing" the restrictions. Is there any type of work around to the Spry Widget Tab panels code ??? All of my other pages validate nicely... hate to go back to Transitional afterconverting all my other code.
The DreamWeaver File validation also gives me errors but I think that is fed from W3C.
Any help would be appreciated. Thanks Pat
Line 31, Column 46: there is no attribute "tabindex"
… <li class="TabbedPanelsTab" tabindex="0">Want a professional looking Logo ?</…Use Spry 2.0
You can see a live demo of Spry 2.0 widgets below (contains valid markup).
http://alt-web.com/sandbox/Spry-test.html
Unless you're incorporating XML applications into your web site, there is not much reason to use XHTML Strict doc types. That standard was last revised in 2002. It has since been replaced with HTML5.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/ -
Spry Active Tables in Spry tabbed panels
Hi everyone and thanks for advance for dealing with my inexperience.
I'm using dreamweaver cs4 on a mac and I'm trying to create 2 tabbed panels, each with a Spry active table within it that uses a nondestructive filter wired to a spry select menu to navigate through galleries. When I make 1 of these, it works perfectly. The problem is that when I try to create the second one, it screws everything up. Sometimes it can't find the datasets for the select lists anymore, sometimes nothing shows up in one of the tables. I've run a lot of trial and error, and I just can't detect a pattern. I have very little experience coding and I'm working form a tutorial book. I didn't think adding the second table in would cause a problem, but apparently it does. Can anybody help make this work? I'll post the code below.
Thanks!
-CB
This works just fine for one of the tabs:
var rs_SpryCasteAbilities = new Spry.Data.HTMLDataSet(null, "CasteAbilities");
var rs_SpryProfAbilities = new Spry.Data.HTMLDataSet(null, "ProfessionAbilities");
rs_SpryProfAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
if (row['Prof_ID'] == rs_SpryProfAbilities.gallery) {
return row;
return null;
rs_SpryProfAbilities.filter(chooseSet);
function changeSet(set)
rs_SpryProfAbilities.gallery = set;
rs_SpryProfAbilities.filter(chooseSet);
rs_SpryProfAbilities.setCurrentRowNumber(0);
var rows = rs_SpryProfAbilities.getData();
for (var i = 0; i < rows.length; i++) {
if (rows[i]['Prof_ID'] == set) {
rs_SpryProfAbilities.setCurrentRowNumber(i);
break;
var rs_Professions = new Spry.Data.HTMLDataSet(null, "Professions");
var rs_Castes = new Spry.Data.HTMLDataSet(null, "Castes");
//with this being the code for the selectors further down the page//
<div spry:region="rs_Castes">
<select name="select2" spry:repeatchildren="rs_Castes">
<option value="{Caste_ID}">{Caste_Name}</option>
</select>
</div>
//and//
<div spry:region="rs_Professions">
<select name="select" spry:repeatchildren="rs_Professions" onchange="changeSet(this.value)">
<option value="{Profession_ID}">{Profession_Name}</option>
</select>
</div>
This does not work for both:
var rs_SpryCasteAbilities = new Spry.Data.HTMLDataSet(null, "CasteAbilities");
rs_SpryCasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
if (row[Caste_ID'] == rs_SpryCasteAbilities.gallery) {
return row;
return null;
rs_SpryCasteAbilities.filter(chooseSet);
function changeSet(set)
rs_SpryCasteAbilities.gallery = set;
rs_SpryCasteAbilities.filter(chooseSet);
rs_SpryCasteAbilities.setCurrentRowNumber(0);
var rows = rs_SpryCasteAbilities.getData();
for (var i = 0; i < rows.length; i++) {
if (rows[i]['Caste_ID'] == set) {
rs_SpryCasteAbilities.setCurrentRowNumber(i);
break;
var rs_SpryProfAbilities = new Spry.Data.HTMLDataSet(null, "ProfessionAbilities");
rs_SpryProfAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
if (row['Prof_ID'] == rs_SpryProfAbilities.gallery) {
return row;
return null;
rs_SpryProfAbilities.filter(chooseSet);
function changeSet(set)
rs_SpryProfAbilities.gallery = set;
rs_SpryProfAbilities.filter(chooseSet);
rs_SpryProfAbilities.setCurrentRowNumber(0);
var rows = rs_SpryProfAbilities.getData();
for (var i = 0; i < rows.length; i++) {
if (rows[i]['Prof_ID'] == set) {
rs_SpryProfAbilities.setCurrentRowNumber(i);
break;
var rs_SpryProfessions = new Spry.Data.HTMLDataSet(null, "Professions");
var rs_Castes = new Spry.Data.HTMLDataSet(null, "Castes");
//With this being the code for the selectors further down the page//
<div spry:region="rs_Castes">
<select name="select" spry:repeatchildren="rs_Castes" onchange="changeSet(this.value)">
<option value="{Caste_ID}">{Caste_Name}</option>
</select>
</div>
//and//
<div spry:region="rs_SpryProfessions">
<select name="select2" spry:repeatchildren="rs_Professions" onchange="changeSet(this.value)">
<option value="{Profession_ID}">{Profession_Name}</option>
</select>
</div>Thanks for the reply Ben!
Here's the url:
http://www.iotheatre.com/GoldenAgeAbilities.php
As you can see, the filter in the 2nd tab works as intended, but there is nothing showing up at all in the first tab! Any help would be greatly appreciated.
-CB -
I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?
I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
By the way new to all this so be gentle please
<div id="main_column">
<div class="section_w500">
<h2>North Bali Listings</h2>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
<li class="TabbedPanelsTab" tabindex="0">Land</li> <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
<li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
<li class="TabbedPanelsTab" tabindex="0">Commercial</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially in and around the Badung and Denpasar areas, has driven investors northward, in our opinion at this time it is an ideal opportunity to acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
<p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area, principally along the coastline , with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling, water sports, fishing, sailing. trekking gives this area the potential to be world-class tourist destination. Research has shown that property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
<br />
The Northern part of Bali is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
<table width="100%">
<tr>
<td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property in this area; be it for investment, development or private use.</div></td>
</tr>
</table>
<p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
<br />
<img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve; are also beginning to attract investors, resulting in prices rising.<br />
The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with "Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
<br />
<img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of established ex pat communities, and better facilities also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
<p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
</div>
<div class="TabbedPanelsContent">
<p> </p>
<table width="100%" border="0">
<tr>
<td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
<span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
<td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
</tr>
<tr>
<td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded "Tourism Status" ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
<p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone & Internet close to hand and readilly available</p></td>
<td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
</tr>
<tr>
<td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
Min Rental Period 25 Years, extendable to to a max of 75 years
(with full "Right Of Use" issued by owner)</span></td>
<td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
<br />
<span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
</tr>
</table>
<p><br />
</p>
<hr width="100%" noshade="noshade" />
<p> </p>
</div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
</div>
</div>
<p> </p>
<p>
<h7 style="color: #C03"></h7>
</p>
<h2></h2><!-- this stays empty to put dotted line under listings block -->
</div>
<div class="cleaner"></div>
</div> <!-- end of main column -->Could you share a link to the page?
Seeing it in context and in our browsers is much easier to debug.
If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms. -
Spry tabbed panels as menu system
Hi,
This is actually for Dreamweaver CS6. What I'm trying to do is use spry tabbed panels as horizontal my menu system. I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected. I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
My current problems are these:
I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
Any help or suggestions would be greatly appreciated!!
Below is my tabbed panels css:
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #000;
width: 1000px;
height: 25px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 21px;
margin: 0px 0px 0px 0px;
background-color: #000;
list-style: none;
border-left: solid 0px #000;
border-bottom: solid 0px #000;
border-top: solid 2px #000;
border-right: solid 0px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 1000;
height: 15px;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
.TabbedPanelsTabHover {
background-color: #D31145;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabSelected {
background-color: #D31145;
border-bottom: 0px solid #D31145;
color: #FFFFFF;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 2px #D31145;
border-bottom: solid 2px #D31145;
border-top: solid 2px #D31145;
border-right: solid 2px #D31145;
background-color: #FFFFFF;
visibility: visible;
width: 50%;
position: inherit;
height: auto;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
THe Javascript for my tabbed panels are below:
// SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
this.defaultTab = 0;
else
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
if (ele == arr[i])
return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
var el = false;
if (key == this.previousPanelKeyCode && i > 0)
el = tabs[i-1];
else if (key == this.nextPanelKeyCode && i < tabs.length-1)
el = tabs[i+1];
if (el)
this.showPanel(el);
el.focus();
break;
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
if (tabs[i])
this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i])
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
})(); // EndSpryComponentNote - I agree with Nancy
As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from 21px to 18px.
.TabbedPanelsTab {
-moz-user-select: none;
background-color: #000000;
border-color: #000000;
border-left: 0 solid #000000;
border-style: solid;
border-width: 2px 0 0;
cursor: pointer;
float: left;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
height: 15px;
list-style: none outside none;
margin: 0;
padding: 4px 18px;
position: relative;
top: 0;
Don't use dummy text without normal length text with breaks -
Spry tabbed panels, 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; -
I have 2 tab panels on my website and 1 is not working
I have 2 tab panels on my website and 1 is not working one on a templet so it shows on all pages and one for some of the pages when I upload it to my server it brakes the ones on the pages heres an exaple
http://ol.helpmetechteam.com this is main page
http://ol.helpmetechteam.com/computer_repair.html this is one of the pages i need to have a tabed panle set up
I ran the test
http://validator.w3.org/check?uri=http%3A%2F%2Fol.helpmetechteam.com%2F&charset=%28detect+ automatically%29&doctype=Inline&group=0&verbose=1&user-agent=W3C_Validator%2F1.2
but I dont kow how to fix the error im getting I thought the doc type was right can any one help?
Thank you
Aaron DyeYou need to add the constructor for the second TabbedPanels as follows
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
Gramps -
Spry Validation in Tabbed Panel
I've created a form that has a number of sections which I
have separated out using a spry tabbed panel. So far, so good.
On one of the panels, however, is a select box that is
required, so I have used a spry validation widget to look after it.
Now, if the select box hasn't been used then and the submit button
is clicked while one of the other panels is open, because the
validation widget halts the form it makes it look as though nothing
has happened. The warning message is only visible when the correct
panel is open.
My question is this: how do I either (a) force the panel with
the error on to reopen or (b) make the error message show up
elsewhere on the page so that it is visible? I tried positioning it
absolutely above the whole panel but it still only shows up when
the relevant panel is oen.I have actually added multiple tabbed panels inside of tabbed
panels as well as collapsible panels inside of tabbed panels and
vise versa. This works across all browsers (IE 6 & 7, FF 2,
Safari 2 & 3).
The key for me was to use <div style="clear: both"> (I
put a comment here to satisfy IE6) </div> at the bottom of
the tab, before the closing of the tab since I was using a lot of
floating within the tabbed panels.
If you share some code, I'm sure someone could give you a
more specific answer. -
Remote Server doesn't display SPRY Tabbed Panel
I'm using DW CS4. I inserted a SPRY Tabbed Panel in the main page for navigation. The local development and testing server displays the Panel, but the remote server (Go Daddy) does not. All of the data from the panel is displayed in one log page without the tab feature.
The site's address is: mailbox.mikeklonecki.com
I saw a couple of other posts for a slideshow error using SPRY in DW, but this seems to be different behavior. I don't get an error, rather the panel just doesn't display.
Any feedback would be greatly appreciated. Thank you in advance.I apologize. I found my answer.
Two required files (one .js and one .css) were not loaded into the right folder, so the page didn't have access to them. After re-locating the files, the Tabbed panel works just fine.
Please disregard the inquiry. -
When trying to insert a Spry Tabbed Panels I get a Java
Script error. It doesn't allow me to select the parent of the
Tabbed Panels for easy addition of additional panels. This has been
an ongoing problem. I've tried reloading DreamWeaver but that
didn't seem to help. Other Spry components work just fine. It's not
giving me a specific error just that it's JavaScript.
Suggestions?I had this I closed the site that I was working on and
selected a different site tried to insert spry all ok.
went back to original site and bingo all ok
why that happened, dont have a clue but try it it may work
for you -
Opening specific Spry tabbed panels not working or displaying in IE
I have a tabbed panel spry widget on an asp page in Dreawmweaver (http://www.herbsmithinc.com/casedog.asp) that worked marverously across IE, Firefox and Safari until I tried to get different panels to open on load through links. I used the following tutorial: http://foundationphp.com/tutorials/spry_url_utils.php
Everything works as it should in Firefox and Safari but the panels all appear at once, stacked down the page in IE. Does anyone have a fix for this or see what it is I'm doing wrong?
Thanks!!I added the code, but It didn't work
I just noticed that there's an error on the page when it loads in IE:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.6; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Timestamp: Thu, 24 Mar 2011 15:05:33 UTC
Message: 'Spry.Widget.TabbedPanels' is null or not an object
Line: 292
Char: 1
Code: 0
URI: http://www.herbsmithinc.com/casedog.asp
I searched the error but didn't come up with too much. Any other suggestions? I really appreciate the help!! -
Modified Spry Tabbed Panels causing a bug in Dreaweaver.
Whenever I try to edit a page with a spry tabbed panel in Dreamweaver, I get a spiraling pinwheel, then finally, a popup window saying, "the file SpryTabbedPanelsDesignTime.js has been running a long time" and I have to click "no" to continue, only to have the whole thing reoccur in a few seconds.
I have modified the widget constructor, in order to link to secondary panels from another page, which all works perfectly. However it is frustrating to keep getting the error message as a result of this modification.
<script type="text/javascript">
<!-- var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: (params.panel ? params.panel : 0)}); -->
</script>
I have seen the issue addressed in adobe forums and have attempted the fix to the SpryTabbedPanelsDesignTime.js file as suggested here:
http://kb2.adobe.com/cps/401/kb401257.html .
I am not sure why this fix isn't working for me, as it seems to be working for others.
I am alos getting another similar popup error saying, "WidgetDomTranslator.js running a long time..."
I have attached the modified SpryTabbedPanelsDesignTime.js file that was supposed to fix the problem, but has not.
If any one can help it would be so very much appreciated!!I have never heard of that problem, but reading the technote that you pointed to seems to indicate that it's a problem with Dreamweaver CS3, which shipped with Spry 1.4.
I have used the params technique many times in Dreamweaver CS4 without problem. The main difference is that Dreamweaver CS4 ships with Spry 1.6.1. You can update Dreamweaver CS3 to Spry 1.6.1 by downloading the Spry updater from http://www.adobe.com/go/labs_spry_download.
Hopefully, that should fix your problem.
Maybe you are looking for
-
Reconnect wireless printer - Deskjet 3050
Hi, I've got the deskjet 3050 printer, i succesfully installed and connected my printer to my home network. I've now moved down to uni and i've got a new router. I was just wondering how do i reconnect my printer to this new network. I tried the "upd
-
I've got an error when trying to programmatically set a CrystalReports data-source
I've got the following existing process that I needed to add to in order to programmatically set the data-source (server, database, username, and password) from a config.xml file. I added the ‘addDBConnection’ and ‘searchConfig’ parts, and this seems
-
Creating a custom role does not show up whe creating a user
On portal 10.1.4 I have followed the directions in 10.1.4 Oracle Server Portal Configuration Guide.section 6.1.6.9.1 Example: Defining a User Administrator Role. However, the newly created role does not show up when I create a new user. Any suggestio
-
Hi Guys, Do we have any standard Worflow given by SAP relating to MIRO. Regards, Madhu.
-
I have a servlet that gets submited to, and it will send out an email. Some time it take longer than usual so I want the servlet to be able to display a message like "Please wait...", then once the email is sent the servlet will redirect them. How ca