SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  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 19:53.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you set your server's mime type for js files to "application/javascript"?
    if not, try type="text/javascript"

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you downloaded the complete core.js script file from the books page on sitepoint?

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    When you're stuck with some code from a book, always download the source code and check for corrections and typos. The source code can be downloaded here: http://www.sitepoint.com/books/javascript1/code.php. Afterwards compare your code to the one you just downloaded to spot the mistake.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BrianOConnell View Post
    Have you downloaded the complete core.js script file from the books page on sitepoint?

    yes, core.js is also included but it didnt work

    wait a sec, ill include here the core.js
    Try it yourself, it won't really work.
    Last edited by alcatraz678; Sep 19, 2008 at 19:52.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fredda View Post
    Hi
    When you're stuck with some code from a book, always download the source code and check for corrections and typos. The source code can be downloaded here: http://www.sitepoint.com/books/javascript1/code.php. Afterwards compare your code to the one you just downloaded to spot the mistake.
    i compared it already, and realized that i should include some time intervals. but im just wondering why the codes above didn't work as expected. it should closed the list, but it didn't! why?? it didn't even change colors when i hovered my mouse

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The script is not the problem. Testing shows that the trouble is in the css
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    The script is not the problem. Testing shows that the trouble is in the css
    no way, the css file came from the code-archive itself.

  9. #9
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alcatraz678 View Post
    no way, the css file came from the code-archive itself.
    A quick compare between your stylesheet and the one from the code archive show many differences.
    Originale code archive css:
    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 1em;
      position: relative; /* Forces the bottom border of the h2 to display in IE */
    }
    
    ul.accordion li {
      clear: left;
      position: relative;
    }
    
    ul.accordion h2 {
      background-color: #DF7700;
      border: 1px solid #FFF;
      border-width: 1px 0;
      font-size: 1.5em;
      margin: 0 -0.667em -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) */
    
    ul.accordion li.collapsed * {
      position: absolute;
      left: -10000px;
    }
    
    ul.accordion li.collapsed h2, ul.accordion li.expanded h2,
    ul.accordion li.collapsed h2 a:link, ul.accordion li.collapsed h2 a:visited,
    ul.accordion li.expanded h2 a:link, ul.accordion li.expanded h2 a:visited {
      position: static;
    }
    
    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;
      position: static;
    }

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=fredda;3970319]A quick compare between your stylesheet and the one from the code archive show many differences.
    Originale code archive css:

    damn... pardon me... I wasnt paying attention. sorry for all the hassle.. I didn't remember that I typed all that css...

    but thanks for helping me, even though im arrogant... THANKS!!!!!!


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
  •