Develop Reference

How can I toggle between json files in javascript without page reload

I am playing around a hangman game (found on the web) using json file as a quizbank processed by js controller. There is only one file with quiz-words (quizbank.json) connected to the controller. I want to add some options like level, topic etc. by putting each option into separate json file and connecting them to the controller. Suppose, I have some files (quizbank1.json, quizbank2.json etc.) What is the best way to switch between them, preferably on the same page i.e. without reloading html. Below is the entire code. The JS:
$(document).ready(function () {
var questionBank=new Array;
var wordArray=new Array;
var previousGuesses=new Array;
var currentWord;
var currentClue;
var wrongAnswerCount;
$.getJSON('quizbank.json', function(data) {
for(i=0;i<data.wordlist.length;i++){
questionBank[i]=new Array;
questionBank[i][0]=data.wordlist[i].word;
questionBank[i][1]=data.wordlist[i].clue;
}
titleScreen();
})//gtjson
function titleScreen(){
$('#gameContent').append('<div id="gameTitle">HANGMAN</div><div id="startButton" class="button">BEGIN</div>');
$('#startButton').on("click",function (){gameScreen()});
}//display game
function titleScreen(){
$('#gameContent').append('<div id="gameTitle">HANGMAN1</div><div id="startButton" class="button">BEGIN1</div>');
$('#startButton').on("click",function (){gameScreen()});
}//display game
function titleScreen(){
$('#gameContent').append('<div id="gameTitle">HANGMAN2</div><div id="startButton" class="button">BEGIN2</div>');
$('#startButton').on("click",function (){gameScreen()});
}//display game
function gameScreen(){
$('#gameContent').empty();
$('#gameContent').append('<div id="pixHolder"><img id="hangman" src="man.png"></div>');
$('#gameContent').append('<div id="wordHolder"></div>');
$('#gameContent').append('<div id="clueHolder"></div>');
$('#gameContent').append('<div id="guesses">Previous guesses:</div>');
$('#gameContent').append('<div id="feedback"></div>');
$('#gameContent').append('<form><input type="text" id="dummy" ></form>');
getWord();
var numberOfTiles=currentWord.length;
wrongAnswerCount=0;
previousGuesses=[];
for(i=0;i<numberOfTiles;i++){
$('#wordHolder').append('<div class="tile" id=t'+i+'></div>');
}
$('#clueHolder').append("HINT: "+currentClue);
$(document).on("keyup",handleKeyUp);
$(document).on("click",function(){$('#dummy').focus();});
$('#dummy').focus();
}//gamescreen
function getWord(){
var rnd=Math.floor(Math.random()*questionBank.length);
currentWord=questionBank[rnd][0];
currentClue=questionBank[rnd][1];
questionBank.splice(rnd,1);
wordArray=currentWord.split("");
}//getword
function handleKeyUp(event) {
//this line deals with glitch in recent versions of android
if(event.keyCode==229){event.keyCode=$('#dummy').val().slice($('#dummy').val().length-1,$('#dummy').val().length).toUpperCase().charCodeAt(0);}
if(event.keyCode>64 && event.keyCode<91){
var found=false;
var previouslyEntered=false;
var input=String.fromCharCode(event.keyCode).toLowerCase();
for(i=0;i<previousGuesses.length;i++){if(input==previousGuesses[i]){previouslyEntered=true;}}
if(!previouslyEntered){
previousGuesses.push(input);
for(i=0;i<wordArray.length;i++){
if(input==wordArray[i]){found=true;$('#t'+i).append(input);}
}//for
if(found){checkAnswer();}
else{wrongAnswer(input);}
}//if
}//if
}//handlekeyup
function checkAnswer(){
var currentAnswer="";
for(i=0;i<currentWord.length;i++){
currentAnswer+=($('#t'+i).text());
}
if(currentAnswer==currentWord){
victoryMessage();
};
}//checkanswer
function wrongAnswer(a){
wrongAnswerCount++;
var pos=(wrongAnswerCount*-75) +"px"
$('#guesses').append(" "+a);
$('#hangman').css("left",pos);
if(wrongAnswerCount==6){
defeatMessage();}
}//wronganswer
function victoryMessage(){
document.activeElement.blur();
$(document).off("keyup", handleKeyUp);
$('#feedback').append("CORRECT!<br><br><div id='replay' class='button'>CONTINUE</div>");
$('#replay').on("click",function (){
if(questionBank.length>0){
gameScreen()}
else{finalPage()}
});
}//victory
function defeatMessage(){
document.activeElement.blur();
$(document).off("keyup", handleKeyUp);
$('#feedback').append("You've Lost!<br>(answer= "+ currentWord +")<div id='replay' class='button'>CONTINUE</div>");
$('#replay').on("click",function (){
if(questionBank.length>0){
gameScreen()}
else{finalPage()}
});
}//defeat
function finalPage(){
$('#gameContent').empty();
$('#gameContent').append('<div id="finalMessage">You have finished all the words in the game!</div>');
}//finalpage
});//doc ready
The json:
{"wordlist":[
{
"word":"kangaroo",
"clue":"an animal"
},
{
"word":"starbucks",
"clue":"a company"
},
{
"word":"macaroni",
"clue":"a kind of food"
}
]
}
The html:
<!DOCTYPE html>
<head>
<title>Hangman Game</title>
<link href="main.css"rel="stylesheet"type="text/css"/>
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="jquery.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div id="topbar">Hangman Game</div>
<div class="spacer"></div>
<div id="gameContent">
</div>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
background-color:#ECD69D;
font-family: Arial, Helvetica, sans-serif;
}
#topbar{
height:50px;
margin:auto;
margin-top:50px;
color:#FFF;
font-size:36px;
width:800px;
border-bottom:solid white 1px;
}
#gameContent{
margin:auto;
width:800px;
height:600px;
position:relative;
overflow:hidden;
background-color:#A98F4C;
border-radius:15px;
}
.spacer{
height:30px;
}
#gameTitle{
margin-top:100px;
text-align:center;
font-size:40px;
color:#fff;
}
.button{font-size:17px;
width:100px;
margin:auto;
margin-top:20px;
cursor:pointer;
border:solid 1px white;
border-radius:4px;
text-align:center;
color:#fff;
}
.button:hover{
background-color:#6AB0FD;
}
#replay{
margin-left:0px;}
#wordHolder{
margin-top:50px;
margin-left:150px;
}
#clueHolder{
margin-top:130px;
margin-left:150px;
}
#guesses{
margin-top:20px;
margin-left:150px;
}
#pixHolder{
margin-left:30px;
width:75px;
float:left;
overflow:hidden;
}
#pixHolder img{
position:relative
}
#feedback{
margin-top:20px;
margin-left:150px;
font-size:34px;
color:#fff;
}
.tile{
height:40px;
width:40px;
float:left;
margin-right:10px;
background-color:white;
text-align:center;
font-size:24px;
color:#333;
padding-top:5px;
}
#finalMessage{
text-align:center;
font-size:40px;
color:#fff;
width:90%;
margin:auto;
margin-top:100px;
}
#dummy{
position:absolute;
left:-200px;
top:0px;
}
Any help deeply appreciated.

Tumblr theme posts - hidden date and tags not working

EDITED MAY, 26TH:
I'm using the coding you'll see below as an answer from #AchrafJEDAY (I'll also include it here as well). The coding as broke somehow, and when I click on the date or tag buttons to show the date or tag for ANY post, it freaks out; you see it for just a moment before the whole page refreshes with "/?" at the end of the URL and the date and tags are both hidden again. I'm not sure why this is, but I'd SUPER appreciate ANY help anyone has! Thank you!!
CODING:
CSS
.postdatebutton{
float:left;
position:relative;
top:0px;
left:0px;
width:50px;
height:15px;
border:1px #83174C solid;
background-color:rgba(255, 230, 240, 0.8);
font-family: 'Indie Flower', cursive;
letter-spacing:2px;
text-align:center;
padding-top:5px;
color:black;
font-size:14px;
text-decoration:underline;
}
.postdatebutton button{
font-family: 'Indie Flower', cursive;
text-decoration:underline;
}
.postdate{
width: 100%;
text-align: center;
display:none;
}
/*TAGS*/
.tags {
width:415px;
text-transform:uppercase;
line-height:120%;
font-size:15px;
text-align:center;
padding:2px;
text-decoration:underline;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
.tags a {
color:#BB0B20;
letter-spacing:1px;
padding:1px;
}
.posttagbutton{
float:left;
position:relative;
top:0px;
left:0px;
width:50px;
height:15px;
border:1px #83174C solid;
background-color:rgba(255, 230, 240, 0.8);
font-family: 'Indie Flower', cursive;
letter-spacing:2px;
text-align:center;
padding-top:5px;
color:black;
font-size:14px;
text-decoration:underline;
}
.posttagbutton button{
font-family: 'Indie Flower', cursive;
text-decoration:underline;
}
.posttag {
width: 100%;
text-align: center;
display:none;
}
#stuff table{
position:relative;
width:100%;
text-align:center;
}
HTML
<table>
<tbody>
<tr>
<!---LIKE---->
<td><div class="postlike">{LikeButton}</div> </td>
<!---REBLOG---->
<td><div id="postreblog">Reblog</div> </td>
<!---NOTES---->
<td><div class="postnote">{block:NoteCount} Notes{/block:NoteCount}</div> </td>
<!---VIA---->
<td><div class="postfrom">{block:RebloggedFrom}From{/block:RebloggedFrom}</div> </td>
<!---SOURCE---->
<td><div class="postsource"> {block:ContentSource}Orig-Poster{/block:ContentSource}</div> </td>
<!---DATE BUTTON---->
<td><div class="postdatebutton"><button onclick="myFunction6(this)">Date</button></div></td>
<!---TAGS BUTTON---->
<td><div class="posttagbutton"><button onclick="myFunction7(this)">Tags</button></div></td></tr></tbody></table>
<!---HIDDEN DATE---->
<div class="postdate" style="display:none;"><p>{block:Date} {MonthNumberWithZero}-{DayOfMonthWithZero} {24Hour}:{Minutes}{/block:Date}</p></div>
<!---HIDDEN TAGS---->
<div class="posttag" style="display:none;"><div class="tags"><p>{block:Tags}# {Tag}{/block:Tags}</p></div></div>
JS
<!---SCRIPT FOR DATE AND TAGS---->
<script>
function myFunction6 ( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("postdate");
if (x[0].style.display === 'block') {
x[0].style["display"] = "none";
}
else {
x[0].style["display"] = "block";
}
}
</script>
<script>
function myFunction7( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("posttag");
if (x[0].style.display === 'block') {
x[0].style.display = 'none';
}
else {
x[0].style.display = 'block';
}
}
</script>

