Hi, I am a beginer in designing webs, however so far I could solve most of my problems - mainly by great forums like this one. Here is one issue that I just can’t solve no meter how much I read up and try different options. It is a very stubborn problem with Accordion spry in DW. It works perfectly in IE and it does not work well in Firefox. The problem is that Firefox accordion remains fixed height of the content panel. When the list is longer than 200px the content overlaps labels underneath instead of extend the height of the content panel. I am trying to fix it for days now and everything fails. I noticed that when I change js this.useFixedPanelHeights = true; to this.useFixedPanelHeights = null it expands one tab correctly but after that all other behaviors are messed up.
The site page is :
http://www.mapkazdaszkiem.com/mapa%20Gdyni%20-%20hotel%20w%20Gdyni.html
(the website is in Polish, but don’t worry the site is self-explainable )
The accordion on the left panel is the one that I am talking about above.
Here is the spryAccordion.css:
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
*
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
*
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
*/
.Accordion {
width: 116px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-style: none;
background-repeat: no-repeat;
overflow: hidden;
padding: 0px;
position: relative;
}
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
*
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
*/
.AccordionPanel {
margin: 0px;
width: auto;
/* [disabled]background-image: url(../../przycisk-na-boczne-menu.gif); */
background-repeat: no-repeat;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: auto;
overflow: visible;
color: #FFF;
}
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
*
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
*
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
*/
.AccordionPanelTab {
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(../../przycisk-na-boczne-menu.gif);
height: 30px;
width: auto;
background-repeat: no-repeat;
background-position: left top;
text-align: center;
vertical-align: bottom;
background-attachment: scroll;
color: #CF6;
margin: 0px;
font-family: "Myriad Pro Cond";
border-top-width: 0px;
border-bottom-width: 0px;
border-top-style: none;
border-bottom-style: none;
border-right-style: none;
border-left-style: none;
border-right-width: 0px;
border-left-width: 0px;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
overflow: visible;
}
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
*
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
*
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
*/
.AccordionPanelContent {
overflow: visible;
margin: 0px;
padding: 0px;
height: 200px;
color: #FFF;
visibility: inherit;
}
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
*/
.AccordionPanelOpen .AccordionPanelTab {
background-image: url(../../przycisk-na-boczne-menu.gif);
}
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
*/
.AccordionPanelTabHover {
color: #33FFCC;
background-image: url(../../przycisk-na-boczne-menu-hov.gif);
height: 30px;
width: 125px;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
background-image: url(../../przycisk-na-boczne-menu-hov.gif);
}
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
*/
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
}
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
*/
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;
}
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
}
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
}
}
And here is spryAccordion.js:
// SpryAccordion.js - version 0.17 - 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.Accordion = function(element, opts)
{
this.element = this.getElement(element);
this.defaultPanel =0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = true;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
if (this.element)
this.attachBehaviors();
};
Spry.Widget.Accordion.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};
Spry.Widget.Accordion.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.Accordion.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.Accordion.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.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
{
if (panel)
this.addClassName(this.getPanelTab(panel), this.hoverClass);
return false;
};
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
{
if (panel)
this.removeClassName(this.getPanelTab(panel), this.hoverClass);
return false;
};
Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
var panelA = this.currentPanel;
var panelB;
if (typeof elementOrIndex == "number")
panelB = this.getPanels()[elementOrIndex];
else
panelB = this.getElement(elementOrIndex);
if (!panelB || panelA == panelB)
return null;
var contentA = panelA ? this.getPanelContent(panelA) : null;
var contentB = this.getPanelContent(panelB);
if (!contentB)
return null;
if (this.useFixedPanelHeights && !this.fixedPanelHeight)
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
if (this.enableAnimation)
{
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
}
else
{
if(contentA)
{
contentA.style.display = "none";
contentA.style.height = 0;
}
contentB.style.display = "block";
contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
}
if(panelA)
{
this.removeClassName(panelA, this.openClass);
this.addClassName(panelA, this.closedClass);
}
this.removeClassName(panelB, this.closedClass);
this.addClassName(panelB, this.openClass);
this.currentPanel = panelB;
return panelB;
};
Spry.Widget.Accordion.prototype.closePanel = function()
{
// The accordion can only ever have one panel open at any
// give time, so this method only closes the current panel.
// If the accordion is in fixed panel heights mode, this
// method does nothing.
if (!this.useFixedPanelHeights && this.currentPanel)
{
var panel = this.currentPanel;
var content = this.getPanelContent(panel);
if (content)
{
if (this.enableAnimation)
{
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
}
else
{
content.style.display = "none";
content.style.height = "0px";
}
}
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
this.currentPanel = null;
}
};
Spry.Widget.Accordion.prototype.openNextPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() + 1);
};
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() - 1);
};
Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
return this.openPanel(0);
};
Spry.Widget.Accordion.prototype.openLastPanel = function()
{
var panels = this.getPanels();
return this.openPanel(panels[panels.length - 1]);
};
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
{
if (panel != this.currentPanel)
this.openPanel(panel);
else
this.closePanel();
if (this.enableKeyboardNavigation)
this.focus();
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.Accordion.prototype.onFocus = function(e)
{
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.Accordion.prototype.onBlur = function(e)
{
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
{
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var panels = this.getPanels();
if (!panels || panels.length < 1)
return false;
var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
while (nextPanel)
{
if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
break;
nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
}
if (nextPanel && currentPanel != nextPanel)
this.openPanel(nextPanel);
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
{
if (!panel)
return;
var tab = this.getPanelTab(panel);
if (tab)
{
var self = this;
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
}
};
Spry.Widget.Accordion.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.Accordion.prototype.initPanel = function(panel, isDefault)
{
var content = this.getPanelContent(panel);
if (isDefault)
{
this.currentPanel = panel;
this.removeClassName(panel, this.closedClass);
this.addClassName(panel, this.openClass);
// Attempt to set up the height of the default panel. We don't want to
// do any dynamic panel height calculations here because our accordion
// or one of its parent containers may be display:none.
if (content)
{
if (this.useFixedPanelHeights)
{
// We are in fixed panel height mode and the user passed in
// a panel height for us to use.
if (this.fixedPanelHeight)
content.style.height = this.fixedPanelHeight + "px";
}
else
{
// We are in variable panel height mode, but since we can't
// calculate the panel height here, we just set the height to
// auto so that it expands to show all of its content.
content.style.height = "auto";
}
}
}
else
{
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
if (content)
{
content.style.height = "0px";
content.style.display = "none";
}
}
this.attachPanelHandlers(panel);
};
Spry.Widget.Accordion.prototype.attachBehaviors = function()
{
var panels = this.getPanels();
for (var i = 0; i < panels.length; i++)
this.initPanel(panels[i], i == this.defaultPanel);
// Advanced keyboard navigation requires the tabindex attribute
// on the top-level element.
this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
if (this.enableKeyboardNavigation)
{
var self = this;
Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
}
};
Spry.Widget.Accordion.prototype.getPanels = function()
{
return this.getElementChildren(this.element);
};
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
{
return this.currentPanel;
};
Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
{
var panels = this.getPanels();
for( var i = 0 ; i < panels.length; i++ )
{
if( panel == panels[i] )
return i;
}
return -1;
};
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
{
return this.getPanelIndex(this.currentPanel);
};
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
{
if (!panel)
return null;
return this.getElementChildren(panel)[0];
};
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
{
if (!panel)
return null;
return this.getElementChildren(panel)[1];
};
Spry.Widget.Accordion.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.Accordion.prototype.focus = function()
{
if (this.element && this.element.focus)
this.element.focus();
};
Spry.Widget.Accordion.prototype.blur = function()
{
if (this.element && this.element.blur)
this.element.blur();
};
/////////////////////////////////////////////////////
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
this.timer = null;
this.interval = 0;
this.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;
this.onComplete = null;
this.panel = panel;
this.panelToOpen = accordion.getElement(panel);
this.panelData = [];
this.useFixedPanelHeights = accordion.useFixedPanelHeights;
Spry.Widget.Accordion.setOptions(this, opts, true);
this.interval = Math.floor(1000 / this.fps);
// Set up the array of panels we want to animate.
var panels = accordion.getPanels();
for (var i = 0; i < panels.length; i++)
{
var p = panels[i];
var c = accordion.getPanelContent(p);
if (c)
{
var h = c.offsetHeight;
if (h == undefined)
h = 0;
if (p == panel && h == 0)
c.style.display = "block";
if (p == panel || h > 0)
{
var obj = new Object;
obj.panel = p;
obj.content = c;
obj.fromHeight = h;
obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
obj.distance = obj.toHeight - obj.fromHeight;
obj.overflow = c.style.overflow;
this.panelData.push(obj);
c.style.overflow = "hidden";
c.style.height = h + "px";
}
}
}
};
Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
var self = this;
this.startTime = (new Date).getTime();
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
if (this.timer)
{
clearTimeout(this.timer);
// If we're killing the timer, restore the overflow
// properties on the panels we were animating!
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
obj.content.style.overflow = obj.overflow;
}
}
this.timer = null;
};
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
{
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
if (obj.panel != this.panel)
{
obj.content.style.display = "none";
obj.content.style.height = "0px";
}
obj.content.style.overflow = obj.overflow;
obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
}
if (this.onComplete)
this.onComplete();
return;
}
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
}
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
})(); // EndSpryComponent
