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

[Old Pedant]

I'm sorry, I still don't understand WHERE this menu that shows the clicked on id is supposed to appear.

You mean you *DO* want it to show in that small map space??? It seems to me like that space is so limited already it would be better if it appeared to the side or above, even if it temporarily covered up another part of the display.

**********

I don't understand *WHAT* height and width you are trying to calculate. Or of what, if you will.

I agree about double click: If you are trying to work with as many devices as possible, I would avoid that. My wife uses a NOOK, for example, and double click is nearly impossible on it. You can try a dozen times before it works.

[Old Pedant]

Oh...you want the height and width OF THE FULL MAP!

Don't calculate it! ASK for it!

In my code, for example, you could get it as indicated:

...
      // 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" + (theMap.length - r) + "_" + (c+1);
              cell.className = classes[row.charAt(c)];
              cell.onclick = cellClick;
          }
      }
alert( tbl.scrollWidth + " by " + tbl.scrollHeight );
     ...

You, of course, would store the values rather than alert them.

On Chrome, I got 2396 by 1192.
Ahh...good...MSIE 9 gave the same answer!

[Old Pedant]

And I have to give up for the night. You have 5 minutes.

[MrTIMarshall]

Eak 5 mins!

The bottom right box area, I'll place a tab there fore the information as your right, the map area is quite small...

And thank you so very much!

[Old Pedant]

Okay...that will work great.

You could do something simple:

            	<div id="move_around" class="tab_content" style="position: relative;display: block;">
                    <div class="map-control" style="position: absolute; z-index: 1;">
                        <a href="#left" class="left">Left</a>
                        <a href="#right" class="right">Right</a>
                        <a href="#up" class="up">Up</a>
                        <a href="#down" class="down">Down</a>
                        <a href="#zoom" class="zoom">Zoom</a>
                        <a href="#zoom_out" class="back">Back</a>
                    </div>
                    <div id="popon" style="position: absolute; z-index: 99; display: none;">
                        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>
                </div>

And then change the code for the callClick function to just this:

      function cellClick( )
      {
          clk.innerHTML = this.id;
          typ.innerHTML = this.className;
          pop.style.display = "block";
      }

What could be simpler? And of course then go clean up my ugly styles.

G'Night.

[MrTIMarshall]

I know this should be fairly straight forward, however when I delete;

                    <div id="popon" style="display:block; margin-top: 100px;">
                        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>

Where it currently is, the map breaks, I cannot seem to follow what you've said above correctly to get it to work...

Best Regards,
Tim

[MrTIMarshall]

On second thoughts, where the content shows for the tabs, I'll have it displayed there for the entire space and have an [x] in the corner, but not as one of the tabs contents.

However I am very tired at this moment in time and cannot even find out how the...

    <i>(click to close)</i>

...Closes the div!

[MrTIMarshall]

I've got it all working and neatened up a little

Oh and the double click has been implemented now

[MrTIMarshall]

It's all working fine for myself on Google Chrome, however my friend using FireFox says it is not working when you double click on the menu.

I cannot test as I've not yet installed FireFox on this system and I am currently off to bed in case anyone looking at this is using FireFox.

[Old Pedant]

Originally Posted by MrTIMarshall

On second thoughts, where the content shows for the tabs, I'll have it displayed there for the entire space and have an [x] in the corner, but not as one of the tabs contents.

However I am very tired at this moment in time and cannot even find out how the...

    <i>(click to close)</i>

...Closes the div!

Don't know how yo missed it. I even COMMENTed it. (HINT: Use comments in your own code!)

      // handle click-to-close
      pop.onclick = function( ) { this.style.display = "none"; }