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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    369
    Thanks
    46
    Thanked 1 Time in 1 Post

    Question How to show a menu on table <td> click?

    Hello,

    I have just finished making a massive table, which is a map. I have not yet implemented the <td> ID's, of which will look like this 1:1.

    I would like to know how to show a menu upon clicking a cell which will show:

    • Directions To Here
    • Directions From Here
    • Center Map Here
    • Zoom Out
    • Zoom In
    • Echo the ID (which will be the square's co-ord to use later for marking things on this map)


    Website Link: https://tornhq.com/Events/HallowTown/table.html

    Thank you for any help and/or advice in advanced.

    Best Regards,
    Tim
    Last edited by MrTIMarshall; 12-30-2012 at 12:36 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    IDs should not start with a digit and should not include characters you wouldn't see in a JS variable.

    In place of "1:1", consider using "C1_1" or similar.

    **********

    Showing a menu is pretty trivial. You could just create a <div style="position: absolute; display: none; z-index: 99;"> that contains a <form> with the appropriate buttons or whatever you need to control and/or ask for your various options.

    So then you just add an onclick to each cell that figures out where to position the <div> (change the style.top and style.left) and then change the style.display to block. Some action within the <div> will later hide it.

    You want some skeleton code?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,771
    Thanks
    55
    Thanked 518 Times in 515 Posts
    that is indeed massive. I hope you automated the process somewhat.

    getting the menu to display is simple - just loop through the TDs adding a click listener to them. The click then displays a hidden div or whatever that can appear at the point of the click or wherever else you feel like. As for the actual functionality of those menu items - some of them are going to be quite tricky.

    You know that there are mapping APIs (google is the most obvious one) that let you use your own tiles and have all of that functionality built in, right?

    oh, and if you can avoid it, please don't use IDs like 1:1 - except in HTML5, IDs aren't supposed to start with a number

    [EDIT: yeah, what he said ^ ^ ^ ]
    Last edited by xelawho; 12-30-2012 at 01:06 AM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    WTH...here's a simple start for you.

    Starting from your code, make the following changes:
    (1) Add the following into your <style> section
    Code:
    div#popon {
        position: absolute;
        display: none;
        width: 240px;
        height: 100px;
        border: solid blue 3px;
        background-color: lightblue;
        padding: 10px;
        text-align: center;
    }
    (2) Add an id to your <table>. I used
    Code:
    <table id="mainMap">
    (3) Add all the following code after the </div> and before the </body> (that is, add everything *NOT* shown in red between the spots shown in red):
    Code:
    </table>
    </div>
    <div id="popon">
        You just clicked on cell <span id="whichClicked"></span>
        <br/>
        The cell type is <span id="typeClicked"></span>
        <br/>
        <i>(click to close)</i>
    </div>
    <script type="text/javascript">
    (
      function() 
      {
          // get references to important elements:
          var tbl = document.getElementById("mainMap");
          var pop = document.getElementById("popon");
          var clk = document.getElementById("whichClicked");
          var typ = document.getElementById("typeClicked");
    
          // handle click-to-close
          pop.onclick = function( ) { this.style.display = "none"; }
    
          // set up all the cells:
          for ( var r = 0; r < tbl.rows.length; ++r )
          {
              var row = tbl.rows[r];
              for ( var c = 0; c < row.cells.length; ++c )
              {
                  var cell = row.cells[c];
                  cell.id = "C" + r + "_" + c;
                  cell.onclick = cellClick;
              }
          }
          // and then handle any click:
          function cellClick( )
          {
              clk.innerHTML = this.id;
              typ.innerHTML = this.className;
              // where is this cell?
              var x = -115; // adjust these to position the popon
              var y = -32;  // relative to the top left of cell
              var node = this;
              while ( node != null )
              {
                  x += node.offsetLeft;
                  y += node.offsetTop;
                  node = node.offsetParent;
              }
              // you could code in here to ensure that the entire popon
              // is visibile (no off the bounds of the display)
              // Just for starters, you should do:
              if ( x < 0 ) x = 0;
              if ( y < 0 ) y = 0;
              // but you could also check to make sure 
              // its not off bottom or right side
    
              // then position it:
              pop.style.top = y + "px";
              pop.style.left = x + "px";
              pop.style.display = "block";
          }
      }   
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    MrTIMarshall (12-30-2012)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    p.s.: Yes, it works.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    369
    Thanks
    46
    Thanked 1 Time in 1 Post
    Thank you very much Old Pedant!

    The only problem I would like to ask for some help with modifying is the cell numbering.

    The bottom left-hand corner is 1:1. I am so made up with this as I thought it would be a lot harder than what is seems to be as no xelawho, I did not automate any of this map and I was zombified afterwards so to speak!

    Also, I plan to implement a certain percent of this map to be hidden. I have this all ready elsewhere to add this content into. Would it be possible, without complicating things, to have the menu not hidden being in this div or will the z-index mean it'll always show?

    Once again Thank You So Very Much!

    Best Regards,
    Tim

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I think this is what Xelawho was thinking of when he mentioned "Automating" the process.

    Take a look. I duplicates your map without the tedium or writing in the call class names one at time, etc.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    body{margin:0; padding:0; overflow:scroll; }
    table {
    	width:100%;
    	background-color: #ada39d;
    }
    td {
    	height: 29px;
    	min-height: 29px;
    	width: 36px;
    	min-width: 36px;
    	vertical-align: top;
    	border-collapse: separate;
    	border: 1px solid #dfdfdf;
    }
    .NoMans1 {background-color:#CCCCCC; }
    .NoMans2 {background-color:#b7cdb7; }
    .Wall {background-color:#8e8e8e; }
    .Forest{background-color:#8eb68e }
    .Grass{background-color:#b7cdb7; }
    .fog{background-color:#dacbda; }
    .fog2{background-color:#d2d2d2; }
    .DeepWater{background-color:#a4cdd9; }
    .ShallowWater, .Sherrif{background-color:#acdada; }
    .Unknown{background-color:#e3cca1; }
    .Cliff{background-color:#bbb099; }
    .Hospital{background-color:#e5faff; }
    .UnknownBuilding{background-color:#cbbcda; }
    .Path{background-color:#dabc8e; }
    .Castle{background-color:#d8cabc; }
    .WitchsHouse, .ChefsHouse{background-color:#daa3a3; }
    .Cave{background-color:#b1b1b1; }
    .GreatHall{background-color:#c7d1ed; }
    .Church{background-color:#d9e3a1; }
    
    div#popon {
        position: absolute;
        display: none;
        width: 240px;
        height: 100px;
        border: solid blue 3px;
        background-color: lightblue;
        padding: 10px;
        text-align: center;
    }
    
    </style>
    </head>
    
    
    
    <body>
    <div>
    <table id="mainMap">
    </table>
    </div>
    <div id="popon">
        You just clicked on cell <span id="whichClicked"></span>
        <br/>
        The cell type is <span id="typeClicked"></span>
        <br/>
        <i>(click to close)</i>
    </div>
    <script type="text/javascript">
    (
      function() 
      {
          var theMap = [
              "111112222222222222222222222222222222222222222222222222222",
              "111112222222222222222222222222222222222222222222222222222",
              "11111WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW222222222222",
              "11111TTTTTTTGGGGfffffGGGQ?????EFGGGWHHHHHHHHW222222222222",
              "11111TTTTTTGGGGGGfffGGGQQ?????EFFGGWHHHHHHHHW222222222222",
              "11111TTTTTTTGGGGGGfGGGGQq?WWWWWFFfGWHHHHHHHHW222222222222",
              "11111TTTWWWTGGGGGGGGGGQQqqWUUUUFFffWHHHHHHHHWWWW222222222",
              "11111TTTWTWTTGGGGGGGGGQGGGWUUUWFFffWHHHHHHHHHPPW222222222",
              "11111TTTWWWTTWWWWWWWGGQGGGWUUUWFFffWHHHHHHHHWWPW222222222",
              "11111TTTTTTTTWCCCCCWGGQGGGWUUUWFFqqWWWHWWWWWWWPW222222222",
              "11111TTTTTTGGWCCCCCWGGQGGGWWUWWFFqQQQQPQQQQQWWPW222222222",
              "11111TTTTTGGGWCCCCCWGGQGGGGGPGEFFqqGGGPGGGGGWWPW222222222",
              "11111TTTTGGGGWCCCCCWGGQGGGGGPGEFGGGTTGPGGGGfWWPW222222222",
              "11111TTTGGGGGWWWCWWWGGQGGGGGPPPPFFTTTTPGGGffPPPW222222222",
              "11111FFFGGGGGGGGPGGGGGQGGGGGPGEPFGTTTGPGGGffWWWW222222222",
              "11111FFFFFFGGGGGPPPPPPQPPPPPPGEPGTTTTGPGGfffWGGG222222222",
              "11111WWWFFFFGGGGPGGGGGQGPGWWWWWPPPPPTPPGGGGfW222222222222",
              "11111cccWcWFGGGGPGWWWWQGPGWwwwWGGGGTTTGGGGGGW222222222222",
              "11111cccccWFGWWWPGWhhhQGPGWwwwWGGGGGTGGGGGGGW222222222222",
              "11111cccccWFGWGWPGWhhhQGPGWWWWWGGGGGGGGGGGGGW222222222222",
              "11111ccccWFFGWWWPGWhhhQGPGGGGGEGGGGGGGGGGGG?W222222222222",
              "11111cccWFFGGGGGPGWhhhQGPPPGGGEGGGGGGGGGGG??W222222222222",
              "11111WWWFFGGGGGGPGWWhWQGGGPGGGEGGGqGqGGGGG??W222222222222",
              "11111FFFFGGGGGGGPGGGPGQGGGPGGGEGGGqqqqGGG???W222222222222",
              "11111FFFGGGGGGGGPPPPPGQGGGPGGGEGGqqqqWWWWWWWWWWWW22222222",
              "11111FGGGGGGGGGGPGGGGGQGWW+WWGEGGqWWWWBBBBBBBBBBW22222222",
              "11111GGGGGGGGGGGPGGGGGQGW+++WGEGqqWBBBBBBBBBWWWBW22222222",
              "11111GGGGGGGGGGGPGGGGGQGWWWWWGEGGqWBBBWBBBBBWqWBW22222222",
              "11111PPPPPPPPPPPPPGGGGQGGfGfGfEGGGWWWWWWWWWBWqWBW22222222",
              "11111PGGGGGGGGGGGPGGGGQGffffffEGGGGGGGGGGGBBWWWBW22222222",
              "11111PGGGGGGGGGGWWWGGGQfffffffEEGGGGGGWWWWWBBBBBW22222222",
              "11111PGGGGGGGGGGWSWGGGQfffffffEEEGGGGGWBBBBBBBBBW22222222",
              "111111111111111111111111111111111111111111111111111111111",
              "111111111111111111111111111111111111111111111111111111111"
          ]
          var classes = {
                 "1" : "NoMans1",
                 "2" : "NoMans2",
                 "W" : "Wall", 
                 "T" : "Forest", /* think "T"rees */
                 "G" : "Grass", 
                 "f" : "Fog", 
                 "F" : "Fog2", 
                 "Q" : "DeepWater", /* think a"Q"ua */
                 "q" : "ShallowWater", 
                 "S" : "Sherrif", 
                 "?" : "Unknown", 
                 "E" : "Cliff", /* think "E"scarpment */ 
                 "H" : "Hospital", 
                 "U" : "UnknownBuilding",
                 "P" : "Path", 
                 "C" : "Castle", 
                 "w" : "WitchsHouse", 
                 "B" : "ChefsHouse", /* think "B"aker */
                 "c" : "Cave", 
                 "h" : "GreatHall", 
                 "+" : "Church"
    }
          // get references to important elements:
          var tbl = document.getElementById("mainMap");
          var pop = document.getElementById("popon");
          var clk = document.getElementById("whichClicked");
          var typ = document.getElementById("typeClicked");
    
          // handle click-to-close
          pop.onclick = function( ) { this.style.display = "none"; }
    
          // set up all the cells:
          for ( var r = 0; r < theMap.length; ++r )
          {
              var row = theMap[r];
              var tr = tbl.insertRow(-1);
              for ( var c = 0; c < row.length; ++c )
              {
                  var cell = tr.insertCell(-1);
                  cell.id = "C" + r + "_" + c;
                  cell.className = classes[row.charAt(c)];
                  cell.onclick = cellClick;
              }
          }
          // and then handle any click:
          function cellClick( )
          {
              clk.innerHTML = this.id;
              typ.innerHTML = this.className;
              // where is this cell?
              var x = -115; // adjust these to position the popon
              var y = -32;  // relative to the top left of cell
              var node = this;
              while ( node != null )
              {
                  x += node.offsetLeft;
                  y += node.offsetTop;
                  node = node.offsetParent;
              }
              // you could code in here to ensure that the entire popon
              // is visibile (no off the bounds of the display)
              // Just for starters, you should do:
              if ( x < 0 ) x = 0;
              if ( y < 0 ) y = 0;
              // but you could also check to make sure 
              // its not off bottom or right side
    
              // then position it:
              pop.style.top = y + "px";
              pop.style.left = x + "px";
              pop.style.display = "block";
          }
      }   
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    MrTIMarshall (12-30-2012)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by MrTIMarshall View Post
    The bottom left-hand corner is 1:1.
    That's easy enough to change. Just need to change that assignment of the ID. Change the line
    Code:
                  cell.id = "C" + r + "_" + c;
    to
    Code:
                  cell.id = "C" + (theMap.length - r) + "_" + (c+1);
    or
                  cell.id = "C" + (tbl.rows.length - r) + "_" + (c+1);
    depending on which version of my code you are using.

    ********
    I have this all ready elsewhere to add this content into. Would it be possible, without complicating things, to have the menu not hidden being in this div or will the z-index mean it'll always show?
    If you have space RESERVED for the menu, then the z-index won't matter.

    And you won't need to worry about positioning the menu div, either.

    Except if your map is larger than the screen (it is on my screen, and I'm using an HD resolution monitor: 1920 x 1080) then if you scroll around the menu may go off the screen. So maybe a popon *is* better?

    But let's leave that until you show us what the map will look like after parts are hidden.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    And I agree with Xelawho: Things like generating directions from/to places are really tough to do. I'd look into using the Google maps api.

    It's going to be work, but surely not as much work as writing a path-finding algorithm.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder
    Join Date
    Nov 2010
    Posts
    369
    Thanks
    46
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    That's easy enough to change. Just need to change that assignment of the ID. Change the line
    Code:
                  cell.id = "C" + r + "_" + c;
    to
    Code:
                  cell.id = "C" + (theMap.length - r) + "_" + (c+1);
    or
                  cell.id = "C" + (tbl.rows.length - r) + "_" + (c+1);
    I had to use the following:
    Code:
    cell.id = (theMap.length - r - 2) + ":" + (c+1-5);
    And thank you very much for the automapping, of whih I did not know about and will save on the vast amount of code there currently is!

    I'll implement this shortly and link you too the full version.

    Thank you for everyone's help so far!

  • #11
    Regular Coder
    Join Date
    Nov 2010
    Posts
    369
    Thanks
    46
    Thanked 1 Time in 1 Post

  • #12
    Regular Coder
    Join Date
    Nov 2010
    Posts
    369
    Thanks
    46
    Thanked 1 Time in 1 Post
    https://tornhq.com/Events/HallowTown/index-New.html

    I have only implemented this into the map, of which I cannot seem to calculate the height/width, I did:

    Height:
    (34*31)+35 = 1,089
    Width:
    (57*38)+58 = 2,224

    And the menu is not appearing where it should be. It does appear but you've got to test it a few times.

    Start off by zooming in completely via your mouse-wheel or the +/-

    Best Regards,
    Tim

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Again, if you want the menu in a FIXED PLACE, then you do *NOT* want to use display: none.

    You also do NOT WANT to set its top and left locations relative to the clicked-on cell.

    Did you not understand that all this code:
    Code:
              // where is this cell?
              var x = -115; // adjust these to position the popon
              var y = -32;  // relative to the top left of cell
              var node = this;
              while ( node != null )
              {
                  x += node.offsetLeft;
                  y += node.offsetTop;
                  node = node.offsetParent;
              }
              // you could code in here to ensure that the entire popon
              // is visibile (no off the bounds of the display)
              // Just for starters, you should do:
              if ( x < 0 ) x = 0;
              if ( y < 0 ) y = 0;
              // but you could also check to make sure 
              // its not off bottom or right side
    
              // then position it:
              pop.style.top = y + "px";
              pop.style.left = x + "px";
              pop.style.display = "block";
    is used to MOVE the information/menu location?

    If you don't want it to move, DO NOT MOVE IT!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I can't figure out WHERE on the display you WANT the information about the cell to appear.

    Maybe if you would just tell us or show us?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Regular Coder
    Join Date
    Nov 2010
    Posts
    369
    Thanks
    46
    Thanked 1 Time in 1 Post
    I'm sorry Old Pedant, I am quite new to Javascript, therefore your comments I was not 100% sure how to modify these to get the correct results.

    I would like every cell to be clickable, more so for the non-'No-Mans' area as these do not need co-ords, a drop down menu which appears near to the cell.

    Also, whilst testing, I was wondering how to modify the map to make it do you need to double click, however I'm not sure if modern smart phones allow for this feature? It's just when you click on the map and then drag, a new box appears.

    Lastly, do you know how to calculate the width and height as my attempts have failed?

    Thank you for your time and patients.

    Best Regards,
    Tim


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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