www.webdeveloper.com
Results 1 to 3 of 3

Thread: Filtering HTML based on select list

  1. #1
    Join Date
    Sep 2012
    Posts
    5

    Filtering HTML based on select list

    My web page contains a script from a play (literally--"The Tempest"), and I'm trying to write a function that will allow users to select a character from a drop-down list and then show only that character's lines on the page.

    The issue is with my filterList() function. The others work as they should, but that one is not and I'm not getting any errors when I run it through a debugger. Anyone know where I'm going wrong?

    Thanks!
    HTML Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    
    <!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">
    <head>
    
    <title>The Tempest, Act V, Scene 1</title>
    <link href="plays.css" rel="stylesheet" type="text/css" />
    <script src="scene.js" type="text/javascript"></script>
    </head>
    
    <body>
    <div id="linklist">
       <img src="plays_out.jpg"  alt="The Plays" />
       <img src="son_out.jpg"  alt="The Sonnets" />
       <img src="bio_out.jpg" alt="Biography" />
       <img src="globe_out.jpg" alt="The Globe" />
       <img src="strat_out.jpg" alt="Stratford" />
    </div>
    <div id="title"><img src="tempest.jpg" alt="The Tempest" /></div>
    <div id="actList"><table><tr>
       <td>ACT I</td><td>ACT II</td><td>ACT III</td>
       <td>ACT IV</td><td>ACT V</td>
    </tr></table></div>
    
    <div id="characterList"></div>
    
    <div id="sceneIntro">
    <h2>Lines from Act V, Scene 1</h2>
    </div>
    
    <div id="scene">
    <h3>ARIEL</h3>
    <blockquote>I drink the air before me, and return<br />
    Or ere your pulse twice beat.
    </blockquote>
    
    <blockquote><i>Exit</i></blockquote>
    
    <h3>GONZALO</h3>
    <blockquote>All torment, trouble, wonder and amazement<br />
    Inhabits here: some heavenly power guide us<br />
    Out of this fearful country!
    </blockquote>
    
    <h3>PROSPERO</h3>
    <blockquote>Behold, sir king,<br />
    The wronged Duke of Milan, Prospero:<br />
    For more assurance that a living prince<br />
    Does now speak to thee, I embrace thy body;<br />
    And to thee and thy company I bid<br />
    A hearty welcome.
    </blockquote>
    
    <h3>ALONSO</h3>
    <blockquote>Whether thou best he or no,<br />
    Or some enchanted trifle to abuse me,<br />
    As late I have been, I not know: thy pulse<br />
    Beats as of flesh and blood; and, since I saw thee,<br />
    The affliction of my mind amends, with which,<br />
    I fear, a madness held me: this must crave,<br />
    An if this be at all, a most strange story.<br />
    Thy dukedom I resign and do entreat<br />
    Thou pardon me my wrongs. But how should Prospero<br />
    Be living and be here?
    </blockquote>
    
    <h3>PROSPERO</h3>
    <blockquote>First, noble friend,<br />
    Let me embrace thine age, whose honour cannot<br />
    Be measured or confined.
    </blockquote>
    
    <h3>GONZALO</h3>
    <blockquote>Whether this be<br />
    Or be not, I'll not swear.
    </blockquote>
    
    <h3>PROSPERO</h3>
    <blockquote>You do yet taste<br />
    Some subtilties o' the isle, that will not let you<br />
    Believe things certain. Welcome, my friends all!<br />
    But you, my brace of lords, were I so minded,<br />
    I here could pluck his highness' frown upon you<br />
    And justify you traitors: at this time<br />
    I will tell no tales.
    </blockquote>
    
    <h3>SEBASTIAN</h3>
    <blockquote>[Aside] The devil speaks in him.
    </blockquote>
    
    <h3>PROSPERO</h3>
    <blockquote>No.<br />
    For you, most wicked sir, whom to call brother<br />
    Would even infect my mouth, I do forgive<br />
    Thy rankest fault; all of them; and require<br />
    My dukedom of thee, which perforce, I know,<br />
    Thou must restore.
    </blockquote>
    
    </body>
    </html>

    JS:
    Code:
    function addEvent(object, evName, fnName, cap) {
       if (object.attachEvent)
           object.attachEvent("on" + evName, fnName);
       else if (object.addEventListener)
           object.addEventListener(evName, fnName, cap);
    }
    
    addEvent(window, "load", makeList, false);
    var sourceDoc;
    
    function uniqueElemText(elemName) {
       elems = document.getElementsByTagName(elemName);
       elemsArray = new Array();
    
       for (var i=0; i<elems.length; i++) elemsArray[i]=elems[i].innerHTML;  
       elemsArray.sort();
       for (i=0; i<elemsArray.length-1; i++) {
          if (elemsArray[i]==elemsArray[i+1]) {
             elemsArray.splice(i+1,1);
             i--;
          }
       }
       return elemsArray;
    }
    
    function makeList () {
       var listBox = document.getElementById("characterList");
       listBox.innerHTML = "<p>Show Only Lines By:</p>";
       var listBoxChars = document.createElement("select");
       listBoxChars.id = "cList";
       listBox.appendChild(listBoxChars);
       
       var opt0 = document.createElement('option');
       listBoxChars.appendChild(opt0);
       opt0.innerHTML = opt0.innerHTML + "Show All Character Lines";
       opt0.id = "opt0";
       
       var characterNames = uniqueElemText("h3");
       for (var i=0; i<characterNames.length; i++){
          var opt = document.createElement('option');
          listBoxChars.appendChild(opt);
          opt.innerHTML = opt.innerHTML + characterNames[i];
          opt.id = "opt" + (i+1);
       }
       
       addEvent(listBox, "change", filterList, false);
    }
    
    function filterList(e) {
       var charSel = e.target || event.srcElement;
       var allChars = document.getElementById("opt0");
       sourceDoc = document.getElementById("scene"); 
        
       var displayStatus = "";
       for (var n = sourceDoc.firstChild; n != null; n = n.nextSibling) {
             if (n.nodeName == "h3") {
                if (n.innerHTML == charSel.innerHtml) {
                   displayStatus = "";
                }
                else if (charSel == allChars)
                   displayStatus = "";
                else displayStatus = "none";
             }
             if (n.nodeType == 1)  //node represents a page element
                n.style.display = displayStatus;
       }
    }

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Lightbulb

    An alternative approach...
    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!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">
    <head>
    <title>The Tempest, Act V, Scene 1</title>
    
    <!-- Following were NOT provided
    <link href="plays.css" rel="stylesheet" type="text/css" />
    -->
    </head>
    
    <body>
    <div id="linklist">
      <img src="plays_out.jpg"  alt="The Plays" />
      <img src="son_out.jpg"  alt="The Sonnets" />
      <img src="bio_out.jpg" alt="Biography" />
      <img src="globe_out.jpg" alt="The Globe" />
      <img src="strat_out.jpg" alt="Stratford" />
    </div>
    <div id="PlayTitle"><img src="tempest.jpg" alt="The Tempest" /></div>
    
    <div id="actList">
     <table><tr>
      <td>ACT I</td><td>ACT II</td><td>ACT III</td><td>ACT IV</td><td>ACT V</td>
     </tr></table>
    </div>
    
    <br /><b>Show Lines by:</b> <select id="characterList" onchange="showPlayers(this.value)"></select>
    <input type="checkbox" id="PlayerHolder">
    
    <div id="sceneIntro">
    <h2>Lines from Act V, Scene 1</h2>
    </div>
    
    <div id="scene">
    <!-- Would suggest putting following to the /DIV tag into text file and read with AJAX code -->
    
    <h3>ARIEL</h3>
    <blockquote><pre>
    I drink the air before me, and return
    Or ere your pulse twice beat.
    
    <i>Exit</i>
    </pre></blockquote>
    
    <h3>GONZALO</h3>
    <blockquote><pre>
    All torment, trouble, wonder and amazement
    Inhabits here: some heavenly power guide us
    Out of this fearful country!
    </pre></blockquote>  <!-- 50 -->
    
    <h3>PROSPERO</h3>
    <blockquote><pre>
    Behold, sir king,
    The wronged Duke of Milan, Prospero:
    For more assurance that a living prince
    Does now speak to thee, I embrace thy body;
    And to thee and thy company I bid
    A hearty welcome.
    </pre></blockquote>
    
    <h3>ALONSO</h3>
    <blockquote><pre>
    Whether thou best he or no,
    Or some enchanted trifle to abuse me,
    As late I have been, I not know: thy pulse
    Beats as of flesh and blood; and, since I saw thee,
    The affliction of my mind amends, with which,
    I fear, a madness held me: this must crave,
    An if this be at all, a most strange story.
    Thy dukedom I resign and do entreat
    Thou pardon me my wrongs. But how should Prospero
    Be living and be here?
    </pre></blockquote>
    
    <h3>PROSPERO</h3>
    <blockquote><pre>
    First, noble friend,
    Let me embrace thine age, whose honour cannot
    Be measured or confined.
    </pre></blockquote>
    
    <h3>GONZALO</h3>
    <blockquote><pre>
    Whether this be
    Or be not, I'll not swear.
    </pre></blockquote>
    
    <h3>PROSPERO</h3>
    <blockquote><pre>
    You do yet taste
    Some subtilties o' the isle, that will not let you
    Believe things certain. Welcome, my friends all!
    But you, my brace of lords, were I so minded,
    I here could pluck his highness' frown upon you
    And justify you traitors: at this time
    I will tell no tales.
    </pre></blockquote>
    
    <h3>SEBASTIAN</h3>  <!-- 100 -->
    <blockquote><pre>
    [Aside] The devil speaks in him.
    </pre></blockquote>
    
    <h3>PROSPERO</h3>
    <blockquote><pre>
    No.
    For you, most wicked sir, whom to call brother
    Would even infect my mouth, I do forgive
    Thy rankest fault; all of them; and require
    My dukedom of thee, which perforce, I know,
    Thou must restore.
    </pre></blockquote>
    
    </div>
    
    <script type="text/javascript">
    var playerList = [];
    var charsList = [];
    var reciteList = [];
    
    Array.prototype.findFirst = function (x) {
      for (var i=0; i<this.length; i++) { if (this[i].indexOf(x) != -1) return i; }
      return -1;  // return -1 if NOT found in array
    }
    
    window.onload = function() {  // PlayerHolder = false;  // == true | false;  // alternative display
      var tmp = '';
      reciteList = document.getElementById('scene').getElementsByTagName('pre');
      charsList = document.getElementById('scene').getElementsByTagName('h3');
      var j = 0;  var k = 0;
      for (var i=0; i<charsList.length; i++) {
        tmp = charsList[i].innerHTML;
        k = playerList.findFirst(tmp);
        if (k == -1) { playerList.push(tmp+':'+i); }
                else { playerList[k] += ','+i; }
      }
      playerList.sort();                     // alert(playerList.join('\n'));
      NewList('characterList',playerList);
    }
    
    function NewList(selObj,selArray) {
      var selElem = document.getElementById(selObj);
      var tarr = [];  var tmp = '';
      selElem.options.length = 0;
      selElem.options[selElem.options.length] = new Option('All Players','-1');
      for (var i=0; i<selArray.length; i++) {
        tmp = selArray[i];
        tarr = tmp.split(':');
        selElem.options[selElem.options.length] = new Option(tarr[0],tarr[1]);
    //    selElem.options[selElem.options.length] = new Option(tarr[0]+':'+tarr[1],tarr[1]);  // for testing only
      }
    }
    
    function showPlayers(ptrs) {
      if (ptrs == '-1') {
        for (var i=0; i<charsList.length; i++) { charsList[i].style.display = 'block'; }
        for (var i=0; i<reciteList.length; i++) { reciteList[i].style.display = 'block'; }
        return;
      }
      if (document.getElementById('PlayerHolder').checked) {
        for (var i=0; i<charsList.length; i++) { charsList[i].style.display = 'block'; }
      } else {
        for (var i=0; i<charsList.length; i++) { charsList[i].style.display = 'none'; }
      }
      for (var i=0; i<reciteList.length; i++) { reciteList[i].style.display = 'none'; }
      var tarr = ptrs.split(',');
      for (var i=0; i<tarr.length; i++) { charsList[tarr[i]].style.display = 'block'; }  
      for (var i=0; i<tarr.length; i++) { reciteList[tarr[i]].style.display = 'block'; }  
    }
    </script>
    
    </body>
    </html>
    Could not see effects of CSS as that file contents were not provided.
    Nor were the image URLs provided to see layout.

    Some possible alterations:
    1. Modify checkbox to give idea where chosen player would speak in order of ACT.
    (Note: Could be made hidden if effect is not a desired option to present to user)
    2. Could put contents of each ACT into a text file
    and loaded with an AJAX function to cut down on script size.
    Last edited by JMRKER; 12-12-2013 at 10:02 PM.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354
    I like this little modification to the checkbox code of post #2
    Code:
    <input type="checkbox" id="PlayerHolder" onclick="document.getElementById('characterList').selectedIndex=-1">

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles