|
Supreme Master coder!
Join Date: Feb 2009
Posts: 23,237
Thanks: 59
Thanked 3,998 Times in 3,967 Posts
|
Here...I have it working. Yes, with your "viewport" and "mapbox.js" code.
Changes marked in red, of course.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Untitled Document</title>
<link rel="stylesheet" href="https://tornhq.com/Events/HallowTown/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="https://tornhq.com/js/jquery.mousewheel.min.js"></script>
<script src="https://tornhq.com/js/JQuery.mapbox.js"></script>
<script src="https://tornhq.com/js/jquery.tipsy.js"></script>
<script>
$(document).ready(function(){
// Main function that shows and hides the requested tabs and their content
var set_tab = function(tab_container_id, tab_id){
// Remove class "active" from currently active tab
$('#' + tab_container_id + ' ul li').removeClass('active');
// Now add class "active" to the selected/clicked tab
$('#' + tab_container_id + ' a[rel="' + tab_id + '"]').parent().addClass("active");
// Hide contents for all the tabs.
// The '_content' part is merged with tab_container_id and the result
// is the content container ID.
// For example for the original tabs: tab_container_id + '_content' = original_tabs_content
$('#' + tab_container_id + '_content .tab_content').hide();
// Show the selected tab content
$('#' + tab_container_id + '_content #' + tab_id).fadeIn();
}
// Function that gets the hash from URL
var get_hash = function(){
if (window.location.hash) {
// Get the hash from URL
var url = window.location.hash;
// Remove the #
var current_hash = url.substring(1);
// Split the IDs with comma
var current_hashes = current_hash.split(",");
// Loop over the array and activate the tabs if more then one in URL hash
$.each(current_hashes, function(i, v){
set_tab($('a[rel="'+v+'"]').parent().parent().parent().attr('id'), v);
});
}
}
// Called when page is first loaded or refreshed
get_hash();
// Looks for changes in the URL hash
$(window).bind('hashchange', function() {
get_hash();
});
// Called when we click on the tab itself
$('.tabs_wrapper ul li').click(function() {
var tab_id = $(this).children('a').attr('rel');
// Update the hash in the url
window.location.hash = tab_id;
// Do nothing when tab is clicked
return false;
});
$('#north').tipsy({gravity: 'n'});
$('#south').tipsy({gravity: 's'});
$('#east').tipsy({gravity: 'e'});
$('#west').tipsy({gravity: 'w'});
$('#north-west').tipsy({gravity: 'nw'});
$('#north-east').tipsy({gravity: 'ne'});
$('#south-west').tipsy({gravity: 'sw'});
$('#south-east').tipsy({gravity: 'se'});
$("#viewport2").mapbox({
mousewheel: true,
layerSplit: 1,
defaultLayer: 0,
});
var zoomLevels = [ 100,75,50 ];
var curZoom = 0;
$(".map-control a").click(function() {//control panel
var cn = this.className;
if ( cn == "zoom" || cn == "back" )
{
var newZoom = ( cn == "zoom" ) ? curZoom - 1 : curZoom + 1;
if ( newZoom < 0 || newZoom >= zoomLevels.length ) return false; // already at min/max
curZoom = newZoom;
var theMap = document.getElementById("mainMap");
theMap.className = "zoom" + zoomLevels[curZoom];
var holder = document.getElementById("mapholder");
holder.style.height = theMap.offsetHeight + "px";
holder.style.width = theMap.offsetWidth + "px";
} else {
var viewport = $("#viewport2");
//this.className is same as method to be called
viewport.mapbox(cn);
}
return false;
});
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"
};
// get references to important elements:
var table = document.getElementById("mainMap");
var clk = document.getElementById("whichClicked");
var typ = document.getElementById("typeClicked");
// set up all the cells:
for (var r = 0; r < map.length; ++r) {
var row = map[r];
var tr = table.insertRow(-1);
for (var c = 0; c < row.length; ++c) {
var cell = tr.insertCell(-1);
cell.id = (map.length - r - 2) + ":" + (c+1-5);
cell.className = classes[row.charAt(c)];
}
}
$(table).dblclick(function (event) {
var tile = event.target;
clk.innerHTML = tile.id;
typ.innerHTML = tile.className;
set_tab('new2_tabs', 'tile_options');
});
});
</script>
<style>
body { margin:0; padding:0; }
table { 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#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 id="Interface_Wrap">
<div id="Top_Left"></div>
<div id="Top_Right"></div>
<div class="clearfix"></div>
<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>
<div class="tabs_wrapper">
<div id="new2_tabs">
<ul>
<li class="active"><a href="#move_around" rel="move_around"><img id="south-west" src="https://tornhq.com/images/Events/HallowTown/move.png" original-title="Move Around The Map" alt="" /></a></li>
<li><a href="#set_marker" rel="set_marker"><img id="south" src="https://tornhq.com/images/Events/HallowTown/Menu-SetLocation.png" original-title="Set your location in Hallow Town" alt="" /></a></li>
<li><a href="#view_quests" rel="view_quests"><img id="south-east" src="https://tornhq.com/images/Events/HallowTown/Menu-Quests.png" original-title="View Quests" alt="" /></a></li>
<li><a href="#hallow_chat" rel="hallow_chat"><img id="north-west" src="https://tornhq.com/images/Events/HallowTown/Menu-Chat.png" original-title="Chat with others regarding Hallow Town!" alt="" /></a></li>
</ul>
</div>
<div id="new2_tabs_content">
<div id="move_around" class="tab_content" style="display: block;">
<div class="map-control">
<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>
<div id="set_marker" class="tab_content">
<p>This will be the Set Marker content</p>
</div>
<div id="view_quests" class="tab_content">
<p>This will be to view the quests...</p>
</div>
<div id="hallow_chat" class="tab_content">
<p>This will be to chat...</p>
</div>
<div id="tile_options" class="tab_content">
You just clicked on Co-ordinates <span id="whichClicked"></span>
<br/>
The cell type is <span id="typeClicked"></span>
<br/>
<i>(click to close)</i>
</div>
</div>
</div>
</div>
</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.
Last edited by Old Pedant; 01-01-2013 at 12:22 AM..
|