3 Replies Latest reply: Aug 3, 2012 8:44 PM by Ben Pleysier RSS

    Accordion Widget Doesnt Work After Pulishing

    dgequipment

      PLEASE HELP!

       

      I used the spry accordion widget in my website for multiple pages. I formatted it the way I wanted it and while I was still working in Dreamweaver CS6 everything worked properly...Then I published my site and now the widget does not work at all. The windows in the widget are all open and do not collapse at at. Also every accordion window I have added has a scroll bar on the right hand side. I played around with it for a long time and noticed that if I have a blank html page and I insert the accordion widget and then publish it without any css the widget works fine. Then I tried applying a css file to the html page and the widget still worked in Dreamweaver but not once it was published again. I did try applying different css files to make sure it wasnt just my css. I also found a tutorial on adobe tv on the accordion widget and downloaded the related files to the tutorial, took the tutorial .js code and compared it to my own and there was no difference other then his works and mine doesnt. Again I am using the new Dreamweaver CS6! If there is someone who could please help I would be eternally thankful...Thanks so much!

       

      P.S.

      Here is my .js code in case someone wants to see if they can spot the problem.

       

      (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 = "0px";

                          }

                          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

        • 1. Re: Accordion Widget Doesnt Work After Pulishing
          Ben Pleysier CommunityMVP

          What a lovely touching story. Not sure what you could do with it though, maybe sell it to Billy Graham. As for finding out why your widget doesn't work, the story is useless. Same goes for the JS, which is hopefully an untouched version of the original SpryAccordion.js

           

          To be able to help you, all you have to do is to upload the site and supply us with a link to it so that we can see the problem in situ.

           

          I could have a go at guessing what the problem may be. Spry consists of three parts

          • HTML
          • CSS
          • JS

           

          The latter two parts must have a link to it in the HTML document and must be available to the browser when the page is rendered. To me it sounds that when you published the site, you did not also carry the CSS and JS files across to the server.

           

          Gramps

          • 2. Re: Accordion Widget Doesnt Work After Pulishing
            dgequipment Community Member

            Well Gramps...thats a great idea! Sell my story to Billy Graham! Then I would make more money and I could sit around on the computer and be rude to people I dont know and not be very helpful at all, all day long too! I admire you....ANYWHO.....the widget doesnt work even when its published by itself with no html or css so I dont see how having either of those things are pertinent...If there is anyone else that would like to be helpful, your opinion is welcome!

             

            Thanks again Gramps you made my day!!!

            • 3. Re: Accordion Widget Doesnt Work After Pulishing
              Ben Pleysier CommunityMVP

              I guess you overlooked what I did say, so I'll repeat

              To be able to help you, all you have to do is to upload the site and supply us with a link to it so that we can see the problem in situ.

              Gramps