Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Calling and Creating a Dynamic Menu of Links

    essentially this works so far.

    function addRow() {
    var body = document.getElementById('displayButton') .getElementsByTagName('tbody')[0];
    var row = body.appendChild( document.createElement('tr'));
    for (var i=0, cell; i < arguments.length; i++) {
    cell = document.createElement("td");
    row.appendChild(cell);
    cell.appendChild(document.createTextNode( arguments[i]) ); }
    }
    it renders something comparable to this:

    <table width=375 id="displayButton">
    <tr><td>pic1</td><td>pic2</td></tr>
    </table>

    <comment> that is ofcourse, if the addRow() function passed pic1 and pic2 as a parameters. Like

    addRow(pic1, pic2).</comment>

    But what I want is a way to render something comparable to this.

    <table width=375 id="displayButton">
    <tr><td name="gallery_Item[0]" onclick="picture.src=display[0]; changeDescript(myPic[0], myPic_descript[0])">pic1</td>
    <td name="gallery_Item[1]" onclick="picture.src=display[0]; changeDescript(myPic[1], myPic_descript[0])">pic1</td>
    </table>


    What I need to know is how to write the following javascript properly:

    function addRow() {
    var body = document.getElementById('displayButton') .getElementsByTagName('tbody')[0];
    var row = body.appendChild( document.createElement('tr'));
    for (var i=0, cell; i < arguments.length; i++) {
    cell = document.createElement("td");

    /*This is part I am having a hard time with. I need the table cell that has just been rendered to have it's own functionality. Just as any button is an average online displays an online buttons that changes the image on display. This button would actually change it's value and variables based on the arguements passed, and the other functions accessed by the seperate venue
    button in the html itself. That's why I need the array values to be passed into the onClick function*/
    cell.onClick = "picture.src='display[" + i + "]'; changeDescript(myPic_name[" + i + "], myPic_descript[" + i + "])";

    row.appendChild(cell);
    cell.appendChild(document.createTextNode( arguments[i]) ); }
    }

    FYI:
    where

    display[0] = beforeLunch_pic.src;
    myPic_name[0] = beforeBrunch;
    myPic_descript[0] = beforeBrunch_describe;

    now the arrays change once the user has opted to change the gallery venue.

    display[0] = shadow_pic.src;
    myPic_name[0] = afistFull;
    myPic_descript[0] = afistFull_describe;

    ANY HELP IS SO GREATLY APPRECIATED.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Create a link inside the cell and make its size 100% so that the whole cell is clickable.

    Javascript:
    Code:
    function addRow() {
      var cell, link;
      var body = document.getElementById('displayButton').getElementsByTagName('tbody')[0];
      for (var i=0; i < arguments.length; i++) {
        link = document.createElement("a");
        link.className = "linkcell";
        link.setAttribute("href", "#");
        link.onclick = new Function("picture.src=display[" + i + "]; changeDescript(myPic_name[" + i + "], myPic_descript[" + i + "]); return false;");
        link.appendChild(document.createTextNode(arguments[i]));
        cell = document.createElement("td");
        cell.appendChild(link);
        row = document.createElement('tr');
        row.appendChild(cell);
        body.appendChild(row);
      }
    
    }
    CSS:
    Code:
    .linkcell {
      width:100%;
      height:100%;
      display: block;
      text-decoration:none;
    }
    .linkcell:hover {
      background-color:yellow;
    }


  •  

    Posting Permissions

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