Capturing user clicks within Spry Tabbed Panels

Hi,
I am using the spry tabbed panels with CS3 for the first time
and need to capture when a user clicks on a new tab. I need this to
re-set a PHP variable when the user navigates to a new tab but
cannot see any documented way of getting this trigger.
Any help would be much appreciated!

pixel1024 wrote:
> I am using the spry tabbed panels with CS3 for the first
time and need to
> capture when a user clicks on a new tab. I need this to
re-set a PHP variable
> when the user navigates to a new tab but cannot see any
documented way of
> getting this trigger.
Spry is a client-side technology; PHP is server-side. To
reset a PHP
variable, you need to communicate with the server. I have
done only very
limited experimentation with using Spry 1.6 to communicate
with PHP on
the server, so can't offer much advice. However, you might
find the
following page points you in the right direction (view the
source code
to see how it's done on the client side):
http://labs.adobe.com/technologies/spry/samples/form_submission/SubmitFormWithXHRSample.ph p.html
That example uses onsubmit with a form. I haven't tried it,
but you
should be able to adapt it by using onclick.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Similar Messages

  • Internal Links in Spry tabbed Panels

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

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

  • Spry Tabbed Panels- Open link on click

    I am completely new to Dreamweaver and web design in general so please bear with me. I have created a tab menu using Spry Tabbed Panels but dont know how to make it so once a tab has been clicked an html file (ex. tab1.html which is saved on my computer) opens in the content portion, not open a new window.Can anyone post a tutorial or if its simple enough, post some directions?
    Any help would be appreciated!

    Spry Tabbed Panels are not a "menu" per se, but a series of panels, all but one of which remain hidden until their tab is clicked. Tabbed Panels is a Spry "disclosure" widget. All the content may actually exist on the same page as the Tabbed Panels widget, or you can use <iframe></iframe> to 'surface' other pages in your Tabbed Panel Content divs.
    As it sounds as if you want to use the <iframe> approach, here's how:
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">First Panel</li>
        <li class="TabbedPanelsTab" tabindex="0">Second Panel</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">This is the content of the first panel <br /><iframe src="heirloom.html" width="100%" height="800" frameborder="0"></iframe></div>
        <div class="TabbedPanelsContent">This is the content of the second panel <br /><iframe src="data.html" width="100%" height="500"></iframe></div>
      </div>
    </div>
    You can also omit the frameborder="0" if you want to keep the default look of an iframe. Remember to give both a height and a width to your iframes. Test them in several different browsers (or BrowserLab) to make sure they look the way you want.
    Beth

  • Spry Tabbed Panels - Forms within Panels

    Any thoughs on how to place updatable Forms within Tabbed
    Panels. I thought it might be interesting to try to use the Spry
    Tabbed Panels to allow Updating specific areas of a database using
    each tab to update specific fields of a table. When doing this
    using the Update server behavior I create all sorts of variable
    issues.
    Anybody have thoughts on this... or an alternate method to
    create the same effect?

    Hi Gramps-
    Were you able to use the widget in Firefox?  For me, it just displays of the panels, one on top of the other and no tabs.  Maybe my browser's broken (that would be the best case scenario).  I'll start there.
    Thanks!
    Dianne

  • Spry tabbed panels, all content showing on one page, please help?

    Hi there,
    I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
    I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
    Here is the code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DND Perspective</title>
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-color: #2B3856;
    .style1 {
    color: #FFFFFF;
    .style4 {
    color: #FFFFFF;
    font-size: 36px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin-left: 250px;
    .style5 {color: #CCCCCC}
    .style11 {
    font-size: 18pt;
    font-style: italic;
    a:link {
    color: #FFFF00;
    a:visited {
    color: #000000;
    a:hover {
    color: #000033;
    -->
    </style></head>
    <body>
    <div align="center">
      <p align="left" class="style4">DND  </p>
    </div>
    <p align="left">
    <img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" />  </p>
    <p align="center">
    <p align="center">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup" >
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
        <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent style1">
          <div align="center">
            <p class="style11">Welcome to DND </p>
            <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
            <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
            <p>Please visit our services page to discover all photography sessions we have available such as:</p>
            <p>Wedding Photography</p>
            <p> Engament Photos</p>
            <p>Senior Portraits </p>
            <p>Anniversary</p>
            <p>&amp; More!!!</p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
        </div>
        <div class="TabbedPanelsContent">Under Construction...</div>
        <div class="TabbedPanelsContent">Under Construction....</div>
        <div class="TabbedPanelsContent style1">
    <p>We hear at DND  understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &amp;
    packages, custom videos, thank you cards and albums.</p>
               <hr width="50%" align="left" />
          <p><strong>Package 1 - $500.00</strong></p>
          <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 2 - $575.00</strong></p>
          <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 3 - $700.00</strong></p>
          <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
               <hr width="50%" align="left" />
          <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
          <p>Individual prices: 8&quot;x10&quot; = $12.99; 10&quot;x13&quot; = $19.99; 2 - 5&quot;x7&quot; = $12.99; 4 - 4&quot;x6&quot; = $11.99</p>
          <p>(Custom sizes available - Custom framing available)</p>
          <p><strong>Package 1:</strong></p>
          <p>3 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $50.00</p>
          <p><strong>Package 2:</strong></p>
          <p>5 - 8&quot;x10&quot;; 6 - 5&quot;x7&quot;; 6 - 4&quot;x6&quot; = $90.00</p>
          <p><strong>Package 3:</strong></p>
          <p>8 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $125.00</p>
          <p><strong>Package 4:</strong> (Basic Prints)</p>
          <p>Any 100 photos printed 4&quot;x6&quot; = $100.00</p>
               <hr width="50%" align="left" />
          <p><strong>Custom video:</strong>**</p>
          <p>Any 100 photos put to royalty-free music = $50.00</p>
              <hr width="50%" align="left" />
          <p><strong>Custom thank you cards for your guests:</strong>**</p>
          <p>300 cards - 4&quot;x6&quot; = $350.00</p>
          <p>100 cards - 4&quot;x6&quot; = $150.00</p>
         <hr width="50%" align="left" />
          <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
          <p>Bride &amp; Groom Albums</p>
          <p>Parent Albums</p>
               <hr width="50%" align="left" />
          <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
        </div>
        <div class="TabbedPanelsContent style5">
          <p> Contact DND Perspective:</p>
          <p>The best way to reach us is via email .</p>
          <p>You can alternately reach us anytime at ...!</p>
        </div>
        <div class="TabbedPanelsContent">
          <div align="center">
            <p><span class="style1">About Info</span></p>
            <p> </p>
          </div>
        </div>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
      </script>
    </body>
    </html>

    You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
    Correct these links:
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    And you should be good to go.
    Beth
    ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
    B

  • 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);
    })(); // EndSpryComponent

    Note - 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&amp;A.html">C &amp; 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&amp;A.html">C &amp; 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;

  • Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like

    Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
    This started all of a sudden.
    The entire website is a series of spry tabbed panels.
    http://pacificlaser.com/const.html
    if you click on General construction tab things work ok...
    if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
    ive been looking for the answer for 4 months with no success.
    Hope a fellow dreamwever-person can help
    Thanks Rick

    You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
    Correct these links:
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    And you should be good to go.
    Beth
    ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
    B

  • Multi page recordset output from ASP page on Spry Tabbed Panel Widget

    I am using a simple Spry Tabbed panel set on my asp page to show the output from different ASP pages, inside the tabbed panels. The tabbed panels on the page under consideration (destination page) display the output from different asp pages (source pages). The source asp pages generate multi page outputs which are paginated on the source page itself and pagination links are displayed on the source page itself.
    However, we dont want to display the source page outside of the tabbed panel, but instead the output content from the source asp pages should show inside the tabbeed panels only. The first page generated by the source asp page displays correctly inside the tabbed panel. However, when the user clicks on the links for the next page generated by the source asp page, but which is being displayed inside the destination page tabbed panel, they dont display the next page inside the tabbed panel. Instead the source asp page displays the output outside the tabbed panel destination  page.
    Please advise on how to ensure that the user can page through the recordset generated by the source asp page by clicking on the pagination links at the bottom of the records, while ensuring that the output displays within the tabbed panels on the destination asp page.
    I am enclosing the source code being used to generate the spry tabbed panel widget and also updating it with the output from the source asp page. In this case, the code given below is from the main page containing the widget and the source asp page is "sample.asp", which generates multi page output.
    Please note that I am not too keen on using xml data sets output from the source asp page, but would be more comfortable with directly using the asp pages to fill the tabbed panel content.
    Please help
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script src="/SpryAssets/xpath.js" type="text/javascript"></script>
    <script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
    <link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
           <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div id=two class="TabbedPanelsContent">Content 1</div>
        <div class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>

    I fully agree that the problem does not lie with tthe tabbed panels.
    The solution would probably be first required to be tried using ajax on any div tab.
    Then the same code would have to be used on Sprytabbed panel. Hence, the following may be advised:
    1. Sample code for server side pagination and displaying inside any div tag and refreshing it using ajax. the update link would also lie inside the div tag which would show the next/ previous page without reloading the page.
    2. Then adapting the refresh technique using ajax in the Spry Tabbed panel using the inbuilt updatecontent method of the Spry Tabbed panels.
    In order to achieve the above, I am getting the recordset output in the tab content as expected. The recordset is also getting the pagination links from server side asp as required.
    However, it is also generating the following error.
    Webpage error details
    Message: Unterminated string constant
    Line: 9
    Char: 56
    Code: 0
    URI: http://localhost/test/test5.asp
    The sourcecode is as given below. If you can help with the error indicated above, my problem would probably get solved.
    <html><head>
    <title>Untitled Document</title>
    <link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
    <script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
    <script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
    <script src="/SpryAssets/xPath.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('one','untitled-5.asp');">Tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0" >Tab 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div id=one class="TabbedPanelsContent">Content 1</div>
        <div id ="two" class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>

  • Help Using Spry tabbed panel as a menu.

    Thanks in advance to all who take the time to read and any assistance you can offer.
    I'm picking up where someone else started a website. They used Spry tabbed panels as a menu system (CS4). Each Panel is a top-level "menu" and when it opens, sub-menus (hyperlinks) come up vertically under the panel.  I REALLY don't want to start over if I don't have to - need the site up and running - but cannot figure out how to make the "HOME" tabbed panel (the first one) actually take users back to the home page.  For now, I've created a "submenu" (link) under HOME tabbed panel to help the user navigate back to the home page.
    HELP? 
    http://www.orange.k12.nc.us/ec/beta/default.html

    Thank you Gramps - for your prompt and helpful response!  Your solution absolutely fixed the problem I asked about.
    If I had followed forum advisories and asked the question correctly, the navigation on this website would probably be working perfectly by now. Your solution fixes the home page.  Can you look at one more page and advise please??
    On the "subpages" of this site, the same tabbed panel "fake menu" exists.  I replaced the equivalent line of code in the template for those pages (at line 45) with what you gave me.  I'm obviously missing something in the code to send the user back to the HOME page from these pages.
    In the sample link below, you will be starting from a "subpage" of the site.  Clicking on the "HOME" tab leads you not to the actual home page (default.html in the root directory) but to a default.html page within the subdirectory for the page you are on (which doesn't exist.)  Can I add something to that line of code to get them back to the home page?
    Again... thank you!!
    http://www.orange.k12.nc.us/ec/beta/Students/Student_Resources.html

  • Spry Tabbed Panel Defaults to home page with recordset paging

    I have Spry ver. 1.6.1.  A Spry Tabbed Panel titled "Check Ride Activity Report" (Tab 6)  accesses a mysql database and shows the records in a table format.  Instead of having all the records display at once I want to limit the records displayed to a few at a time. e.g. 5 per page.   I added a recordset navigation bar and set the $maxRows_GetChkRideRecs = 5;  It works but each time the navigation bar "Next" or "Last" or "First" or "Previous" is clicked the page reloads with the default Home page Tab displayed.  The user then has to click on Tab 6  to view the new results.  The url where this can be viewed is at http://Training.reliantair.com.  Is there a way to code this tab so that Tab 6 remains the default tab once it is selected until the user selects another tab?
    I want to avoid putting another  button on the page to accomplish this as shown in the spry utils samples where the user clicks to set the default tab.
    Can this be done within the recordset paging code similar to how it is done on a form submit to keep the focus on the current tab?

    I didn't try the cookie method suggested.  The tab method listed in spry utils does work but requires an additional button, so I came up with this solution.
    In the Head of the HTML document I put this code.  It searches for the query string in the HREF when any of the record paging buttons is pressed.
    <script type="text/javascript" src="SpryURLUtils.js"></script>
    <script type="text/javascript">
    var params = Spry.Utils.getLocationParamsAsObject();
    if (location.href.indexOf("GetChkRideRecs") != -1  && location.href.indexOf("tab") == -1)
      location.href +="&tab=5#TabbedPanels1"; 
    </script>
    Then in the body of the HTML document at the bottom of the page  the tabbed panel widget is changed like this:
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab: (params.tab ? params.tab:0)});
    The first time a recordset paging link is  clicked the HREF attribute of &tab=5#TabbedPanels1 is added to the location HREF.  Subsequent clicks of any of the links do not change the HREF because the code looks for "tab" and does nothing if it is found.

  • Spry Tabbed Panel Problem

    Thanks in advance to anyone who can help. I'm having a problem with my spry tabbed panel. It works but the actual CSS isn't working on the spry. The panel goes down onto the content.
    Here is a screen cap: http://img32.imageshack.us/img32/2598/53451133.jpg
    Coding:
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container. For our
    * default style, this container does not contribute anything visually,
    * but it is floated left to make sure that any floating or clearing done
    * with any of its child elements are contained completely within the
    * TabbedPanels container, to minimize any impact or undesireable
    * interaction with other floated elements on the page that may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels widget, set a
    * width on the TabbedPanels container. By default, the TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
        margin: 0px;
        padding: 0px;
        float: left;
        clear: none;
        width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    /* This is the selector for the TabGroup. The TabGroup container houses
    * all of the tab buttons for each tabbed panel in the widget. This container
    * does not contribute anything visually to the look of the widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This container houses
    * the title for the panel. This is also the tab "button" that the user clicks
    * on to activate the corresponding content panel so that it appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1 pixel down from
    * where it wold normally render. This allows each tab to overlap the content
    * panel that renders below it. Each tab is rendered with a 1 pixel bottom
    * border that has a color that matches the top border of the current content
    * panel. This gives the appearance that the tab is being drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this selector is not
    * necessary to make the widget function. You can use any class name you want
    * to style this tab container.
    .TabbedPanelsTab {
        position: relative;
        top: 1px;
        float: left;
        padding: 4px 10px;
        margin: 0px 1px 0px 0px;
        font: bold 0.7em sans-serif;
        background-color: #DDD;
        list-style: none;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #999;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        -moz-user-select: none;
        -khtml-user-select: none;
        cursor: pointer;
    /* This selector is an example of how to change the appearnce of a tab button
    * container as the mouse enters it. The class "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
        background-color: #CCC;
    /* This selector is an example of how to change the appearance of a tab button
    * container after the user has clicked on it to activate a content panel.
    * The class "TabbedPanelsTabSelected" is programatically added and removed
    * from the tab element as the user clicks on the tab button containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are positioned
    * 1 pixel down from where it would normally render. When the tab button is
    * selected, we change its bottom border to match the background color of the
    * content panel so that it looks like the tab is part of the content panel.
    .TabbedPanelsTabSelected {
        background-color: #EEE;
        border-bottom: 1px solid #EEE;
    /* This selector is an example of how to make a link inside of a tab button
    * look like normal text. Users may want to use links inside of a tab button
    * so that when it gets focus, the text *inside* the tab button gets a focus
    * ring around it, instead of the focus ring around the entire tab.
    .TabbedPanelsTab a {
        color: black;
        text-decoration: none;
    /* This is the selector for the ContentGroup. The ContentGroup container houses
    * all of the content panels for each tabbed panel in the widget. For our
    * default style, this container provides the background color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
        clear: both;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #CCC;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        background-color: #EEE;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
        padding: 4px;
    /* This selector is an example of how to change the appearnce of the currently
    * active container panel. The class "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules above so that the
    * TabbedPanels widget renders with its tab buttons along the left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will have to be made
    * to switch a horizontal tabbed panels widget to a vertical tabbed panels
    * widget, is to use the "VTabbedPanels" class on the top-level widget
    * container element, instead of "TabbedPanels".
    /* This selector floats the TabGroup so that the tab buttons it contains
    * render to the left of the active content panel. A border is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
        float: left;
        width: 10em;
        height: 20em;
        background-color: #EEE;
        position: absolute;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #CCC;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTab {
        float: none;
        margin: 0px;
        border-top: none;
        border-left: none;
        border-right: none;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
        background-color: #EEE;
        border-bottom: solid 1px #999;
    /* This selector floats the content panels for the widget so that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
        clear: none;
        float: left;
        padding: 0px;
        width: 30em;
        height: 20em;

    Hi Ben,
    I creat a new page ( a simple page...):
    http://dev.achab.it/test/test.htm
    Our web-graphics are insert into
    <script type="text/javascript" src="../common/js_func/parameters.js"></script>
    the SpryTabbedPanels.js scripts.
    On the new simple, you can click to 4 Tabs on the left.
    If you want to see the 5 or 6 content tab you can click the label into the 3 or 5 content tab.
    When you click on the label "here" on the 3° Tab (for example), you can see the content change and the "Tab 3" is not selected.
    I'd like to change the content and leave the "Tab 3" selected.
    I hope in your help :-)
    thank in advance
    regards
    Stefano

  • Spry tabbed panels - question about hover

    Hello, I am relatively new to Dreamweaver and Spry, but have made a website using vertical Tabbed Panels that finally looks ALMOST like I want it. I am sure that I have done some things that could be much simpler though…
    http://web.me.com/marinka9170/JL_test/JL_test.html
    My problem is that I would like the tabs to stay in their hover state (so coloured and wider) when you navigate to the content panel (until you hover over the next tab of course), instead of going back to their standard grey. How do I do that?
    And my other question is: in the content panels I have used custom bullets. Is there a way to assign a different custom bullet for each content panel? Do I number the content panels, like I have done with the tabs?
    Any hints, tips, solutions are appreciated!
    Thanks,
    Marinka

    I indeed see that your example works, but I think in my code there is some sort of conflict going on
    I have copied the Source Code and the SpryTabbedPanels.ccs below and 'bolded' the parts where I think the problem is. It is probably in splitting the different tabs in 5, right?
    I am sorry for asking these stupid questions. It's all quite new to me, but I've ordered a book to study more. It's just not in yet
    Thanks again for your help! Really appreciate it!
    Marinka
    <!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" />
    <meta name="description" content="description goes here">
    <meta name="keywords" content="">
    <meta name="author" content="metatags generator">
    <meta name="robots" content="index, follow">
    <meta name="revisit-after" content="3 month">
    <title>JL_test</title>
    <style type="text/css">
    <!--
    body {
    font: 12px/17px Verdana, Arial, Helvetica, sans-serif;
    background: #FFF;
    color: #000;
    .TabbedPanelsTab1:hover {
    background-color: #15375E
    .TabbedPanelsTab2:hover {
    background-color: #016596
    .TabbedPanelsTab3:hover {
    background-color: #00A0AF
    .TabbedPanelsTab4:hover {
    background-color: #679145
    .TabbedPanelsTab5:hover {
    background-color: #B4D88B
    .TabbedPanelsContent ul#tab1 {
    list-style-image: url(Website_03-web-images/bullet1.png)
    .TabbedPanelsContent ul#tab2 {
         list-style-image: url(Website_03-web-images/bullet2.png)
    .TabbedPanelsContent ul#tab3 {
         list-style-image: url(Website_03-web-images/bullet3.png)
    .TabbedPanelsContent ul#tab4 {
         list-style-image: url(Website_03-web-images/bullet4.png)
    .TabbedPanelsContent ul#tab5 {
         list-style-image: url(Website_03-web-images/bullet5.png)
    ul {
    padding: 0;
    margin: 0;
    ol, dl, ul {
    padding-right: 15px;
    padding-left: 5px;
    margin: 0 0 0 15px;
    list-style-type: none;
    list-style-position: outside;
    text-indent: 0px;
    h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 17px;
    p {
    margin: 0;
    line-height: 17px;
    padding-right: 15px;
    a img {
    border: none;
    a:link {
    color: #b4d88b;
    text-decoration: none;
    a:visited {
    text-decoration: none;
    a:hover, a:active, a:focus {
    text-decoration: none;
    color: #016596;
    .container {
    width: 1024px;
    background: #FFFFFF;
    margin: 0 auto;
    .content {
    background: #FFFFFF;
    clear: both;
    height: 200px;
    margin-top: 50px;
    .header {
    background: #FFF;
    width: 1024px;
    height: 120px;
    .column1 {
    float: left;
    width: 338px;
    background: #15375E;
    height: 20px;
    .column2 {
    width: 348px;
    float: left;
    background: #016596;
    height: 20px;
    .column3 {
    float: left;
    width: 338px;
    background: #679245;
    height: 20px;
    .placeholder {
    width: 1024px;
    height: 400px;
    clear: both;
    .footer {
    padding: 0px;
    background: #FFF;
    position: relative;
    clear: both;
    width: 280px;
    text-align: right;
    .fltrt {
    float: right;
    margin-left: 8px;
    .fltlft {
    float: left;
    margin-right: 8px;
    .clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
    -->
    </style>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_callJS(jsStr) { //v2.0
      return eval(jsStr)
    </script>
    <style type="text/css">
    h1,h2,h3,h4,h5,h6 {
    h1 {
    font-family: Verdana, Geneva, sans-serif;
    color: #15375e;
    font-weight: bold;
    font-size: 14px;
    h2 {
    font-family: Verdana, Geneva, sans-serif;
    color: #016596;
    font-weight: bold;
    font-size: 14px;
    h3 {
    color: #00A0AF;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    h4 {
    color: #679145;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    h5 {
    color: #B4D88b;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    .container .content #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent table tr {
    vertical-align: top;
    .container .footer copyright {
    </style>
    <div class="container">
      <div class="header"><!-- end .header --><img name="" src="" width="1024"
      " height="120" alt="logo" style="background-color: #FFFFFF" align="right" /></div>
      <div class="column1"></div>
      <div class="column2"></div>
      <div class="column3"><!-- end .column3 --></div>
      <div class="placeholder"><img src="Website_03-web-images/JL_ice.jpg" width="1024" height="400" alt="" /></div>
       <div class="content">
        <div id="TabbedPanels1" class="VTabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab1" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">home</li>
            <li class="TabbedPanelsTab2" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">who are we?</li>
            <li class="TabbedPanelsTab3" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">our services</li>
            <li class="TabbedPanelsTab4" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">sectors of activity</li>
            <li class="TabbedPanelsTab5" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">contact</li>
          </ul>
         <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
    <table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                    <home>
                      <h1>news</h1>
                    </home>
                    <p>News items can go here. Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                      Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                      Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
    </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
                    <h1> </h1>
                    <p>Dandem quamendit as pelendae placiamus adipiet, voluptur minctis ad qui sinctur repercia dolorerum aceatiis est aut erchil maio qui nobis accupta.<br />
                      ssimpe qui omniscid quunt id molupti orrorpor res estrumquae lab ipician debitaq uature, optate nobis ut illaborrum diae placit id moloreribus doluptatur, unt rehent laborent rempori tassed ma non ne id qui rem voluptatur mos.<br />
                      Apist rem fugit et, corepuda con reperum auts esendip.</p>
                  </div></td>
                </tr>
              </table>
            </div>
        <div class="TabbedPanelsContent">
         <table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                    <h2>who are we?</h2>
                    <p>Who are we? Why are we here? What do we do? Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                      Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                      Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
    </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
                    <h3><img src="" alt="Photo" width="338" height="200" hspace="0" vspace="0" align="texttop" /></h3>
                  </div></td>
                </tr>
              </table></div>
        <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                  <h3>our services</h3>
          <ul id="tab3">
            <li>Service 1 - description of the type of service goes here with a possible hyperlink or something</li>
            <li>Service 2</li>
            <li>Service 3</li>
          </ul>
        </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
    </div></td>
                </tr>
              </table></div>
            <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                  <h4>sectors of activity</h4>
          <ul id="tab4">
            <li>Sector 1 - description of the sector of activity goes here with a possible hyperlink or something</li>
            <li>Sector 2</li>
            <li>Sector 3</li>
            </ul>
        </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
    </div></td>
                </tr>
              </table></div>
         <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                  <h5>contact</h5>
                    <p>Name</p>
                    <p>Telephone number: +12 3456 7890</p>
                    <p>email: <a href="mailto:[email protected]">[email protected]</a></p>
                  </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
                  </div></td>
                </tr>
              </table></div>
          </div>
        </div>
      <!-- end .content --></div>
      <div class="footer">
        <copyright>©2011  <!-- end .footer --></copyright>
      </div>
    <!-- end .container --></div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container. For our
    * default style, this container does not contribute anything visually,
    * but it is floated left to make sure that any floating or clearing done
    * with any of its child elements are contained completely within the
    * TabbedPanels container, to minimize any impact or undesireable
    * interaction with other floated elements on the page that may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels widget, set a
    * width on the TabbedPanels container. By default, the TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 338px;
    height: 30px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    /* This is the selector for the TabGroup. The TabGroup container houses
    * all of the tab buttons for each tabbed panel in the widget. This container
    * does not contribute anything visually to the look of the widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This container houses
    * the title for the panel. This is also the tab "button" that the user clicks
    * on to activate the corresponding content panel so that it appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1 pixel down from
    * where it wold normally render. This allows each tab to overlap the content
    * panel that renders below it. Each tab is rendered with a 1 pixel bottom
    * border that has a color that matches the top border of the current content
    * panel. This gives the appearance that the tab is being drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this selector is not
    * necessary to make the widget function. You can use any class name you want
    * to style this tab container.
    .TabbedPanelsTab {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375e;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab1 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab2 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab3 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab4 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab5 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    /* 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 {
    color: #fff;
    height: 30px;
    width: 300px;
    /* 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 {
    height: 30px;
    width: 300px;
    /* 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 {
    /* This is the selector for the ContentGroup. The ContentGroup container houses
    * all of the content panels for each tabbed panel in the widget. For our
    * default style, this container provides the background color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
    clear: both;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    background-color: #FFF;
    /* 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: 0px 0px 0px 0px;
    list-style-image: url(file:///Macintosh%20HD/Users/marinka/Desktop/JL/optencia_website/images/bullet.png);
    /* 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 {
    padding-right: 10px;
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules above so that the
    * TabbedPanels widget renders with its tab buttons along the left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will have to be made
    * to switch a horizontal tabbed panels widget to a vertical tabbed panels
    * widget, is to use the "VTabbedPanels" class on the top-level widget
    * container element, instead of "TabbedPanels".
    .VTabbedPanels {
    overflow: hidden;
    /* 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: 338px;
    height: 240px;
    position: relative;
    overflow: hidden;
    /* 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 .TabbedPanelsTab1 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab2 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab3 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab4 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab5 {
    float: left;
    overflow: hidden;
    /* 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 {
    text-decoration:none;
    overflow: hidden;
    /* 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: 686px;
    height: 240px;
    background-color: #fff;
    /* 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;

  • Spry Tabbed Panels and Pop Up Link from Image Hotspot

    I've created an image map with Hotspot links to either send to another web page or to open a previously created Pop Up window with information.
    I've imported my image, image map and Hotspots into a tab
    The issue I'm having is when clicking on the hotspot (within the Spry tabbed panel), to open the pop up page; it doesn't work
    If I select a Hotspot which sends users to another web page, that works ok.
    Would appreciate it if someone else who has run into this and what your recommendation is for a fix.
    thanks, R Silva

    Hi,
    Unable to post to a public server; however I've attached the files so the code can be reviewed.
    thanks

  • How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?

    I have 5 of them all containing nested Apdiv within nested ApDivs (a long storie ) that I would like to insert into 5 tabs in the Spry Tabbed Panel.
    Please help.

    "Hi Gramp,I realize I have made hard work for myself but I really don't know any better. I also realize now that taking on this project may have been a mistake :-)I taught myself how to use the design side of Dream Weaver. These five ApDivs were created in the content area of the spry tool and it worked fine. (yes a lot of work though)For the first time I looked at the code side. I wanted to try to bring a peace of code from another page for something unrelated and when it didn't work I took it out and without noticing, deleting a line from the Spry tool.Of course like a classic newbe I was working without a backup copy so here I am. Loosing hours of tedious work and on the verve of tears :-)I do have some  questions though.  My APDiv
      What does "apDiv1" stands for and what does "My APDiv" stands for?Is the only thing I have to do is changing this line for my five ApDivs and paste it in the appropriate places in the code? Thanks again,Gilaad
    Date: Sat, 16 Jun 2012 20:39:07 -0600
    From: [email protected]
    To: [email protected]
    Subject: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel? 
        Re: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel? 
        created by Altruistic Gramps in Spry Framework for Ajax - View the full discussion 
    You have really made hard work for yourself by using APDiv's. I suppose it can be done, but I would not. To answer your question, I have create an example as per#apDiv1
    My APDiv
    Content 2
    Tab 1
    Gramps 
         Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4498679#4498679
         To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4498679#4498679. In the Actions box on the right, click the Stop Email Notifications link.
         Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
      For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Maybe you are looking for

  • My Skype is still crashing 7.4

    Hello, I have tried everything I found here but my skype is still crashing after a few seconds every time. It did work a few weeks but now it does not. here are details: Unhandled exception at 0x00000204 in Skype.exe: 0xC0000005: Access violation exe

  • How can I get a number of items from a group

    I'm trying to load assets into a library. Most of the assets are groups. I'd like to label each asset with number of items from that specific group. Here is my code: var d=app.activeDocument; //create empty library var library = app.libraries.add(Fil

  • Switching b/w Word Processing & Page Layout

    Is there a way to transfer from a doc in WP-mode to Page Layout mode? Sorry for this very obvious question, but I can seem to find any info in the documentation or on the forum. Any help is, of course, massively appreciated. Cheers!

  • Connect BO to SAP-BW system without using SAP Intergation Kit.

    Hi All, How Could we connect and do reporting in BO from SAP system without installing SAP INTEGARTION KIT ?? Like we could read data from Oracle by simply creating a Oracle connection in Desiger and all the tables are visible at universe level. Do w

  • Page Title showing up as 'home' in google

    Hello, In the metadatafield: 'Page title' I called the page 'beeldbewerking', but in Google Search the Page Title is showing up as 'home'. What's going wrong? Anyone??? Han