function myFunction1 ( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("postdate");
if (x[0].style.display === 'block') {
x[0].style["display"] = "none";
}
else {
x[0].style["display"] = "block";
}
}
function myFunction2( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("posttag");
if (x[0].style.display === 'block') {
x[0].style.display = 'none';
}
else {
x[0].style.display = 'block';
}
}
<div id="stuff"><div class="picsize"><div class="textpost"><h3> Testing Text Post - Title </h3><p><span>allystestblog1818</span>:</p><blockquote><h2>Headline</h2><h2><b>Headline Bold</b></h2><h2><i>Headline Italic</i></h2><p><b>Bold text,</b> <i>Italic text,</i> <span>Link text</span></p><ol><li>Numbered <br></li><li>List<br></li></ol><ul><li>Bullet<br></li><li>List<br></li></ul><blockquote><p>Indented text</p></blockquote><p>Regular text</p><p>Line break<br></p><hr><p>Picture</p><figure class="tmblr-full"><img src="https://68.media.tumblr.com/1250d273b9e9b4860d73aa893361ec20/tumblr_inline_oogr5xEk1J1txz9li_540.jpg" class=""></figure><p class=""><span>Keep reading</span></p></blockquote></div></div><div class="picsize"></div><p></p><table><tbody><tr><td><div class="postlike"><div class="like_button" data-post-id="160506016653" data-blog-name="wisdomsprydethemetestblog" id="like_button_160506016653"><iframe id="like_iframe_160506016653" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=wisdomsprydethemetestblog&post_id=160506016653&color=black&rk=4ktb4Bma&root_id=159609010143" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_160506016653"></iframe></div></div> </td><td><div id="postreblog">Reblog</div> </td><td><div class="postnote"> Notes</div> </td><td><div class="postfrom">From</div> </td><td><div class="postsource"> Orig-Poster</div> </td><td><div class="postdatebutton"><button onclick="myFunction1(this)">Date</button></div></td><td><div class="posttagbutton"><button onclick="myFunction2(this)">Tags</button></div></td></tr></tbody></table><div class="postdate" style="display:none;"><p>05-10 1:52</p></div><div class="posttag" style="display:none;"><div class="tags"><p># Test text post# tags tags tags</p></div></div>
</div>

Overriding element.style

I am trying to make a responsive web page eg where the display changes with the screen size.
I have the following HTML:
<div class="responsive_menu" id="resp_Menu" onClick="fnResponsiveMenu()">
</div>
<div class="nav_wrapper">
<div class="navigation" id="navMenu1">
Contact Us
</div>
<div class="navigation" id="navMenu2">
Information
</div>
<div class="navigation" id="navMenu3">
Venue Details
</div>
<div class="navigation" id="navMenu4">
Registration & Payment
</div>
<div class="navigation" id="navMenu5">
Agenda
</div>
<div class="navigation" id="navMenu6">
Home
</div>
</div>
and the following in responsive.css:
.navigation {
width:100%;
background-color:#3171B7;
border-bottom:1px solid #ffffff;
margin:0;
text-transform:uppercase;
font-size:16px;
height:40%;
padding-top:10px;
display:none;
}
and the following in style.css:
.navigation {
float:right;
margin:30px 0px 1px 0px;
height:25px;
width:100px;
display:block;
}
.navigation a
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
display:block;
padding:0 5px;
height:30px;
}
and the following JavaScript:
var oNavChecker = 0;
function fnResponsiveMenu()
{
if(oNavChecker == 0 )
{
var oNav1 = document.getElementById("navMenu1");
oNav1.setAttribute('style', 'display:inline');
var oNav2 = document.getElementById("navMenu2");
oNav2.setAttribute('style', 'display:inline');
var oNav3 = document.getElementById("navMenu3");
oNav3.setAttribute('style', 'display:inline');
var oNav4 = document.getElementById("navMenu4");
oNav4.setAttribute('style', 'display:inline');
var oNav5 = document.getElementById("navMenu5");
oNav5.setAttribute('style', 'display:inline');
var oNav6 = document.getElementById("navMenu6");
oNav6.setAttribute('style', 'display:inline');
oNavChecker = 1;
return;
}
if(oNavChecker == 1 )
{
var oNav1 = document.getElementById("navMenu1");
oNav1.setAttribute('style', 'display:none');
var oNav2 = document.getElementById("navMenu2");
oNav2.setAttribute('style', 'display:none');
var oNav3 = document.getElementById("navMenu3");
oNav3.setAttribute('style', 'display:none');
var oNav4 = document.getElementById("navMenu4");
oNav4.setAttribute('style', 'display:none');
var oNav5 = document.getElementById("navMenu5");
oNav5.setAttribute('style', 'display:none');
var oNav6 = document.getElementById("navMenu6");
oNav6.setAttribute('style', 'display:none');
oNavChecker = 0;
return;
}
}
That all works fine and behaves as I want.
My problem is, once the screen has been reduced, and then the menu button pressed eg when fnResponsiveMenu() has been:
pressed to first show the menu
then pressed again to remove it
then the screen return to wide resolution,
The navMenus do not show anymore.
I am sure it is because the CSS is being over riden by the javascript eg:
oNav1.setAttribute('style', 'display:none');
So how can I resolve this and get the style.CSS to override the changes applied by the JavaScript?
If this is not possible, can anyone suggest an alternative to achieveing my aim of making a responsive menu?

