We Keep Coding

javascript on a webpage displaying text wrongly

I have JS code on a webpage that loads questions in from mysql db and displays the text . What happens is that it cuts off words at the end of the line and continues the word on the next line at the start. So all text across the screen starts/ends at the same point.
This seems to be the code where it displays the text.
For example the text will look like at the end of a line 'cont' and then on next line at the start 'inue'.
How do i fix this?
var questions = <?=$questions;?>;
// Initialize variables
//------------------------------------------------------------------
var tags;
var tagsClass = '';
var liTagsid = [];
var correctAns = 0;
var isscorrect = 0;
var quizPage = 1;
var currentIndex = 0;
var currentQuestion = questions[currentIndex];
var prevousQuestion;
var previousIndex = 0;
var ulTag = document.getElementsByClassName('ulclass')[0];
var button = document.getElementById('submit');
var questionTitle = document.getElementById('question');
//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'selected';
// Display Answers and hightlight selected item
//------------------------------------------------------------------
function showQuestions (){
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
if (currentIndex != 0) {
// create again submit button only for next pages
ulTag.innerHTML ='';
button.innerHTML = 'Submit';
button.className = 'submit';
button.id = 'submit';
if(quizPage<=questions.length){
//update the number of questions displayed
document.getElementById('quizNumber').innerHTML = quizPage;
}
}
//Display Results in the final page
if (currentIndex == (questions.length)) {
ulTag.innerHTML = '';
document.getElementById('question').innerHTML = '';
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
showResults();
return
}
questionTitle.innerHTML = "Question No:" + quizPage + " "+currentQuestion.question.category_name +"<br/>"+ currentQuestion.question.text;
if(currentQuestion.question.filename !== ''){
var br = document.createElement('br');
questionTitle .appendChild(br);
var img = document.createElement('img');
img.src = currentQuestion.question.filename;
img.className = 'imagecenter';
img.width = 750;
img.height = 350;
questionTitle .appendChild(img);
}
// create a for loop to generate the options and display them in the page
for (var i = 0; i < currentQuestion.options.length; i++) {
// creating options
var newAns = document.createElement('li');
newAns.id = 'ans'+ (i+1);
newAns.className = "notSelected listyle";
var textAns = document.createTextNode(currentQuestion.options[i].optiontext);
newAns.appendChild(textAns);
if(currentQuestion.options[i].file !== ''){
var br = document.createElement('br');
newAns .appendChild(br);
var img1 = document.createElement('img');
img1.src = currentQuestion.options[i].file;
img1.className = 'optionimg';
img1.width = 250;
img1.height = 250;
newAns .appendChild(img1);
newAns .appendChild(br);
}
var addNewAnsHere = document.getElementById('options');
addNewAnsHere.appendChild(newAns);
}
//.click() will return the result of $('.notSelected')
var $liTags = $('.notSelected').click(function(list) {
list.preventDefault();
//run removeClass on every element
//if the elements are not static, you might want to rerun $('.notSelected')
//instead of the saved $litTags
$liTags.removeClass(classHighlight);
//add the class to the currently clicked element (this)
$(this).addClass(classHighlight);
//get id name of clicked answer
for (var i = 0; i < currentQuestion.options.length ; i++) {
// console.log(liTagsid[i]);
if($liTags[i].className == "notSelected listyle selected"){
//store information to check answer
tags = $liTags[i].id;
// tagsClass = $LiTags.className;
tagsClassName = $liTags[i];
}
}
});
//check answer once it has been submitted
button.onclick = function (){
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
setTimeout(function() { checkAnswer(); }, 100);
};
}
//self calling function
showQuestions();
The website is on my local now but i can upload a screenimage if need be and the whole code of the webpage. Or is the issue in html?
edit: here is html/css code
<style>
/*========================================================
Quiz Section
========================================================*/
/*styling quiz area*/
.main {
background-color: white;
margin: 0 auto;
margin-top: 30px;
padding: 30px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
/*white-space: nowrap;*/
}
/*Editing the number of questions*/
.spanclass {
font-size: x-large;
}
#pages{
border: 3px solid;
display: inline-flex;
border-radius: 0.5em;
float: right;
}
#question{
word-break: break-all;
}
/*format text*/
p {
text-align: left;
font-size: x-large;
padding: 10px 10px 0;
}
.optionimg{
border: 2px solid black;
border-radius: 1.5em;
}
/*Form area width*/
/*formatting answers*/
.listyle {
list-style-type: none;
text-align: left;
background-color: transparent;
margin: 10px 5px;
padding: 5px 10px;
border: 1px solid lightgray;
border-radius: 0.5em;
font-weight: normal;
font-size: x-large;
display: inline-grid;
width: 48%;
height: 300px;
overflow: auto;
}
.listyle:hover {
background: #ECEEF0;
cursor: pointer;
}
/*Change effect of question when the questions is selected*/
.selected, .selected:hover {
background: #FFDEAD;
}
/*change correct answer background*/
.correct, .correct:hover {
background: #9ACD32;
color: white;
}
/*change wrong answer background*/
.wrong, .wrong:hover {
background: #db3c3c;
color: white;
}
/*========================================================
Submit Button
========================================================*/
.main button {
text-transform: uppercase;
width: 20%;
border: none;
padding: 15px;
color: #FFFFFF;
}
.submit:hover, .submit:active, .submit:focus {
background: #43A047;
}
.submit {
background: #4CAF50;
min-width: 120px;
}
/*next question button*/
.next {
background: #fa994a;
min-width: 120px;
}
.next:hover, .next:active, .next:focus {
background: #e38a42;
}
.restart {
background-color:
}
/*========================================================
Results
========================================================*/
.circle{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: #bdc3c7;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.fill{
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
background: #31a2ac;
}
.score {
position: absolute;
width: 100%;
top: 1.7em;
text-align: center;
font-family: Arial, sans-serif;
color: #fff;
font-size: 40pt;
line-height: 0;
font-weight: normal;
}
.circle p {
margin: 400px;
}
/*========================================================
Confeeti Effect
========================================================*/
canvas{
position:absolute;
left:0;
top:11em;
z-index:0;
border:0px solid #000;
}
.imagecenter{
display: block;
margin: 0 auto;
}
.buttonload {
background-color: #04AA6D; /* Green background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 24px; /* Some padding */
font-size: 16px; /* Set a font-size */
}
/* Add a right margin to each icon */
.fa {
margin-left: -12px;
margin-right: 8px;
}
#media only screen and (max-width: 900px){
.listyle {
width: 100% !important;
height: auto !important;
}
.imagecenter {
width: 100% !important;
}
.listyle img{
width: inherit !important;
height: unset !important;
}
.ulclass
{
padding:0px !important;
}
}
</style>
<!-- Main page -->
<div class="main">
<!-- Number of Question -->
<div class="wrapper" id="pages">
<span class="spanclass" id="quizNumber">1</span><span class="spanclass">/<?=$count?></span>
</div>
<!-- Quiz Question -->
<div class="quiz-questions" id="display-area">
<p id="question"></p>
<ul class="ulclass" id="options">
</ul>
<div id="quiz-results" class="text-center">
<button type="button" name="button" class="submit" id="submit">Submit</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>

