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 4 123 ... LastLast
Results 1 to 15 of 51
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    Question How to replicate my map for other levels?

    Hello,

    I would like to know how to replicate the map and it's features multiple times for the other zoom levels, the only difference is that there'll be different td styles, getting smaller and smaller.

    Link: https://tornhq.com/Events/HallowTown/index-New.html

    Best Regards,
    Tim

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    	<style>
    		body { margin:0; padding:0; }
    		table { background-color: #ada39d; }
    
    		#Zoomed100 td {height: 29px; min-height: 29px; width: 36px; min-width: 36px; vertical-align: top; border-collapse: separate; border: 1px solid #dfdfdf; }
    		#Zoomed80 td {height: 20px; min-height: 20px; width: 20px; min-width: 20px; 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#popupon {
    			position: absolute;
    			display: none;
    			width: 240px;
    			height: 100px;
    			border: solid blue 3px;
    			background-color: lightableue;
    			padding: 10px;
    			text-align: center;
    		}
    	</style>
    </head>
    
    <body>
    				<div style="height: 900px; width: 2000px;">
    					<div class="mapcontent">
    						<table id="Zoomed80"></table>
    					</div>
    				</div>
    				<div style="height: 1192px; width: 2396px;">
    					<div class="mapcontent">
    						<table id="Zoomed100"></table>
    					</div>
    				</div>
    
    <script type="text/javascript">
    
    
    
    
    var map = [
    	"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"
    };
    
    function Map(id,map,cls){
    // get references to important elements:
     var table = document.getElementById(id);
     // set up all the cells:
     for (var r = 0; r < map.length; ++r) {
      var row = map[r];
      var tr = table.insertRow(-1);
      if (row){
       for (var c = 0; c < row.length; ++c) {
    	var cell = tr.insertCell(-1);
    	cell.id = (map.length - r - 2) + ":" + (c+1-5);
    	cell.className = cls[row.charAt(c)];
       }
      }
     }
    }
    
    Map('Zoomed80',map,classes)
    Map('Zoomed100',map,classes)
    
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Thank you for your help vwphillips.

    Edited: https://tornhq.com/Events/HallowTown/Multiple.html
    Non-edited: https://tornhq.com/Events/HallowTown/index-New.html

    Although what you have done does add a new zoom level of the map, the double click feature no longer works.

    Also, to add another layer do I simply make another TD ID, lets say it's called zoomed60 and add it to the Javascript like so?

    Code:
    Map('Zoomed60',map,classes)
    Best Regards,
    Tim

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,211
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Ummm...I don't think this is the right approach.

    I may be way off base, but I *THINK* the answer is much much easier.

    Demonstrating with the code I posted before. You can see how to adapt it to your new version. Changes in red, as usual.
    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;
    }
    .zoom100 td {
    	height: 29px;
    	min-height: 29px;
    	width: 36px;
    	min-width: 36px;
    	vertical-align: top;
    	border-collapse: separate;
    	border: 1px solid #dfdfdf;
    }
    .zoom75 td {
           height: 22px; 
            min-height: 22px; 
            width: 27px; 
            min-width: 27px;
    	vertical-align: top;
    	border-collapse: separate;
    	border: 1px solid #dfdfdf;
    }
    .zoom50 td {
            height: 15px; 
            min-height: 15px; 
            width: 18px; 
            min-width: 18px;
    	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>
    <form id="sizechange">
        <label><input type="radio" name="zoom" value="zoom100" checked="checked" /> 100% </label>
        <label><input type="radio" name="zoom" value="zoom75"/> 75% </label>
        <label><input type="radio" name="zoom" value="zoom50"/> 50% </label>
    </form>
    <br/>
    <table id="mainMap" class="zoom100">
    </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");
    
          var form = document.getElementById("sizechange");
          for ( var z = 0; z <= 2; ++z )
          {
              form.zoom[z].onclick = function( ) { tbl.className = this.value; }
          }
     
          // 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" + (theMap.length - r) + "_" + (c+1);
                  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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,211
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Oh...and yes, it works like a charm.

    And because there is ONLY ONE "layer", there will be no impact on any of the JS code. In fact, JS will not be aware of the change, except insofar as you might be looking at the width and height of the map as I showed you.
    Last edited by Old Pedant; 12-31-2012 at 09:41 PM.
    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,211
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    And by the way, "Sheriff" is the correct spelling. Double-F, not double-R.
    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.

  • #7
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    This map currently allows for mouse-wheel and the usage of the buttons under the "Move around the Map" tab.

    It appears what you have done changed it for a radio button?

    Best Regards,
    Tim

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,211
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    READ WHAT I WROTE:
    Demonstrating with the code I posted before.
    You can see how to adapt it to your new version.
    The actual code used to change the zoom level isn't the important part: The "trick" is to simply CHANGE THE CLASSNAME of the <table> and, if you have the appropriate classes in the <style>s, as I showed there with zoom100, zoom75, zoom50 (where the style of all the <td>s in the <table> thus depend on the table's classname), *PRESTO* you have zoomed.
    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
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Okay, thank you Old Pedant.

    As I 'm still learning, I do not yet know exactly how to implement this...

    I gather I have to do something here;
    Code:
    			$(".map-control a").click(function() {//control panel
    				var viewport = $("#viewport2");
    				//this.className is same as method to be called
    				if (this.className == "zoom" || this.className == "back") {
    					viewport.mapbox(this.className, 2);//step twice
    				} else {
    					viewport.mapbox(this.className);
    				}
    				return false;
    			});
    And again elsewhere for the mouse-wheel?

    Sorry for my lack of knowledge and I am so grateful for your help!

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,211
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Sorry, I don't use jQuery.

    I don't see how that code is relevant to changing the zoom level, at all.

    It *LOOKS* like that code indeed is loading a *NEW* map into the "viewport".

    WHY??? You only need one map. You just need to change the className of the map.

    And why is a click on an <a> element used to change the zoom?? EDIT: Never mind. I see. Your + and - "buttons" are actually <a> elements. Why??? Why aren't they simply <img> elements? You can have onclick on an <img> element and then you don't have to cancel the effect of the onclick so that the <a> doesn't do the wrong thing.
    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.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,211
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    OH UGLY UGLY UGLY!

    NOW I see what you have done!
    Code:
    			<div id="viewport2">
    				<div style="width:445px; height:224px;">
    					<!--top level map content goes here-->
    				</div>
    				<div style="height: 336px; width: 667px;">
    					<div class="mapcontent">
    							<!--map content goes here-->
    					</div>
    				</div>
    				<div style="height: 488px; width: 890px;">
    					<div class="mapcontent">
    							<!--map content goes here-->
    					</div>
    				</div>
    etc.
    So each of those differently sized DIVs will have the *SAME* map, but at different zoom levels???

    THIS IS A KILLER!

    I think you have made a HUGE mistake!

    OF COURSE everything you do when you change zoom levels is NOW WIPED OUT. Just because two cells have the same ID in different maps does *NOT AT ALL MAKE THEM THE SAME CELL!* And, just incindentally, it's illegal to have two or more elements with the same ID in the first place!

    Look, instead of doing it this way, just have the *ONE* <div>.
    Code:
    		<div class="mapwrapper">
    			<div id="viewport2">
    				<div id="mapHolder" style="height: 1192px; width: 2396px;">
    					<div class="mapcontent">
    						<table id="mainMap" class="zoom100"></table>
    					</div>
    				</div>
    			</div>
    		</div>
    And now you use my concept of just changing the className of document.getElementById("mainMap").

    And then you *AUTOMATICALLY* also change the height and width of document.getElementById("mapHolder") [I just added that id] to match the size of the re-sized (zoomed) <table>! And you do that by getting the new size of the <table> all in JS code!

    Example:
    Code:
           tbl.className = "zoom" + zoomLevel; // where zoomLevel is 100,75, or 50...or whatever you choose
           var holder = document.getElementById("mapHolder");
           holder.style.height = tbl.offsetHeight;
           holder.style.width = tbl.offsetWidth;
    Last edited by Old Pedant; 12-31-2012 at 11:13 PM.
    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.

  • #12
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    I'm using the JQuery Mapbox and this was how it was done.

    https://tornhq.com/js/JQuery.mapbox.js

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,211
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    By the by, I just tested that in my own version of your gameMap (the code I posted in post #4, above) and it works like a charm.
    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,211
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Quote Originally Posted by MrTIMarshall View Post
    I'm using the JQuery Mapbox and this was how it was done.

    https://tornhq.com/js/JQuery.mapbox.js
    <shrug>I can't help it if you are using something that is less than ideal for your situation.

    But I *think* that if you used what I suggested, it would probably work even with that code. Just be sure to *NOT* use their zoom code.

    By the by, I think I could replicate all the functionality of that code that you are actually using in about half the number of lines. Just by avoiding jQuery. (Well, there's very little in there that actually depend on jQuery, for that matter.)
    Last edited by Old Pedant; 12-31-2012 at 11:31 PM.
    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
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    I'll implement what you have said in a moment, I am waiting on a take-away order and I might loose track is I start now.

    Thank you again

    Oh and if I don't message again within 35 minutes...

    ...HAPPY NEW YEAR! I hope this year is better than the last!


  •  
    Page 1 of 4 123 ... 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
    •