I can't comment, not enought rep, so I'll ask it in the answer...
Have you read this? Remove inline css of an HTML elements
Once you remove inline styling, default from your css file will be applied again.

Mapbox tooltips being disabled by code

Can anyone see what in this code is preventing the tooltips in my map from functioning? Ie they function in normal map but not when I add the layers to this map with a toggle button. I assume it's something with the onclick function, but can't figure it out specifically, and what a workaround might be.
Thank you
<style>
.menu-ui {
background:#fff;
position:absolute;
bottom:10px;left:10px;
z-index:1;
border-radius:3px;
width:120px;
border:1px solid rgba(0,0,0,0.4);
}
.menu-ui a {
font-size:13px;
color:#404040;
display:block;
margin:0;padding:0;
padding:10px;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,0.25);
text-align:center;
}
.menu-ui a:first-child {
border-radius:3px 3px 0 0;
}
.menu-ui a:last-child {
border:none;
border-radius:0 0 3px 3px;
}
.menu-ui a:hover {
background:#f8f8f8;
color:#404040;
}
.menu-ui a.active {
background:#3887BE;
color:#FFF;
}
.menu-ui a.active:hover {
background:#3074a4;
}
</style>
<nav id='menu-ui' class='menu-ui'></nav>
<div id='map'></div>
<script>
var map = L.map('map').setView([10.8229,-84.2116], 12);
var layers = document.getElementById('menu-ui');
addLayer(L.mapbox.tileLayer('XXXX.XXXX'), 'Photo Points', 4);
addLayer(L.mapbox.tileLayer('XXXX.XXXX'), 'River KMs', 3);
addLayer(L.mapbox.tileLayer('XXXX.XXXXX'), 'December 2013 (0.5m)', 2);
addLayer(L.mapbox.tileLayer('XXXXXX.XXXXXX'), 'February 2014 (1.5m)', 1);
function addLayer(layer, name, zIndex) {
layer
.setZIndex(zIndex)
.addTo(map);
// Create a simple layer switcher that
// toggles layers on and off.
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.innerHTML = name;
link.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
if (map.hasLayer(layer)) {
map.removeLayer(layer);
this.className = '';
} else {
map.addLayer(layer);
this.className = 'active';
}
};
layers.appendChild(link);
}
</script>

Did you add interactivity via TileMill? If so, you'll need to add the gridLayer and gridControl to the map, not just a tileLayer.

Accessible jQuery toggles odd behaviour