I'm guessing that #question{ word-break: break-all; } is probably the culprit then? –
CB..yes that fixed it:)

Child div element managing

var arrlength;//////////////////////////////////////////////////////////////////
function opentextarea(borderColor) {
var arr = document.getElementsByClassName("myCustomTextarea");
arrlength=arr.length;
var goOut= 1;
Array.prototype.forEach.call(arr, function(el) {
if (el.style.backgroundColor!=='lightblue'){
goOut=0;
alert("Enter or delete the previus commnet!");
}
});
if (goOut===1){
//////////////
var comentwindow = document.getElementById("StatusID"); //StatusID
var d1 = new Date();
var d2= d1.toDateString();
var d3= d1.toLocaleTimeString();
var dateTimeUser = document.createTextNode(d2+" "+d3+" username");
//dateTimeUser.style.fontSize = "8px";
dateTimeUser.className = 'dateTimeUserClasN';
dateTimeUser.id = arrlength+"dateTimeUserID";
comentwindow.appendChild(dateTimeUser); /////////////////////////////////////////1
var input = document.createElement('textarea');
input.maxLength = 5000;
input.cols = 28;
input.rows = 5;
input.style.borderColor = borderColor;
input.className = 'myCustomTextarea';
var arr = document.getElementsByClassName("myCustomTextarea");
input.id = arrlength+"textarea";
//var comentwindow = document.getElementById("StatusID"); //StatusID
comentwindow.appendChild(input);//////////////////////////////////////////////////2
var ele = document.getElementById(arrlength+"buttonSE");
if(ele === null){
var buttonSE = document.createElement('button');
buttonSE.className = 'enterCommentBut';
buttonSE.id=arrlength+"buttonSE";
buttonSE.onclick = function() {
if(document.getElementById(arrlength+"textarea").value != ''){
document.getElementById(arrlength+"textarea").style.backgroundColor= "lightblue";
var e1 = document.getElementById('StatusID');
var e2 =(e1.children.length);
e1.removeChild(e1.children[e2-1]);
e1.removeChild(e1.children[e2-2]);
}else{
alert("It is not posible to enter empty comment.");
}
}
var SE = document.createTextNode("Enter");
buttonSE.appendChild(SE);
comentwindow.appendChild(buttonSE);/////////////////////////////////////////////3
}
var ele2 = document.getElementById(arrlength+"buttonSC");
if(ele2 === null){
var buttonSC = document.createElement('button');
buttonSC.className = 'clearCommentBut';
buttonSC.id=arrlength+"buttonSC";
buttonSC.onclick = function() {
var e1 = document.getElementById('StatusID');
var e2 =(e1.children.length);
var myNode = document.getElementById("StatusID");
while (myNode.lastChild) {
myNode.removeChild(myNode.lastChild);
}
};
var SC = document.createTextNode("Clear");
buttonSC.appendChild(SC);
comentwindow.appendChild(buttonSC);//////////////////////////////////////4
}
}
}
function createObject2(){
var e3 = document.getElementById("StatusID");
var e4 = document.getElementById("Status0ID");
var e5 = document.getElementById("Status2ID");
e3.style.display = 'block';
e4.style.display = 'block';
e5.style.display = 'block';
}
document.getElementById("clickMe2").onclick = createObject2;
function updateScroll(){
var element = document.getElementById("StatusID");
element.scrollTop = element.scrollHeight;
}
function ObjectRed(){
var borderColor= "red";
opentextarea(borderColor);
updateScroll();
}
document.getElementById("ObjectRed").onclick = ObjectRed;
function ObjectGreen(){
var borderColor= "green";
opentextarea(borderColor);
updateScroll();
}
document.getElementById("ObjectGreen").onclick = ObjectGreen;
*,
*::before,
*::after {
box-sizing: border-box;
}
div.Status0 {
position: absolute;
top: 15px;
width: 250px;
height:40px;
margin: 0;
padding: 1em;
font-size: 12px;
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: white;
}
div.Status1 {
position: absolute;
top: 70px;
width: 250px;
height:700px;
margin: 0;
padding: 1em;
font-size: 12px;
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: white;
}
div.Coment1{
float: left;
width: 130px;
height:100px;
margin: 0;
padding: 1em;
font-size: 12px;
/* height: 100%;
overflow: auto;*/
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: yellow;
}
.content {
padding: 18px 0;
border-bottom: solid 2px #cfcfcf;
}
.myCustomTextarea {
border:0;
padding:1px;
font-size:1.0em;
font-family:"Times New Roman";
color:black;
border:solid 2px #ccc;
margin:0 0 4px;
width:215px;
height:50px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.myCustomTextarea:focus {
resize: none;
border-radius: 5px;
outline: none !important;
}
.dateTimeUserClasN{
}
.startbutton{
position: absolute;
left: 270px;
top:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom </title>
</head>
<body>
<div class="Status0" id="Status0ID" style="display: none">
<input type="button" id="ObjectRed" value="Problem" />
<input type="button" id="ObjectGreen" value="Okay" />
</div>
<div class="Status2" id="Status2ID" style="display: none">
<div class="Status1" id="StatusID" style="display: none"></div>
</div>
<input class =" startbutton" type="button" id="clickMe2" value="New object2" />
<script src="js/createObject.js"></script>
<link rel="stylesheet" href="css/styleIvan.css">
</body>
</html>
I have a "div" inside main "div". Status1 inside Status2. Status1 has a time date text, textarea and two buttons (enter and cancel).
When I call opentextarea function I get this 4 elements.
Below is this code for comments managing. The problem is that when i press on "cancel" button. It deletes all. But i would like to delete only last packet of
4 elements (last Status1 div). I need Status1 to be child of Status2. So when i press on cancel to delete only last child.
I can not make this work for me, so I am asking here for help.
How to do it?

Mapbox + jsFiddle + Wordpress

I apologize in advance for my very limited knowledge of coding. I've been trying to add a custom search bar linked to Mapbox on my Wordpress site without any luck. I created, or actually I edited a jsFiddle that I found. Where I'm having trouble is adding the Javascript from jsFiddle to Wordpress...
Here's the working jsFiddle: https://jsfiddle.net/erinlink/4q9brvkt/16/
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpbmxpbmsiLCJhIjoiWnpiWXQ5RSJ9.hy5rpmPf-gpFRaNG7GHfAA';
var geocoder = L.mapbox.geocoder('mapbox.places'),
map = null;
var map = L.mapbox.map('mapbox', 'erinlink.bee96628').setView([30.267153, -97.74306079999997], 12);
var featureLayer = L.mapbox.featureLayer('erinlink.bee96628')
.addTo(map);
/*
var featureLayer = L.mapbox.featureLayer()
.addTo(map);
featureLayer.loadID('your_id');
*/
// both versions to add the featurelayer work
function showMap(err, data) {
// The geocoder can return an area, like a city, or a
// point, like an address. Here we handle both cases,
// by fitting the map bounds to an area or zooming to a point.
if (!map) {
map = L.mapbox.map('mapbox', 'erinlink.bee96628');
}
if (data.lbounds) {
map.fitBounds(data.lbounds);
} else if (data.latlng) {
map.setView([data.latlng[0], data.latlng[1]], 12);
}
}
function geocodeThis() {
var text = document.getElementById('searchMap').value;
if (text.length >= 5) {
geocoder.query(text, showMap);
}
}
body {
margin: 0;
padding: 0;
}
#mapbox {
width: 100%;
height: 100%;
border: 0px solid transparent;
}
#searchMap {
z-index: 10000 !important;
position: relative;
float: right;
text-overflow: ellipsis;
padding: 2px 0px 2px 6px;
background-color: #fff;
color: gray;
font-size: 12pt;
font-family: Trebuchet MS;
height: 24px;
width: 200px;
border: 0px solid transparent;
border-radius: 4px 4px 4px 4px;
margin: 0px 120px 10px 10px;
}
.mapbox_header {
color: white;
text-align: right;
font-size: 10pt;
font-family: Trebuchet MS;
font-style: italic;
font-weight: 100;
margin: 10px 120px 10px 0;
}
<link href="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<div style="margin-top:1px; padding: 4px 40px 0px 0px; background: #77bc1f; width:100%; height:10%;">
<div>
<ul>
<input type='text' oninput='geocodeThis()' id='searchMap' placeholder='Enter address or zip'>
<br>
<br>
<p class="mapbox_header">Looking for a particular flavor or bottle size in your area? Contact us for more info.</p>
</ul>
</div>
</div>
<div>
<div id='mapbox' style="height:400px; width:100%;"></div>
</div>
Here's the page I've been trying to get it working on (the current
map on this page is not linked to the search bar):
http://yellowbirdsauce.com/locations/
Thanks in advance for any help!!

