SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    my Accordion list is not working, it doesn't respond to my click events!

    Hi guys, I just bought a javascript book - simply javascript and I found that the tutorials are not working as they claimed. Can you please correct the lines of codes here. I don't have any idea why it doesn't work. I'll include all codes here--html,css & javascript

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
      <head>
        <title>Accordion</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="accordion.css" />
        <script src="core.js" type="application/javascript"></script>
        <script src="accordion.js" type="application/javascript"></script>
      </head>
      <body>
        <h1>Captains of the Enterprise</h1>
        <ul class="accordion">
          <li id="archer">
            <h2><a href="#archer">Jonathan Archer</a></h2>
            <p>Vessel registry: NX-01</p>
            <p>Assumed command: 2151</p>
            <div class="links">
              <h3>Profiles</h3>
              <ul>
                <li><a href="http://www.memory-alpha.org/en/wiki/Jonathan_Archer">Memory Alpha</a></li>
                <li><a href="http://en.wikipedia.org/wiki/Jonathan_Archer">Wikipedia</a></li>
              </ul>
            </div>
          </li>
          <li id="pike">
            <h2><a href="#pike">Christopher Pike</a></h2>
            <p>Vessel registry: NCC-1701</p>
            <p>Assumed command: 2245</p>
            <div class="links">
              <h3>Profiles</h3>
              <ul>
                <li><a href="http://www.memory-alpha.org/en/wiki/Christopher_Pike">Memory Alpha</a></li>
                <li><a href="http://en.wikipedia.org/wiki/Christopher_Pike_%28Star_Trek%29">Wikipedia</a></li>
              </ul>
            </div>
          </li>
          <li id="kirk">
            <h2><a href="#kirk">James T. Kirk</a></h2>
            <p>Vessel registry: NCC-1701, NCC-1701-A</p>
            <p>Assumed command: 2264</p>
            <div class="links">
              <h3>Profiles</h3>
              <ul>
                <li><a href="http://memory-alpha.org/en/wiki/James_T._Kirk">Memory Alpha</a></li>
                <li><a href="http://en.wikipedia.org/wiki/James_T._Kirk">Wikipedia</a></li>
              </ul>
            </div>
          </li>
          <li id="harriman">
            <h2><a href="#harriman">John Harriman</a></h2>
            <p>Vessel registry: NCC-1701-B</p>
            <p>Assumed command: 2293</p>
            <div class="links">
              <h3>Profiles</h3>
              <ul>
                <li><a href="http://memory-alpha.org/en/wiki/John_Harriman">Memory Alpha</a></li>
                <li><a href="http://en.wikipedia.org/wiki/John_Harriman">Wikipedia</a></li>
              </ul>
            </div>
          </li>
          <li id="garrett">
            <h2><a href="#garrett">Rachel Garrett</a></h2>
            <p>Vessel registry: NCC-1701-C</p>
            <p>Assumed command: 2332?</p>
            <div class="links">
              <h3>Profiles</h3>
              <ul>
                <li><a href="http://memory-alpha.org/en/wiki/Rachel_Garrett">Memory Alpha</a></li>
                <li><a href="http://en.wikipedia.org/wiki/Rachel_Garrett">Wikipedia</a></li>
              </ul>
            </div>
          </li>
          <li id="picard">
            <h2><a href="#picard">Jean-Luc Picard</a></h2>
            <p>Vessel registry: NCC-1701-D, NCC-1701-E</p>
            <p>Assumed command: 2364</p>
            <div class="links">
              <h3>Profiles</h3>
              <ul>
                <li><a href="http://memory-alpha.org/en/wiki/Jean-Luc_Picard">Memory Alpha</a></li>
                <li><a href="http://en.wikipedia.org/wiki/Jean-Luc_Picard">Wikipedia</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </body>
    </html>
    Code:
    /* Basic element styles */
    
    body {
      background-color: #2E2E33;
      color: #FFF;
      font: small Verdana, Arial, sans-serif;
    }
    
    a:link {
      color: #C0C0FF;
    }
    
    a:visited {
      color: #A0A0FF;
    }
    
    /* Accordion styles (static) */
    
    ul.accordion {
      background-color: #3E3E55;
      border: 1px solid #FFF;
      border-top: none;
      display: block;
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: relative; /* Forces the bottom border of the h2 to display in IE */
    }
    
    ul.accordion li {
      clear: left;
    }
    
    ul.accordion h2 {
      background-color: #DF7700;
      border: 1px solid #FFF;
      border-width: 1px 0;
      font-size: 1.5em;
      margin: 0 0 -1px;
    }
    
    ul.accordion h2 a:link, ul.accordion h2 a:visited {
      color: #fff;
      display: block;
      margin: 1px;
      padding: 0 0.667em;
      text-decoration: none;
    }
    
    /* Accordion styles (dynamic) */
    
    .accordionContent {
    	overflow: hidden;
      padding: 0 1em;
    }
    
    li.collapsed .accordionContent {
      position: absolute;
      left: -9999px;
    }
    
    /* Fixes Safari bug that prevents expanded content from displaying.
       See http://betech.virginia.edu/bugs/safari-stickyposition.html */
    li.collapsed .accordionContent p {
      position: relative;
    }
    
    ul.accordion li.collapsed h2 a:hover, ul.accordion li.collapsed h2 a:focus,
    ul.accordion li.collapsed h2 a:active,
    ul.accordion li.expanded h2 a:link, ul.accordion li.expanded h2 a:visited {
      background-color: #F0A000;
    }
    
    /* Accordion content styles (static) */
    
    ul.accordion h3 {
      font-size: 1.1em;
      line-height: 1.1;
      margin: 0;
    }
    
    ul.accordion p {
      display: inline;
      float: left;
      clear: left;
      width: 50%;
      margin: 1em 0 0 0;
    }
    
    ul.accordion div.links {
    	margin: 1em 0 1em 50%;
    }
    
    div.links ul {
    	list-style: none;
    	margin: 1em 0 0 0;
    	padding: 0;
    }
    
    div.links li {
      clear: none;
      display: inline;
      margin: 0 3em 0 0;
    }
    Code:
    var Accordion =
    {
      init: function()
      {
        var accordions = Core.getElementsByClass("accordion");
    
        for (var i = 0; i < accordions.length; i++)
        {
          var folds = accordions[i].childNodes;
          for (var j = 0; j < folds.length; j++)
          {
            if (folds[j].nodeType == 1)
            {
              Accordion.collapse(folds[j]);
              var foldLinks = folds[j].getElementsByTagName("a");
              var foldTitleLink = foldLinks[0];
              Core.addEventListener(foldTitleLink, "click", Accordion.clickListener);
              
              for (var k = 1; k < foldLinks.length; k++)
              {
                Core.addEventListener(foldLinks[k], "focus", Accordion.focusListener);
              }
            }
          }
          
          if (location.hash.length > 1)
          {
            var activeFold = document.getElementById(location.hash.substring(1));
            if (activeFold && activeFold.parentNode == accordions[i])
            {
              Accordion.expand(activeFold);
            }
          }
        }
      },
    
      collapse: function(fold)
      {
        Core.removeClass(fold, "expanded");
        Core.addClass(fold, "collapsed");
      },
      
      
      collapseAll: function(accordion)
      {
        var folds = accordion.childNodes;
        for (var i = 0; i < folds.length; i++)
        {
          if (folds[i].nodeType == 1)
          {
            Accordion.collapse(folds[i]);
          }
        }
      },
    
      expand: function(fold)
      {
            
        Accordion.collapseAll(fold.parentNode);
        Core.removeClass(fold, "collapsed");
    	Core.addClass(fold, "expanded");
      },
        
      
       
      clickListener: function(event)
      {
        var fold = this.parentNode.parentNode;
        if (Core.hasClass(fold, "collapsed"))
        {
          Accordion.expand(fold);
        }
        else
        {
          Accordion.collapse(fold);
        }  
        Core.preventDefault(event);
      },
      
      focusListener: function(event)
      {
        var element = this;
        while (element.parentNode)
        {
          if (element.parentNode.className == "accordion")
          {
            Accordion.expand(element);
            return;
          }
          element = element.parentNode;
        }
      }
    };
    
    Core.start(Accordion);
    Code:
    var Core = {};
    
    // W3C DOM 2 Events model
    if (document.addEventListener)
    {
      Core.addEventListener = function(target, type, listener)
      {
        target.addEventListener(type, listener, false);
      };
    
      Core.removeEventListener = function(target, type, listener)
      {
        target.removeEventListener(type, listener, false);
      };
    
      Core.preventDefault = function(event)
      {
        event.preventDefault();
      };
    
      Core.stopPropagation = function(event)
      {
        event.stopPropagation();
      };
    }
    // Internet Explorer Events model
    else if (document.attachEvent)
    {
      Core.addEventListener = function(target, type, listener)
      {
        // prevent adding the same listener twice, since DOM 2 Events ignores
        // duplicates like this
        if (Core._findListener(target, type, listener) != -1) return;
    
        // listener2 calls listener as a method of target in one of two ways,
        // depending on what this version of IE supports, and passes it the global
        // event object as an argument
        var listener2 = function()
        {
          var event = window.event;
    
          if (Function.prototype.call)
          {
            listener.call(target, event);
          }
          else
          {
            target._currentListener = listener;
            target._currentListener(event)
            target._currentListener = null;
          }
        };
    
        // add listener2 using IE's attachEvent method
        target.attachEvent("on" + type, listener2);
    
        // create an object describing this listener so we can clean it up later
        var listenerRecord =
        {
          target: target,
          type: type,
          listener: listener,
          listener2: listener2
        };
    
        // get a reference to the window object containing target
        var targetDocument = target.document || target;
        var targetWindow = targetDocument.parentWindow;
    
        // create a unique ID for this listener
        var listenerId = "l" + Core._listenerCounter++;
    
        // store a record of this listener in the window object
        if (!targetWindow._allListeners) targetWindow._allListeners = {};
        targetWindow._allListeners[listenerId] = listenerRecord;
    
        // store this listener's ID in target
        if (!target._listeners) target._listeners = [];
        target._listeners[target._listeners.length] = listenerId;
    
        // set up Core._removeAllListeners to clean up all listeners on unload
        if (!targetWindow._unloadListenerAdded)
        {
          targetWindow._unloadListenerAdded = true;
          targetWindow.attachEvent("onunload", Core._removeAllListeners);
        }
      };
    
      Core.removeEventListener = function(target, type, listener)
      {
        // find out if the listener was actually added to target
        var listenerIndex = Core._findListener(target, type, listener);
        if (listenerIndex == -1) return;
    
        // get a reference to the window object containing target
        var targetDocument = target.document || target;
        var targetWindow = targetDocument.parentWindow;
    
        // obtain the record of the listener from the window object
        var listenerId = target._listeners[listenerIndex];
        var listenerRecord = targetWindow._allListeners[listenerId];
    
        // remove the listener, and remove its ID from target
        target.detachEvent("on" + type, listenerRecord.listener2);
        target._listeners.splice(listenerIndex, 1);
    
        // remove the record of the listener from the window object
        delete targetWindow._allListeners[listenerId];
      };
    
      Core.preventDefault = function(event)
      {
        event.returnValue = false;
      };
    
      Core.stopPropagation = function(event)
      {
        event.cancelBubble = true;
      };
    
      Core._findListener = function(target, type, listener)
      {
        // get the array of listener IDs added to target
        var listeners = target._listeners;
        if (!listeners) return -1;
    
        // get a reference to the window object containing target
        var targetDocument = target.document || target;
        var targetWindow = targetDocument.parentWindow;
    
        // searching backward (to speed up onunload processing), find the listener
        for (var i = listeners.length - 1; i >= 0; i--)
        {
          // get the listener's ID from target
          var listenerId = listeners[i];
    
          // get the record of the listener from the window object
          var listenerRecord = targetWindow._allListeners[listenerId];
    
          // compare type and listener with the retrieved record
          if (listenerRecord.type == type && listenerRecord.listener == listener)
          {
            return i;
          }
        }
        return -1;
      };
    
      Core._removeAllListeners = function()
      {
        var targetWindow = this;
    
        for (id in targetWindow._allListeners)
        {
          var listenerRecord = targetWindow._allListeners[id];
          listenerRecord.target.detachEvent(
              "on" + listenerRecord.type, listenerRecord.listener2);
          delete targetWindow._allListeners[id];
        }
      };
    
      Core._listenerCounter = 0;
    }
    
    Core.addClass = function(target, theClass)
    {
      if (!Core.hasClass(target, theClass))
      {
        if (target.className == "")
        {
          target.className = theClass;
        }
        else
        {
          target.className += " " + theClass;
        }
      }
    };
    
    Core.getElementsByClass = function(theClass)
    {
      var elementArray = [];
    
      if (typeof document.all != "undefined")
      {
        elementArray = document.all;
      }
      else
      {
        elementArray = document.getElementsByTagName("*");
      }
    
      var matchedArray = [];
      var pattern = new RegExp("(^| )" + theClass + "( |$)");
    
      for (var i = 0; i < elementArray.length; i++)
      {
        if (pattern.test(elementArray[i].className))
        {
          matchedArray[matchedArray.length] = elementArray[i];
        }
      }
    
      return matchedArray;
    };
    
    Core.hasClass = function(target, theClass)
    {
      var pattern = new RegExp("(^| )" + theClass + "( |$)");
    
      if (pattern.test(target.className))
      {
        return true;
      }
    
      return false;
    };
    
    Core.removeClass = function(target, theClass)
    {
      var pattern = new RegExp("(^| )" + theClass + "( |$)");
    
      target.className = target.className.replace(pattern, "$1");
      target.className = target.className.replace(/ $/, "");
    };
    
    Core.getComputedStyle = function(element, styleProperty)
    {
      var computedStyle = null;
    
      if (typeof element.currentStyle != "undefined")
      {
        computedStyle = element.currentStyle;
      }
      else
      {
        computedStyle = document.defaultView.getComputedStyle(element, null);
      }
    
      return computedStyle[styleProperty];
    };
    
    Core.start = function(runnable)
    {
      Core.addEventListener(window, "load", runnable.init);
    };
    Last edited by alcatraz678; Sep 19, 2008 at 18:53.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •