Accordion ignores useFixedPanelHeights after repost

i have a problem with the panels' height in the Accordion
widget. I have set the useFixedPanelHeights to false.Nevertheless,
when i repost the page ( i use ASP pages), it seems to ignore it!
Is there a way around this? You can check this behavior in
http://www.kentia.gr/testSite/products.asp..click
one of the main accordion categories and select one of the
products.
Thanks in advance
Kostas Lagos

Hello Diana,
thank you very much, your suggestion worked!! The fact is
that i had tried this earlier but didnt work, because i refreshed
the page without the Ctrl pressed. After i saw you posting, i did
the change again but this time pressed Ctrl + F5 due to my previous
frustration!And it worked!! :-)
Kostas Lagos

Similar Messages

  • NULL option of column command - ignore word after space in string

    Hi,
    I'm quit new to Oracle and SQL world.
    building simple SQL/Plus report through SQL Developer enviroment:
    I'm trying to use NULL option of COLUMN comand to output a meaningful string instead null.
    But, any word after space in string.
    Followings are what I wrote on worksheet and excute 'Run Script'.
    COLUMN firedate NULL 'active';
    COLUMN mentorid NULL 'no mentor';
    select lastname, firstname, mentorid, firedate from members;
    refer to line (COLUMN mentorid NULL 'no mentor';) the out put for the MentorId, display word no and ignore any word after space which is here word mentor.
    My environment:
    SqL Developer ver. 3.1.07.
    Oracle database 10g Express edition (10.2.0.1.0)
    windows XP
    Much appreciated.

    SQL Developer is still not 100% SQL Plus compatible. It may be that this isn't implemented properly yet.
    Does it work in SQL Plus?

  • Feature Request: Ignore text after the first "/" when sorting by artist

    Ok, so I figured that when sorting by artist, the word "the" is actually bypassed - Great thing! I've also figured that when I include a "/" after the first artist name (and add another artist), it goes last on it's sort zone. I think it would be nice to bypass the rest of what's written after the first "/", so that when sorting by artist I could get the correct album sequence as well.
    PowerBook G4 17" Alumunium   Mac OS X (10.4.5)   1GHz/1.5GB/80GB

    Have a look at this post. I am sure you can modify it for your particular data type.
    (slice out the first colum, create sort key, rebuilt 2D array according to key)
    LabVIEW Champion . Do more with less code and in less time .

  • Command Key has to be released and pressed each time, holding down command key for multiple commands ignoring all after first keystroke.  Have tried this in safe mode - still broken.

    This problem has just cropped up - pretty sure it's after the 10.7.3 upgrade.
    Scenario: I'm in pages and I'm doing a search. I need to find multiple instances of my search word.
    I hold down the command key and press the 'g' key - for find again. It works.
    While still holding down the command key - I hit the 'g' key again to do another find again. But instead of executing teh find again, hitting teh 'g' key the sdecond time types "g' over last search item found, acting as if teh command key was not still pessed.
    This is happening in DreamWeaver CS5.5, the latest Pages, and the latest BBEdit. Haven't checked all apps.
    This IS NOT a problem in the finder though - where command-tabbing brings up the app list properly, and tabs through while holding down teh command key and repeatedly hitting the tab key.
    I restarted in safe mode. Still a problem.
    First I cleaned the command key, then re-seating the key. I swapped keyboards, Still a problem.
    Did a PRAM reset, which didn't fix anything.
    I can't find any other post regarding this issue. Been using the mac for over 25 years and I've never seen this one.

    This turns out to be a problem with my KVM switcher. The USB port on the switcher for the keyboard is failing - hence the intermittent reaction to the command-key presses.
    I connected the keyboard directly to my mac and the problem was resolved - sorry I didn't check that before I posted this.

  • Accordion fade/appear stay's after clicking another tab/content

    Hi,
    In the accordion Tab i've putten the effect fade/appear on the image.
    Problem:
    When I close the panel by clicking on te accordion Content, the Tab stay's dark.
    This also stay's dark when I click on another Tab.
    After clicking on content or another Tab, the Tab which is dark needs to go back to the start position (like you hit F5).
    http://www.home-maastricht.nl/signage.html
    I hope you understand what the problem is.
    Thanks for your help!
    Carla

    There has to be a more elegant way to do this, but here goes
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Untitled Document</title>
    <link href="http://www.home-maastricht.nl/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" />
    <link href="http://www.home-maastricht.nl/SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" />
    <link href="http://www.home-maastricht.nl/mh1architecten.css" rel="stylesheet" />
    <link href="http://www.home-maastricht.nl/SpryAssets/SpryAccordion.css" rel="stylesheet" />
    <script src="SpryAssets/SpryAccordion.js"></script>
    <script src="SpryAssets/SpryEffects.js"></script>
    <script src="SpryAssets/SpryMenuBar.js"></script>
    <script src="SpryAssets/SpryCollapsiblePanel.js"></script>
    <script src="SpryAssets/SpryDOMUtils.js"></script>
    <script>
    function MM_effectAppearFade(targetElement, duration, from, to, toggle) {
        Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    function myClickHandler(event) {
        var ele = Accordion1.getCurrentPanel();
        var panelNumber = Accordion1.getPanelIndex(ele);
        MM_effectAppearFade(document.getElementById('tab'+panelNumber), 1000, 100, 30, true);
        Accordion1.closePanel(panelNumber);
    function Tab0ClickHandler(event) {
        var ele = Accordion1.getCurrentPanel();
        var panelNumber = Accordion1.getPanelIndex(ele);
        if (panelNumber == -1 || panelNumber == 0) {
            return;
        } else {
            MM_effectAppearFade(document.getElementById('tab'+panelNumber), 1000, 100, 30, true);
    function Tab1ClickHandler(event) {
        var ele = Accordion1.getCurrentPanel();
        var panelNumber = Accordion1.getPanelIndex(ele);
        if (panelNumber == -1 || panelNumber == 1) {
            return;
        } else {
            MM_effectAppearFade(document.getElementById('tab'+panelNumber), 1000, 100, 30, true);
    function Tab2ClickHandler(event) {
        var ele = Accordion1.getCurrentPanel();
        var panelNumber = Accordion1.getPanelIndex(ele);
        if (panelNumber == -1 || panelNumber == 2) {
            return;
        } else {
            MM_effectAppearFade(document.getElementById('tab'+panelNumber), 1000, 100, 30, true);
    </script>
    </head>
    <body>
    <div id="mainContentContent">
      <div id="Accordion1" class="Accordion">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">
            <div class="tab_fade"><img id="tab0" src="http://www.home-maastricht.nl/images/01-signage/banners/01-00-qpark-banner.jpg" width="700" height="120" onclick="MM_effectAppearFade(this, 1000, 100, 30, true)" />
              <div class="tab1_tekst">Q-Park</div>           
            </div>
          </div>
          <div class="AccordionPanelContent"><img src="http://www.home-maastricht.nl/images/01-signage/websiteformaat/01-00-qpark.jpg" alt="Q-Park" width="700" height="1050" /></div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">
            <div class="tab_fade"><img id="tab1" src="http://www.home-maastricht.nl/images/01-signage/banners/01-01-qpark-banner.jpg" width="700" height="120" onclick="MM_effectAppearFade(this, 1000, 100, 30, true)" />
                <div class="tab2_tekst">Q-Park</div>           
            </div>
          </div>
          <div class="AccordionPanelContent"><img src="http://www.home-maastricht.nl/images/01-signage/websiteformaat/01-01-qpark.jpg" alt="Q-Park" width="700" height="1050" /></div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">
            <div class="tab_fade"><img id="tab2" src="http://www.home-maastricht.nl/images/01-signage/banners/01-02-groenmetropool-banner.jpg" width="700" height="120" onclick="MM_effectAppearFade(this, 1000, 100, 30, true)" />
                <div class="tab3_tekst">Groenmetropool</div>           
            </div>
          </div>
          <div class="AccordionPanelContent"><img src="http://www.home-maastricht.nl/images/01-signage/websiteformaat/01-02-groenmetropool.jpg" width="700" height="933" alt="Groenmetropool Kreis Aachen" /></div>
        </div>
      </div>
    </div>
    <script>
    Spry.Utils.addEventListener("Accordion1", "click", myClickHandler, false);
    Spry.Utils.addEventListener("tab0", "click", Tab0ClickHandler, false);
    Spry.Utils.addEventListener("tab1", "click", Tab1ClickHandler, false);
    Spry.Utils.addEventListener("tab2", "click", Tab2ClickHandler, false);
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
    </script>
    </body>
    </html>
    Happy Sprying.
    Ben

  • Spry Accordion - Tabs open and then close after page loads

    I am using a Spry Accordion menu driven from a database.
    The menu opens up during the page load and then closes.
    I'm using SpryAccordion.js 1.6.1
    And to open a preset tab, I'm using:
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",{useFixedPanelHeights:false, enableAnimation: false, defaultPanel: 0 });
    //-->
      </script>
    But, all of the tabs open and then close on page load.
    My page:   http://www.texashotjobs.us/00C01.aspx
    Any fix for this??
    Thanks, Ron

    Well to both thanks.  Actually I wasn't disappointed as I had a two part question...
    I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link.  So I reverted back to 1.4.
    So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
    So changing this in the 1.6 js fixed the link issue as well:
    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;
    I t appears everything is working........
    Thanks, Ron Gaddis
    Visual Reality Productions

  • A simple Spry Accordion Question (I think)

    Hi all:
    I've searched but can't find, but I think this is a simple one.
    I've created a basic Spry accordion menu with DW/CS3 - Insert/Spry/Spry Accordion. How do I get the first "Content 1" to be hidden/not visible upon page load. Right now, the "Lable 2" must be clicked to hide the "Content 1" which of course shows the "Content 2"? Guessing it's in the JS, but I'm not sure. TIA for any help. HTML and JS Code below.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>
    JAVASCRIPT
    var Spry;
    if (!Spry) 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.duration = 500;
        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);
        // Unfortunately in some browsers like Safari, the Stylesheets our
        // page depends on may not have been loaded at the time we are called.
        // This means we have to defer attaching our behaviors until after the
        // onload event fires, since some of our behaviors rely on dimensions
        // specified in the CSS.
        if (Spry.Widget.Accordion.onloadDidFire)
            this.attachBehaviors();
        else
            Spry.Widget.Accordion.loadQueue.push(this);
    Spry.Widget.Accordion.onloadDidFire = false;
    Spry.Widget.Accordion.loadQueue = [];
    Spry.Widget.Accordion.addLoadListener = function(handler)
        if (typeof window.addEventListener != 'undefined')
            window.addEventListener('load', handler, false);
        else if (typeof document.addEventListener != 'undefined')
            document.addEventListener('load', handler, false);
        else if (typeof window.attachEvent != 'undefined')
            window.attachEvent('onload', handler);
    Spry.Widget.Accordion.processLoadQueue = function(handler)
        Spry.Widget.Accordion.onloadDidFire = true;
        var q = Spry.Widget.Accordion.loadQueue;
        var qlen = q.length;
        for (var i = 0; i < qlen; i++)
            q[i].attachBehaviors();
    Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
    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(panel)
        if (panel)
            this.addClassName(this.getPanelTab(panel), this.hoverClass);
    Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
        if (panel)
            this.removeClassName(this.getPanelTab(panel), this.hoverClass);
    Spry.Widget.Accordion.prototype.openPanel = function(panel)
        var panelA = this.currentPanel;
        var panelB = panel;
        if (!panelB || panelA == panelB)   
            return;
        var contentA;
        if( panelA )
            contentA = this.getPanelContent(panelA);
        var contentB = this.getPanelContent(panelB);
        if (! contentB)
            return;
        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 });
            this.animator.start();
        else
            if(contentA)
                contentA.style.height = "0px";
            contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
        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;
    Spry.Widget.Accordion.prototype.openNextPanel = function()
        var panels = this.getPanels();
        var curPanelIndex = this.getCurrentPanelIndex();
        if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
            this.openPanel(panels[curPanelIndex+1]);
    Spry.Widget.Accordion.prototype.openPreviousPanel = function()
        var panels = this.getPanels();
        var curPanelIndex = this.getCurrentPanelIndex();
        if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
            this.openPanel(panels[curPanelIndex-1]);
    Spry.Widget.Accordion.prototype.openFirstPanel = function()
        var panels = this.getPanels();
        if( panels )
            this.openPanel(panels[0]);
    Spry.Widget.Accordion.prototype.openLastPanel = function()
        var panels = this.getPanels();
        if( panels )
            this.openPanel(panels[panels.length-1]);
    Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
        // if (this.enableKeyboardNavigation)
        //     this.element.focus();
        if (panel != this.currentPanel)
            this.openPanel(panel);
        this.focus();
    Spry.Widget.Accordion.prototype.onFocus = function(e)
        // this.element.focus();
        this.hasFocus = true;
        this.addClassName(this.element, this.focusedClass);
    Spry.Widget.Accordion.prototype.onBlur = function(e)
        // this.element.blur();
        this.hasFocus = false;
        this.removeClassName(this.element, this.focusedClass);
    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.stopPropagation)
            e.stopPropagation();
        if (e.preventDefault)
            e.preventDefault();
        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.onPanelClick(panel); }, false);
            Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
            Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(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);
        else
            this.removeClassName(panel, this.openClass);
            this.addClassName(panel, this.closedClass);
            content.style.height = "0px";
        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);
        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.
            var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
            // if (!tabIndexAttr) this.element.tabindex = 0;
            if (tabIndexAttr)
                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.getCurrentPanelIndex = function()
        var panels = this.getPanels();
        for( var i = 0 ; i < panels.length; i++ )
            if( this.currentPanel == panels[i] )
                return i;
        return 0;
    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.PanelAnimator = function(accordion, panel, opts)
        this.timer = null;
        this.interval = 0;
        this.stepCount = 0;
        this.fps = 0;
        this.steps = 10;
        this.duration = 500;
        this.onComplete = null;
        this.panel = panel;
        this.panelToOpen = accordion.getElement(panel);
        this.panelData = [];
        Spry.Widget.Accordion.setOptions(this, opts, true);
        // If caller specified speed in terms of frames per second,
        // convert them into steps.
        if (this.fps > 0)
            this.interval = Math.floor(1000 / this.fps);
            this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
        else if (this.steps > 0)
            this.interval = this.duration / this.steps;
        // 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)
                    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.increment = (obj.toHeight - obj.fromHeight) / this.steps;
                    obj.overflow = c.style.overflow;
                    this.panelData.push(obj);
                    c.style.overflow = "hidden";
                    c.style.height = h + "px";
    Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
        var self = this;
        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!
            if (this.stepCount < this.steps)
                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()
        ++this.stepCount;
        this.animate();
        if (this.stepCount < this.steps)
            this.start();
        else if (this.onComplete)
            this.onComplete();
    Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
        var i, obj;
        if (this.stepCount >= this.steps)
            for (i = 0; i < this.panelData.length; i++)
                obj = this.panelData[i];
                if (obj.panel != this.panel)
                    obj.content.style.height = "0px";
                obj.content.style.overflow = obj.overflow;
                obj.content.style.height = obj.toHeight + "px";
        else
            for (i = 0; i < this.panelData.length; i++)
                obj = this.panelData[i];
                obj.fromHeight += obj.increment;
                obj.content.style.height = obj.fromHeight + "px";

    On the bottom of yourpage you have this:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    Change it to this:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
    Ken Ford

  • Accordion - Ajax within accordion panel resize issue

    Hi,
    I'm in a little bit of a fix.
    I have an accordion whose panels have ajax enabled regions
    within them.
    The ajax enabled regions have search forms which give a
    search result within the same page (which is basically within the
    panel as well) once a button is clicked.
    My issue is that once I click search, my result set increases
    the size of the page causing the accodion panel to enable a scroll
    bar. Is there some way in which I can have spry resize the panel
    instead of it enabling a scroll bar?
    If I open and close the tab ofcourse, the region is resized
    to cater to the search results as well with no scroll bar.
    Incase this is not possible, is there a way to reopen the
    selected panel on a page refresh event as all the tabs are closed
    when a refresh occurs.
    Thanks!
    When the accordion opens up, it shows

    Hi kundalani,
    If you are using Spry.Utils.updateContent() to load the
    contents of the panel, you can pass in a callback that sets the
    height of the AccordionPanelContent to "auto" after the new content
    has loaded:
    function LoadContent(ele, url)
    ele = Spry.$(ele);
    Spry.Utils.updateContent(ele, url, function() {
    ele.style.height = "auto"; });
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag1.html'); return false;">Frag 1</a> |
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag2.html'); return false;">Frag
    2</a></p>
    <p> </p>
    <div id="example1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 1
    </div>
    <div id="e1p1" class="AccordionPanelContent">
    <p>Panel 1</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 2
    </div>
    <div id="e1p2" class="AccordionPanelContent">
    <p>Panel 2</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 3
    </div>
    <div id="e1p3" class="AccordionPanelContent">
    <p>Panel 3</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 4
    </div>
    <div id="e1p4" class="AccordionPanelContent">
    <p>Panel 4</p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var example1 = new Spry.Widget.Accordion("example1", {
    useFixedPanelHeights: false });
    </script>
    --== Kin ==--

  • Spry Accordion

    First time using Spry. Anyone know why my accordion panels
    wont close after a second click. Below is the html. I used the
    Starting with All Panels Closed code.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .style12 {
    color: #FFFFFF;
    font-size: 12px;
    padding-left: 35px;
    font-family: Arial, Helvetica, sans-serif;
    padding-right: 30px;
    font-weight: normal;
    text-transform: none;
    .style13 { font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: normal;
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #FFFFFF;
    background-position: 0px;
    padding-top: 10px;
    body {
    background-color: #999999;
    a:link {
    color: #FFFFFF;
    text-decoration: none;
    a:visited {
    text-decoration: none;
    a:hover {
    text-decoration: none;
    color: #999999;
    a:active {
    text-decoration: none;
    -->
    </style>
    <script src="SpryAssets/SpryAccordion.js"
    type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
    type="text/css" />
    </head>
    <body>
    <table width="1023" height="951" border="0"
    align="center" background="bg/Picture 2.jpg">
    <tr>
    <th colspan="5" rowspan="2"
    scope="col"> </th>
    <th width="61" height="70"
    scope="col"> </th>
    <th colspan="3" scope="col"> </th>
    </tr>
    <tr>
    <th width="61" height="28" class="style13"
    scope="col">ENGLISH</th>
    <th width="1" scope="col"> </th>
    <th width="62" scope="col"><span
    class="style13">SPANISH</span></th>
    <th width="11" scope="col"> </th>
    </tr>
    <tr>
    <th height="32" colspan="5"
    scope="col"> </th>
    <th width="61" scope="col"> </th>
    <th colspan="3" scope="col"> </th>
    </tr>
    <tr>
    <td height="46" colspan="9"><div align="left"
    class="style12">
    <div align="left">This site has been created to
    download 2009 Honda Pilot files in high / low resolution. If you
    need any further assistance, please contact your Honda
    representative.</div>
    </div></td>
    </tr>
    <tr>
    <td width="200" height="23"> </td>
    <td width="189"> </td>
    <td width="201"> </td>
    <td width="193"> </td>
    <td colspan="5"> </td>
    </tr>
    <tr>
    <td height="133" nowrap="nowrap"><div
    id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">
    <div align="right"><strong>AD
    CAMPAIGN</strong></div>
    </div>
    <div class="AccordionPanelContent">
    <ul>
    <li>Color</li>
    <li>Black &amp; White</li>
    </ul>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">
    <div
    align="right"><strong>FLYERS</strong></div>
    </div>
    <div class="AccordionPanelContent">
    <ul>
    <li>HI-Res</li>
    <li>Low-Res</li>
    </ul>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">
    <div
    align="right"><strong>BANNERS</strong></div>
    </div>
    <div class="AccordionPanelContent">
    <ul>
    <li>Night Version
    <ul>
    <li>Hi-Res</li>
    <li>Low-Res</li>
    </ul>
    </li>
    <li>Day Version
    <ul>
    <li>HI-Res</li>
    <li>Low-Res</li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div></td>
    <td width="189" rowspan="2"> </td>
    <td rowspan="2"> </td>
    <td width="193" rowspan="2"> </td>
    <td colspan="5" rowspan="2"> </td>
    </tr>
    <tr>
    <td nowrap="nowrap"> </td>
    </tr>
    <tr>
    <td nowrap="nowrap"> </td>
    <td width="189"> </td>
    <td> </td>
    <td width="193"> </td>
    <td colspan="5"> </td>
    </tr>
    <tr>
    <td nowrap="nowrap"> </td>
    <td width="189"> </td>
    <td> </td>
    <td width="193"> </td>
    <td colspan="5"> </td>
    </tr>
    </table>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    //-->
    </script>
    </body>
    </html>

    You need to update to the latest version of SpryAccordion.js.
    You can find it here:
    http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js
    If you are a Dreamweaver user, use the Spry 1.6.1 Updater
    which you can get from here:
    http://labs.adobe.com/technologies/spry/home.html
    --== Kin ==--

  • Spry Accordion IE6 issue

    I have created an image for the accordion tab panel (c.g the heading of the accordion menu). I then created a hotspot on the image to go directly to that site without having to open the accordion menu. However in IE6 the hotspot is ignored and the panel just opens up and down it doesn't go to the respected link. I tried it in Firefox and it works as designed. I am curious if there is an IE 6 fix.
    Thanks

    Ben, it is more then just a hotspot it is a hotspot on the accordion panel. Here is the code. As I mention before it works in firefox just not IE6.
    <!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>
    <title>None</title>
    <link href="_css/stylesj.css" rel="stylesheet" type="text/css" />
    <link href="_css/NoeditN.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryMenuBarprocess.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
    <script type="text/javascript">
    </script>
    <link href="SpryAssets/SpryAccordionprocessjk.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <td width="299" align="center" valign="top" bgcolor="#FFFFFF">
                             <div id="Accordion1" class="Accordion" tabindex="0">
                               <div class="AccordionPanel">
                                 <div class="AccordionPanelTab2">
                                   <a class="MenuBarItemSubmenu" href="#"><img src="_images/brown_btn1.jpg" width="240" height="36" border="0" />
                                     </a>
                                   </div>
                                 <div class="AccordionPanelContent">
                                    <br /> <br /> <br /> <br /> 
                                 </div>
                                 </div>
                               </div></td>
                           <td width="299" align="center" valign="top" bgcolor="#FFFFFF"><div id="Accordion2" class="Accordion" tabindex="1">
                             <div class="AccordionPanel">
                               <div class="AccordionPanelTab2">
                                 <a class="MenuBarItemSubmenu" href="#"><img src="_images/brown_btn2.jpg" width="240" height="36" border="0" usemap="#Map2"/></a>
                    </div>
                               <div class="AccordionPanelContent"> -<a href="r">Define Test Requirements</a><br />
                                 - <a href="#">Specification</a><br />
                                 - <a href="y">Maintenance Requirements</a><br />
                                 - <a href="w">Customer Requirements</a><br>
                               </div></div></div>
                             </td>
                           <td width="249" align="center" valign="top" bgcolor="#FFFFFF"><div id="Accordion3" class="Accordion" tabindex="2">
                             <div class="AccordionPanel">
                               <div class="AccordionPanelTab2"><a class="MenuBarItemSubmenu" href="#"><img src="_images/brown_btn3.jpg" width="240" height="36" border="0" /></a></div>
                               <div class="AccordionPanelContent">
                                 - <a href="#">Deliver Parts</a><br />
                      - <a href="#">Perform</a><br />
                      - <a href="#">Configuration</a><br />
      </div>
                               </div>
                             </div>
                             </td>
    <map name="Map2" id="Map2">
      <area shape="rect" coords="15,11,41,26" href="http://http://www.Hollywood.com"/>
                                </map>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {useFixedPanelHeights:false, defaultPanel:-1} );
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", {useFixedPanelHeights:false, defaultPanel:-1});
    var Accordion3 = new Spry.Widget.Accordion("Accordion3", {useFixedPanelHeights:false, defaultPanel:-1 });
    //-->
    </script>
    </body>
    </html>

  • Desperate help needed in understanding SPRY accordion CSS

    hello everybody
    like many out there im stumbling through some home/self tuition on DW. I've recently checked out the spry accordion. It all went well up to the part where I wanted to improve the outlook of the accordion. I luckily found some templates on the adobe site with an accordion with the general idea as to how I would like an accordion to look, or at least a platform for future ideas. (Design #2 at:  http://www.adobe.com/devnet/dreamweaver/?view=samples )
    I've had a look through the code and have found great difficulty understanding a few of the div classes that are contained within it, i.e. what they are attributed to etc.
    Here is the HTML and the Spry CSS docs that I downloaded from the link above:
    HTML code (my issues are highlighted in red)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>OurCompany.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Designed and developed by Codify Design Studio - codifydesign.com" />
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="container">
    <div class="bannerArea">
    <div class="bannernav"><a href="#" >Privacy Policy</a>  |  <a href="#" >Contact Us</a>  |  <a href="#" >Site Map</a></div>
    <div class="toplogo"><a href="#"><img src="images/transparent.gif" width="365" height="90" border="0" /></a></div>
    </div>
    <div class="contentArea">
    <ul class="leftnavigation">
    <li><a href="#" >This is definitely navigation item 1</a></li>
    <li><a href="#" >Item 2</a></li>
    <li><a href="#" >Item 3</a></li>
    </ul>
    <div class="content">
    <div class="contentleft">
    <h1>Lorem Ipsum dolor sit amet</h1>
    <img class="imageright" src="images/content_photo_1.jpg" border="0" />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sedpharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id <a href="#">velitvitae ligula</a> volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Lorem ipsum dolor sit amet. </p>
    <img class="imageleft" src="images/content_photo_2.jpg" border="0" /><p>Consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
    <p>Nulla libero. Vivamus pharetra pos uere sapien. Nam consectetuer. Sed aliq uam, <a href="#">nunc eget euismod ullamcorper</a>, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
    </div>
    <div class="contentright">
    <div id="SpryAccordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab tabTop">
    <div class="accordion_340_tab">
    TELLUS PROIN EU ERAT
    </div>
    </div>
    <div class="AccordionPanelContent">
    <div class="acontent">
    <p>Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
    </div>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab middleTab">
    <div class="accordion_340_tab">
    UMA NON TEMPLUS NUNC
    </div>
    </div>
    <div class="AccordionPanelContent">
    <div class="acontent">
    <p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non.</p>
    <p>Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris.</p>
    </div>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab middleTab">
    <div class="accordion_340_tab">
    CONSECTETUER ADIPICING ELIT
    </div>
    </div>
    <div class="AccordionPanelContent">
    <div class="acontent">
    <img class="imageright" src="images/accordion_photo.jpg" border="0" />
    <p>Cras tempor. Morbi egestas. Tempus, nunc arcu mollis enim, eu aliqu mam erat nullanon nibh consectetuer malesum adavelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl.</p>
    <p>Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p>
    </div>
    </div>
    </div>
    </div>
    <div class="AccordionBottom"></div>
    </div>
    <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
    </div>
    <div class="footerArea">
    <div class="copyright">&copy; 2009 Our Company.  All rights reserved.</div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:true, defaultPanel:2});
    //-->
    </script>
    </body>
    </html>
    I'n terms of the <div class="accordion_340_tab"> i'm really not sure what these mean. I know the label title is situated within them (at least i think they are!!) but i dont quite understand what they are doing or mean. There is no reference to them in any of the code/ CSS sheets i downloaded.
    Plus, i'm not quite sure what the two <div style="clear:both;"></div> are clearing.
    I know these will be really basic questions and I apologise for having to trouble you but any help would be really really appreciated
    This is the spryCSS that came with the link to accompany the HTML file...
    @charset "UTF-8";
    /* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
    /* 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 {
    overflow: hidden;
    width: 255px;
    /* 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;
    padding: 0px;
    /* 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.
    .AccordionPanelTab {
    color: #394867;
    margin: 0px;
    cursor: pointer;
    padding: 10px 30px 10px 20px;
    font-weight: bold;
    -moz-user-select: none;
    -khtml-user-select: none;
    background-repeat: no-repeat;
    background-image: url(../images/accordion_255_tab_normal.gif);
    /* 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 {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-image: url(../images/accordion_255_tile.gif);
    /* 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 {
    color: #d88a37;
    background-image: url(../images/accordion_255_tab_down.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 {
    background-image: url(../images/accordion_255_tab_over.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: #000000;
    /* 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: #000000;
    /* Custom AUC classes */
    #accordion_255 {
    background-image: url(../images/accordion_255_tile.gif);
    background-repeat: repeat-y;
    background-position: 0px 0px;
    .tabTop {
    background-position: 0px 0px;
    padding-top: 15px;
    .middleTab {
    background-position: 0px -151px;
    .accordion_255_tab {
    margin: 0px;
    font-weight: bold;
    .acontent {
    height:200px;
    width:220px;
    overflow: auto;
    padding: 5px 10px 10px 20px;
    .AccordionBottom {
    width: 255px;
    height: 33px;
    background-repeat: no-repeat;
    background-position: 0px bottom;
    background-image: url(../images/accordion_255_bottom.gif);
    Thank you to anybody again who may be able to assist me with this. I'm very new to DW (and some may say not the brightest) so any low level explanations will be really appreciated.
    Kind regards
    Andrea x

    Heya, I hope my response will help.
    First off, I'd like to say that you are correct in being unable to find the " <div  class="accordion_340_tab"> " anywhere in the project. I went through and checked all the code and couldn't find a reference anywhere. Also, I downloaded the project from your link, deleted the <div class="accordion_340_tab"> as well as the </div> right after the TELLUS PROIN EU ERAT" (as the opening div and closing div work together and must be added or deleted together) and it had absolutely no impact from what I could see in internet explorer 8 and firefox.
    Therefore, I  believe, that it was originally intended to do something or in fact did something but they took that out and then forgot to take out the div. Even within the internal .js file I couldn't find a reference. Maybe they forgot to upload a third stylesheet. Either way, it appears to work just fine without it.
         "I'm not quite sure what the  two <div  style="clear:both;"></div> are clearing."
    In regards to this, this div style tag is a less frequently used tag that can divide content. Do you know what the HR tag in html is? If not, try putting a <hr> tag (just like that, by itself) in your web page somewhere. HR stands for Horizontal Rule- it makes a horizontal line across the page. This div style clear both tag is basically an invisible HR that helps separate different divs or content or whatever else is on the page. Think of it as an invisible page break.
         "I know the label title is situated within  them (at least i think they are!!) but i dont quite understand what they  are doing or mean."
    You should check out some CSS tutorials for the basics, but in a nutshell I'll go ahead and explain what I believe you are having trouble with.
    Let's put it this way:
    HTML is the core of your web page. It is the content and substance.
    CSS is the style of your web page. It is the color, alignment, and format of your page.
    The "div" tag by itself is simply <div>. However, you MUST close a div tag somewhere on the page with a </div> A div tag by itself, however, will do absolutely nothing. How do you get it to do something? By making a CSS rule, the two most common of which are known as a "div id" and "div class".
    The differences between div id and div class are pretty small- div id is mainly used for a div tag that will only be used once on the web page. Div classes are used for something that will be repeated, in this case, the accordion tabs.
    Therefore, when you see something like <div id="content"> text blah blah blah </div>, then you know that the "text blah blah blah" is your content, and that content is being modified to the specifications of the id "content". Where is this "content" div? This is what you as the designer make (or there will already be one in a template) and can usually be found in an external STYLESHEET, which holds all of your css rules, and is then linked to the main web page's html document (where your content is) with a link tag in the header of the html, usually right after the title and before the end of the <header> tag. You will find <link href="example.css" rel="stylesheet" type="text/css" /> but with a different name in the part i put as "example.css"
    Within that css document you have different things you can do. Let's say I want to make one div id and one div class. I want to name the ID "example1" and the class "example2". It would look something like this (note that you must ALWAYS start an ID with # and a class with a period)
    #example1 {
    width: 450px;
    margin:auto;
    color: #fff;
    .example2 {
    width: 900px;
    margin: 10px;
    color: #000;
    I hope this helped.
    -Matt

  • Accordion tabs w/panel sub-nav - default open issues

    I have a spry accordion in a left sidebar, and I'm using it as navigation for a slideshow for a website I'm working on. Each of my 5 accordion tabs has a different category of slideshow, with each panel having multiple sub-navigation links that each link to a different slideshow which appears in the main part of the page (to the right of the sidebar). Say it's something like this:
    VENUES (tab)
    (start panel)
    Bayside Restaurant (link)
    Historic Ballroom (link)
    Western Ranch (link)
    (end panel)
    ACTIVITIES (tab)
    (start panel)
    Surfing (link)
    Dancing (link)
    Horse back riding (link)
    (end panel)
    The sub-navigation to each slideshow is activated by simply clicking on the text, which I linked with the "point to file" link tool in the properties menu. 
    Ideally, I'd like to work with one template in Dreamweaver for all pages/slideshows I'm creating, but I'm running into a problem.  I know how to change the default panel in the .js so that a different one appears open when a user first accesses the page, but I can't figure out how to get the default panel to change when the user clicks on a different panel and attempts to use the subnavigation.  The subnavigation works just fine (it takes the user to the correct slideshow), but then the panel snaps shut instead of remaining open on the one the user selected.
    (So, to further explain with the example above, say the user wanted to look at all the links in the "Venues" tab, but the default is to have the "Activities" tab open on arrival.  The "Venues" tab opens just fine on the click, but as soon as the user clicks on, say "Bayside Restaurant," the correct slideshow appears to the right, but then the "Venues" tab snaps shut and the "Activities" tab and its sub-navigation appears open again. The user then has to click on the "Venues" tab again if s/he wants to see the other options and view a different slideshow, rather than simply being able to click on the next link.) 
    I tried making multiple templates, with different default panels open as a solution, but that's not working either. . .for some reason it keeps defaulting back.  
    Does this make sense?  Are there any solutions to this problem? Any help would be much appreciated.
    Thanks!
    Rebekka

    I think I found your problem.  It lies in the Javascript:
    <script language="JavaScript" type="text/javascript">
    var indexAccordion = new Spry.Widget.Accordion("indexAccordion");
    var acc1 = new Spry.Widget.Accordion("indexAccordion", { useFixedPanelHeights: false });
    </script>
    You have essentially duplicated the code in order to accomodate the useFixedPanelHeights.  Consolidate it into single one, and remove the duplicate:
    <script language="JavaScript" type="text/javascript"> var acc1 = new Spry.Widget.Accordion("indexAccordion", { useFixedPanelHeights: false }); </script>
    IE might be having trouble understanding the double instances of the script and is ignoring the latter one.  Just keep the latter one and it might fix it.
    Also, thanks for the tip, but I use Chrome's Developer Tools... it just didn't cross my mind since I've been busy =)

  • Accordion Height Issue

    I have apage I am working on and testing the Spry and various
    elements on...
    http://www.tommylogic.com/web-design/
    I have the tabs opening fine now and all styled like I want
    it. The issue I am having is on 3 items:
    - When I first try to open and close the panels, the first
    click never opens it. Only after the 2nd or thrird click or tab
    that I click on.
    - When they do open, they open in consistent heights,
    sometimes with a scrollbar, sometimes not.
    -Then when I get one open it wont always show all the
    content in that particular panel <div>.
    - If I close specific panel that is open first, then open
    the new panel, it seems to do a bit better, but not always the
    same.
    I am passing it through like this
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    var acc8 = new Spry.Widget.Accordion("Accordion1", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    All the heights are cleared in the CSS as well.
    Any clues?
    //////////////////////// resolution
    removed extra line and changed var to Accordion1
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    and some minor css tweaks in there as well.
    Thanks Anyway... -T

    Wrap the Accordion in a VBox and you should be all set.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      creationComplete="init();">
      <mx:Script>
        <![CDATA[
          import mx.containers.VBox;
          private function init():void{
            for(var a:uint=0;a<100;a++){
              var vb:VBox = new VBox();
              vb.label = "MyVBox" + a;
              vb.width = 200;
              vb.height = 100;
              acc.addChild(vb);
        ]]>
      </mx:Script>
      <mx:HDividedBox width="100%" height="100%">
        <mx:VBox width="50%" height="100%"/>
        <mx:VDividedBox width="50%" height="100%">
          <mx:VBox width="100%" height="50%"/>
          <mx:VBox width="100%" height="50%">
            <mx:Accordion id="acc" width="100%" height="50%"/>     
          </mx:VBox>
        </mx:VDividedBox>
      </mx:HDividedBox>
    </mx:Application>
    If this post answers your question or helps, please mark it as such.
    Greg Lafrance - Flex 2 and 3 ACE certified
    www.ChikaraDev.com
    Flex / AIR Development, Training, and Support Services

  • Spry Accordion images and gaps

    I have a url at
    http://www.postersforschools.com/testing/events.php.
    There are a few problems.
    I am getting scrool bars in the first panel. I assume this is
    because I have an image there but I am pretty sure this has not
    happened before. Also this same panel does not show up at all on
    Firefox. There is a space for it but no image. I have trashed my
    Firefox prefs and installed a new Firefox application.
    The Taste of Downtown panel has a large white space after the
    paragraph that I cannot get rid of. I do not see anything in the
    code causing this gap.
    I have set the panels to auto height using "var Accordion1 =
    new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights:
    false });"
    Thank you.

    I finally figured it out. 2 hours later! Hopefully this will
    help some other print/web designer. The image was CMYK from the
    print project it came from. Duh!

  • Scrolling within Accordion panel

    Hi, I have an Accordion panel with a lot of text within one of the panels. The panel is pinned and the text flows below the browser baseline when opened on smaller screen sizes. Would be great to have a mini scroll bar included as an option in future to get around this problem. Thanks!

    Hi kundalani,
    If you are using Spry.Utils.updateContent() to load the
    contents of the panel, you can pass in a callback that sets the
    height of the AccordionPanelContent to "auto" after the new content
    has loaded:
    function LoadContent(ele, url)
    ele = Spry.$(ele);
    Spry.Utils.updateContent(ele, url, function() {
    ele.style.height = "auto"; });
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag1.html'); return false;">Frag 1</a> |
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag2.html'); return false;">Frag
    2</a></p>
    <p> </p>
    <div id="example1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 1
    </div>
    <div id="e1p1" class="AccordionPanelContent">
    <p>Panel 1</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 2
    </div>
    <div id="e1p2" class="AccordionPanelContent">
    <p>Panel 2</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 3
    </div>
    <div id="e1p3" class="AccordionPanelContent">
    <p>Panel 3</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 4
    </div>
    <div id="e1p4" class="AccordionPanelContent">
    <p>Panel 4</p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var example1 = new Spry.Widget.Accordion("example1", {
    useFixedPanelHeights: false });
    </script>
    --== Kin ==--

Maybe you are looking for

  • I can't activate my iTunes gift card. Pleasehelp

    I can't use my iTunes gift card. When I try to use it it says it isn't activated and there is no  umber to call

  • BTE 2040

    Does BTE 2040 works if I use classic payment program or is it just for PMW payments?

  • Best practices for firewall external interface addressing

    Hi all, Can anyone explain what is more secure when addressing the outside interface of a firewall in a network diagram? 1st option:                             ISP router:                                interface 1 (connected to the internet).      

  • Vacancy Requisition

    Hi, Is there any function or web page where we can raise a vacancy requisition through sshr and this will undergo an approval process with in each department respective? or i have to create an SIT for it?.Also when an employee is applying for a job i

  • EXMON "exchange server user monitor" for Exchange 2013?

    Hello, it Looks like EXMON is not supported for Exchange 2013. Is this correct or can i use it with Server 2012 R2 and Exchange 2013 (CU6++)  ? Is there any alternative to check high log growth rate to see which user is responsable for this? Thanks f