The code below works just fine, does exactly what it says on the tin. It just doesn't do it very well.
The project involves a master and slave system. One is a large screen map, the other a small touch screen with lots of buttons. The user can turn the map layers (transparent PNGs) on and off by pressing the buttons. I am using a very tiny MySQL database as the "go-between" the buttons on the control page sets a record to a 1 or 0 and the map page polls the database every 100 milliseconds (or whatever) and looks for a change. Both pages are run from the same server (one system is merely acting as a dumbish terminal)
This all works like a charm, but the fading animation doesn't work well. If I constantly toggle the button, the layer fades in and fades out...sometimes. Most times the layer merely appears and disappears but in the same interval that the animation should have taken. The map-layers are semi-transparent boxes that dim the legend depending on what layer is shown or not (just so you know)
I can't seem to figure out how to get the animation smooth out. Any ideas? Also if anyone knows how to get one webpage to control another without polling like this I would love to know, so far this is the only solution I can come up with.
var layerChange = setInterval(function() {
$.ajax({
type: 'GET',
url: '/php/db-get-layers.php',
dataType: 'json',
success: function(data) {
$.each(data, function(key, value) {
if (value == 0) {
$('#legend-' + key).fadeOut(400);
$('#map-layers #' + key).fadeIn(400);
} else {
$('#legend-' + key).fadeIn(400);
$('#map-layers #' + key).fadeOut(400);
}
});
},
});
}, 100);
Here is the php file
<?php
include('../config/config.php');
include('../config/db.php');
$provinces = $_GET['layer'];
$selectQuery = "SELECT oil, naturalgas, hydro, wind, coal, nuclear, tidal, thermal, solar FROM layers";
$query = mysql_query($selectQuery) or die(mysql_error());
$output = mysql_fetch_array($query, MYSQL_ASSOC);
echo json_encode($output);
?>
Thanks in advance for any help.
Update: The relevent HTML for the map page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Map of Canada</title>
<link rel="stylesheet" href="/styles/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/styles/structure-map.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/styles/maps.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/styles/fonts.css" type="text/css" media="screen" />
<script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="scripts/kiosk-map.js" type="text/javascript"></script>
</head>
<body>
<!-- Page Container -->
<div id="site-wrapper">
<section id="map-layers">
<div id="basemap" class="canada"></div>
<div id="oil" class="canada"></div>
<div id="naturalgas" class="canada"></div>
<div id="rivers" class="canada"></div>
<div id="hydro" class="canada"></div>
<div id="wind" class="canada"></div>
<div id="coal" class="canada"></div>
<div id="nuclear" class="canada"></div>
<div id="tidal" class="canada"></div>
<div id="thermal" class="canada"></div>
<div id="solar" class="canada"></div>
<div id="labels" class="canada"></div>
</section>
<section id="map-legend">
<div id="legend"></div>
<div id="legend-oil" class="legend-overlay"></div>
<div id="legend-naturalgas" class="legend-overlay"></div>
<div id="legend-hydro" class="legend-overlay"></div>
<div id="legend-wind" class="legend-overlay"></div>
<div id="legend-coal" class="legend-overlay"></div>
<div id="legend-nuclear" class="legend-overlay"></div>
<div id="legend-tidal" class="legend-overlay"></div>
<div id="legend-thermal" class="legend-overlay"></div>
<div id="legend-solar" class="legend-overlay"></div>
</section>
<!-- End Page Container -->
</div>
</body>
</html>
The file kiosk-map.js
contains the JS code included above - only that code, nothing else.