I'm setting up a reusable jQuery toggle function (for my employer) to enable show/hide of content (eg FAQs), to improve accessibility over existing inline onClick bindings.
In JSFiddle everything is fast and fluid, but when I transfer to the preview server an odd behaviour becomes apparent. Clicking the button works as normal, but on clicking the button's link text there's a noticeable delay before anything happens.
Is there anything within the script that might be causing the delay? Or anything which is an obvious candidate for conflicts of some kind?
Anyway, here's the code (based on Mike Raynham's accessible toggles):
http://jsfiddle.net/internet_man/9yKKM/2/
html:
<div class="buttons">
<ul>
<li><strong class="_toggle type noscript">This is the first toggle</strong>
<ul class="_toggle-this show-hide">
<li><strong>Option One</strong></li>
<li><strong>Option Two</strong></li>
<li><strong>Option Three</strong></li>
</ul>
</li>
<li class="bad-break"><strong class="_toggle type noscript">This is the second toggle (a bit longer than the first)</strong>
<ul class="_toggle-this show-hide">
<li><strong>Option One</strong></li>
<li><strong>Option Two</strong></li>
</ul>
</li>
<li class="bad-break"><strong class="_toggle type noscript">This is the third toggle (also somewhat longer)</strong>
<ul class="_toggle-this show-hide">
<li><strong>Option One</strong></li>
<li><strong>Option Two</strong></li>
</ul>
</li>
</ul>
</div>
Script:
var create_name = function(text) {
var name = text.toLowerCase();
name = name.replace(/^\s+|\s+jQuery|[^a-z0-9&\s-]/g, '');
name = name.replace(/&/g, 'and');
name = name.replace(/\s/g, '-');
name = name.replace(/(-)+\1/g, "jQuery1");
return name;
};
var add_link = function() {
var name = create_name(jQuery(this).text());
jQuery(this).next('.toggle-this').attr('name', name);
jQuery(this).html('' + jQuery(this).html() + '');
};
var toggle = function(event) {
event.preventDefault();
jQuery(this).toggleClass('expanded').nextAll('.toggle-this').slideToggle(100);
jQuery('.toggle-this').not(jQuery(this).siblings()).slideUp(100);
jQuery('.toggle').not(jQuery(this)).removeClass('expanded');
};
var remove_focus = function() {
jQuery(this).blur();
};
jQuery(function (){
jQuery('._toggle').removeClass('_toggle, noscript').addClass('toggle');
jQuery('._toggle-this').removeClass('_toggle-this').addClass('toggle-this');
jQuery('._expanded').removeClass('_expanded').addClass('expanded');
jQuery('.toggle:not(.expanded)').nextAll('.toggle-this').hide();
jQuery('.toggle').each(add_link);
jQuery('.toggle').click(toggle);
jQuery('.toggle a').mouseup(remove_focus);
});
CSS:
body
{
font-size:62.5%;
color:#666;
font-family:arial,Helvetica,sans-serif;
}
a
{
color:#462170;
}
ul
{
list-style-type:none;
margin-left:0;
padding-left:0;
}
strong
{
font-weight:normal;
}
div.buttons
{
width:462px;
line-height:2.2em;
margin:1.5em 0;
}
.buttons li > strong
{
font-size:1.9em;
}
.toggle, .buttons .type.noscript
{
display:block;
font-size:1.9em;
height:65px;
background:url(http://oi48.tinypic.com/dy6xf.jpg) 0 -85px no-repeat;
padding:20px 0 0 90px;
text-decoration:none;
color:#462170;
cursor:pointer;
cursor:hand;
}
.toggle a
{
text-decoration:none;
}
.toggle strong
{
display:block;
height:65px;
border:1px dotted red;
}
.toggle:hover, .toggle:focus
{
background-position:0 0;
}
.buttons .show-hide
{
border-bottom:6px solid white;
}
.buttons .show-hide li
{
margin-left:12px;
border-bottom: 2px solid white;
border-top:2px solid white;
font-size:1em;
}
.buttons .show-hide a
{
display:block;
height:15px;
text-decoration:none;
color:#462170;
background:#f1f1f1 url(http://oi46.tinypic.com/6iedtw.jpg) 5px 14px no-repeat;
padding:12px 0 15px 58px;
}
.buttons .show-hide a:hover, .connection-buttons .show-hide a:focus
{
text-decoration:underline;
color:black;
background-color:#ece8f0;
background-position:5px -41px;
}
li.bad-break a
{
padding-right:30%;
}
Notes:
Scripts on -- ._toggle becomes .toggle, ._toggle-this becomes .toggle-this, .noscript is removed and a link is inserted around (in this case) the strong element of class toggle, pointing to the next '.toggle-this' element.
Scripts off -- No toggle created but it's styled as though the accordions are expanded.