CartoDB: Buttons switching between layers

sorry, I am very new to this. I want something similar to this here CartoDB multiple layer toggle,
only that I am not adding a SQL queried layer, but one from an URL. Each button should make one layer active, one layer at a time and always only one layer visible.
Thanks for any hint!
Best, Wolfram
<html>
<head>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#cartodb-map { width: 100%; height:100%; background: black;}
#menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 100px;
padding: 10px;
text-align: center;
font: bold 11px "Helvetica",Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
</style>
<script>
var map;
function init(){
// initiate leaflet map
map = new L.Map('cartodb-map', {
center: [-22.8,-43.15],
zoom: 10
})
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
attribution: ' '
}).addTo(map);
}
var layerUrl1 = 'https://riomapia.cartodb.com/api/v2/viz/d79239a6-51af-11e5-ba37-0e853d047bba/viz.json';
var layerUrl2 = 'https://riomapia.cartodb.com/api/v2/viz/633f93e0-51b0-11e5-b512-0e4fddd5de28/viz.json';
var layerUrl3 = 'https://riomapia.cartodb.com/api/v2/viz/4fa846f0-51b1-11e5-bd3c-0e853d047bba/viz.json';
function showLayer(layerToShow) {
//turn off all layers
layer.forEach(function(i) {
i.hide()
});
switch (layerToShow.id) {
case "Renda1":
layer.show(layerUrl1);
break;
case "Renda2":
layer.show(layerUrl2);
break;
case "Renda3":
layer.show(layerUrl3);
break;
}
return true;
}
</script>
</head>
<body onload="init()">
<div id='cartodb-map'></div>
<div id='menu'>
Renda domiciliar por pessoa
Pessoas < R$ 140
Pessoas < R$ 70
</div>
</body>
</html>

