SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist GeekSupport's Avatar
    Join Date
    May 2002
    Location
    Southern California
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    (help) Appending text to specific table

    I have a table (1 row x 2 columns).

    the left column has links to definitions and whenever a user clicks a link, i want the right column to show the proper definition. when a new link is clicked, the old definition should disappear and the new will take its place.

    playing with document.write('definition') gives me a new page but then i don't see the list of links anymore. Any help would be appreciated.

    thanks

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Subsequent document.writeln()s add to the page, but the first one seems to overwrite everything that's currently there. There will be reasons and work-arounds for this, but I don't know them.

    If you're going to use Javascript anyway however, you might as well do it in this way:
    Code:
    <html>
      <head>
        <script language="JavaScript" type="text/javascript">
        <!--
          // This could be turned into an array to contain both description and definition and written out using document.writeln when pageis created.
          var def1="A burrowing mammal (Orycteropus afer) of southern Africa, having a stocky, hairy body, large ears, a long tubular snout, and powerful digging claws.";
          var def2="Marked by opposition or hostility to conventional social, political, or economic values or principles."
          var def3="A deciduous Eurasian tree (Malus pumila) having alternate simple leaves and white or pink flowers.  The firm, edible, usually rounded fruit of this tree.";
          var def4="A person trained to pilot, navigate, or otherwise participate as a crew member of a spacecraft"
    			
          function showdef(defref){
            document.getElementById('mydefinition').innerHTML=eval('def'+defref);
          }
        //-->
        </script>
      </head>
      <body>
        <table border=1 width=100%>
          <tr>
            <td width=200>
              <ul>
                <li id="1" onMouseDown="showdef(this.id)">Aardvark</li>
                <li id="2" onMouseDown="showdef(this.id)">Antiestablishment</li>
                <li id="3" onMouseDown="showdef(this.id)">Apple</li>
                <li id="4" onMouseDown="showdef(this.id)">Astronaut</li>
              </ul>
            </td>
            <td valign="top">
              <div id="mydefinition">&nbsp;</div>
            </td>
          </tr>
        </table>
      </body>
    </html>
    If you wanted to avoid using tables, you could use absolute positioning and have all the definitions overlapping each other but invisible. Then make the relevant definition visible when you click on a link.


    Shout if this needs further explanation.

    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Evangelist GeekSupport's Avatar
    Join Date
    May 2002
    Location
    Southern California
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome!

    Thanks a LOT awestmoreland, this hit the spot. And thanks for putting the time to make real sample definitions

    GS

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. I enjoy mocking up examples like that.
    Gives me a sense of enormous well-being


    Glad it was useful,

    Andy
    From the English nation to a US location.

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, couldn't resist tidying the thing up a bit.
    This code is slightly longer but is simpler to maintain.
    All that's needed to change/add/remove definitions now is to edit the defArray[n] values.

    The value is "term semicolon definition"

    Don't include semicolons in the term or the definition or you'll have problems
    Code:
    <html>
      <head>
        <script language="JavaScript" type="text/javascript">
        <!--		
          var defArray = new Array();
          defArray[0]="Aardvark;A burrowing mammal (Orycteropus afer) of southern Africa, having a stocky, hairy body, large ears, a long tubular snout, and powerful digging claws.";
          defArray[1]="Antiestablishment;Marked by opposition or hostility to conventional social, political, or economic values or principles.";
          defArray[2]="Apple;A deciduous Eurasian tree (Malus pumila) having alternate simple leaves and white or pink flowers.  The firm, edible, usually rounded fruit of this tree.";
          defArray[3]="Astronaut;A person trained to pilot, navigate, or otherwise participate as a crew member of a spacecraft.";
    
          function showdef(defref){
            var splitArray = defArray[defref].split(';');
            document.getElementById('mydefinition').innerHTML=splitArray[1];
          }
        //-->
        </script>
      </head>
      <body>
        <table border=1 width=100%>
          <tr>
            <td width=200>
              <ul>
                <script language="JavaScript" type="text/javascript">
                <!--
                  for (var i=0; i<defArray.length; i++){
                    var splitArray = defArray[i].split(';');
                    document.writeln('<li id=\"'+ i +'\" onMouseDown=\"showdef(this.id)\">'+splitArray[0]+'<\/li>');
                  }
                //-->
                </script>
              </ul>
            </td>
            <td valign="top">
              <div id="mydefinition">&nbsp;</div>
            </td>
          </tr>
        </table>
      </body>
    </html>
    Andy
    From the English nation to a US location.


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
  •