I'm not sure that you can do this (but I'm not certain) - however, I looked at the json files that you are linking to, and I see that the data is from Open Street Map. Have you tried looking at this tutorial?
http://docs.cartodb.com/tutorials/osm.html
Maybe that will help?

MapBox API exclusive layer switcher

I have thoroughly searched MapBox support and Stack Overflow for an answer on how to create an exclusive layer switcher using the latest MapBox API (1.6.1 as of now). Exclusive in this case means that only 1 layer can be visible/active at a time. I do not want to use the Leaflet Layers Control for design reasons.
With a little help, I have come up with this example, which almost works:
http://bl.ocks.org/sarahkhank/0e5d81998d2d0876856c
For some reason, adding and removing the gridControl breaks the loop. If you use this structure to just add/remove the tileLayer with no gridLayer or gridControl, it works fine. But when you add the grid elements, the last element in the array doesn't show up and messes up the rest of the loop. (In this case 'far'.)
Does anyone have any idea why this is happening? This type of layer switcher is often asked about on MapBox support, so I'm sure many people would be happy to see this come to life. Thanks for your help!!
Posting full code here at the bottom in case my bl.ocks link ever breaks.
<html>
<head>
<title>DC Zoning Map</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
</head>
<body>
<style>
#zoning-map-container {
position:relative;
float: right;
display: inline;
}
#map_zoning {
position: relative;
float: left;
clear: both;
width:45%;
min-width: 500px;
height: 500px;
right:20px;
margin-top: 10px;
margin-right: 10px;
border: 1px solid #bbb;
}
#map-ui-zoning {
position:relative;
float: left;
list-style:none;
margin:0;padding:0;
left: -20px;
}
#map-ui-zoning a {
font-family: 'Carrois Gothic', sans-serif;
font-size: 12px;
font-weight: 400;
background:#FFF;
color:#5698D0;
float: left;
margin:0;
border:1px solid #BBB;
border-width: 1px 1px 1px 0;
max-width:100px;
padding:8px;
text-decoration:none;
}
#map-ui-zoning li {
display: inline;
}
#map-ui-zoning a:hover { background:#ECF5FA; }
#map-ui-zoning li:last-child a {
border-bottom-width:1px;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
}
#map-ui-zoning li:first-child a {
border-left-width: 1px;
-webkit-border-radius:3px 0 0 3px;
border-radius:3px 0 0 3px;
}
#map-ui-zoning a.active {
background:#5698D0;
border-color:#5698D0;
border-top-color:#BBB;
color:#FFF;
}
.map-tooltip .zone {
font-size: 10px;
line-height: 13px;
font-weight: bold;
}
.map-tooltip .desc {
font-size: 10px;
line-height: 13px;
padding-bottom: 3px;
}
.map-tooltip .focus {
font-size: 13px;
line-height: 16px;
font-weight: bold;
}
.map-tooltip .info {
font-size: 11px;
line-height: 16px;
}
</style>
<div id='zoning-map-container'>
<ul id='map-ui-zoning'>
<li>Maximum Stories</li>
<li>Maximum Height</li>
<li>Maximum FAR</li>
</ul>
<div id='map_zoning'></div>
</div>
<script type='text/javascript'>
var map = L.mapbox.map('map_zoning');
var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
}).addTo(map);
map.setView([38.908, -77.029], 11);
var ui = document.getElementById('map-ui-zoning');
var stories = L.mapbox.tileLayer('sarah.28n6ogvi');
var storiesGrid = L.mapbox.gridLayer('sarah.28n6ogvi');
var storiesGridControl = L.mapbox.gridControl(storiesGrid, {follow: false});
var height = L.mapbox.tileLayer('sarah.ofjsv2t9');
var heightGrid = L.mapbox.gridLayer('sarah.ofjsv2t9');
var heightGridControl = L.mapbox.gridControl(heightGrid, {follow: false});
var far = L.mapbox.tileLayer('sarah.2w9x80k9');
var farGrid = L.mapbox.gridLayer('sarah.2w9x80k9');
var farGridControl = L.mapbox.gridControl(farGrid, {follow: false});
var layers = [{
'name': 'stories',
'layer': stories,
'gridLayer': storiesGrid,
'gridControl': storiesGridControl
},
{
'name': 'height',
'layer': height,
'gridLayer': heightGrid,
'gridControl': heightGridControl
},
{
'name': 'far',
'layer': far,
'gridLayer': farGrid,
'gridControl': farGridControl
}
];
$(document).ready(function(layer){
map.addLayer(stories);
map.addLayer(storiesGrid);
map.addControl(storiesGridControl);
});
$('#map-ui-zoning li a').on('click', function() {
$('#map-ui-zoning li a').removeClass('active');
var $el = $(this);
layers.forEach(function(layer) {
if ($el.data('name') !== layer['name']){
map.removeLayer(layer['layer']);
map.removeLayer(layer['gridLayer']);
map.removeControl(layer['gridControl']);
}
else {
map.addLayer(layer['layer']);
map.addLayer(layer['gridLayer']);
map.addControl(layer['gridControl']);
$el.addClass('active');
}
});
});
</script>

I think that when you call map.removeControl(layer['gridControl']) or more generally map.removeLayer you dont test if the layer is already added to the map because otherwise it mapboxjs will try to delete an element that does not exist and this is where your code gets broken .
if ($el.data('name') !== layer['name'])
needs to become
if ($el.data('name') !== layer['name'] && map.hasLayer(layer))
of course you need to change your else statement accordingly .
here is your example running
http://bl.ocks.org/radproject/31c48b1a7610e353d495