My goal is to toggle the "prev" and "ext" elements i got from the JSON File in this way:
Here's JS Fiddle
The menu bar looks like:
[ "prev_Person1" "Person1" "ext_Person1" ... "Person2" ... "Person3" ... ]
I set prev_Person1 and ext_Person1 to be not visible at first. I am trying it with the jquery function at the end of the javascript code.
When i click on the "Go Back"-Button the object "prev_Person1" should be shown, in this case it is the name Jeanette.
When i click on the "Go Forward"-Button the object "ext_Person1" should be shown, in this case it is the name Angela.
The bar should now look like
[Jeanette Angie Angela ... ]
And i wanted to save the changes to the local storage, so that when i navigate to other pages it doesn't go back to its first state.
<div class="scrollmenu" id="myHeader">
<a style="float:left" href="index.html">Menu</a>
</div>
<button id="prev"> Go Back </button>
<button id="ext"> Go Forward </button>
CSS:
body
{
margin: 0;
font-family: Arial;
}
.top-container
{
background-color: #f1f1f1;
padding: 2px;
text-align: center;
}
div.scrollmenu {
background-color: #0000A0;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
Javascript
data =
{
"persons": [{
"id": "1",
"name": "Angie",
"link": "*",
"prev": [ { "id" : "6",
"name" : "Jeanette"}],
"ext": [ { "id" : "4",
"name" : "Angela"}]
},
{
"id": "2",
"name": "Rana",
"link": "Rana.html",
"prev": [ { "id" : "7",
"name" :"Angelika"}],
"ext": [ { "id" : "5",
"name" :"Mona"}]
},
{
"id": "3",
"name": "Tamara",
"link": "Tamara.html",
"prev": [ { "id" : "4",
"name" : "Angela"}],
"ext": [ { "id" : "8",
"name" :"Tala"}]
}
]}
var id;
var name;
var link;
var prev;
var ext;
for (var key in data) {
for (var i = 0; i < data[key].length; i++) {
id_persons = data[key][i].id;
name = data[key][i].name;
ext = data[key][i].ext;
prev = data[key][i].prev;
link = data[key][i].link;
// just like add the add all the actors
for (var j = 0; j < ext.length; j++) {
var ext_person = ext[j].name;
var id_ext = ext[j].id;
}
for (var p = 0; p < prev.length; p++) {
var prev_person = prev[p].name;
var id_prev = prev[p].id;
}
// ---------------------------------------------------------------------
// menu_bar_knows is for the prev elements //
var menu_bar_prev = document.createElement('a');
menu_bar_prev.id = id_prev;
menu_bar_prev.innerHTML =
prev_person + '</a>';
// End of menu_bar_knows elements //
// ---------------------------------------------------------------------
// ---------------------------------------------------------------------
// menu_bar is for the main path elements //
var menu_bar = document.createElement('a');
menu_bar.className = 'menu_bar';
menu_bar.id = id_persons;
menu_bar.href = link;
menu_bar.innerHTML =
name + '</a>';
// End of menu_bar elements //
// ---------------------------------------------------------------------
// ---------------------------------------------------------------------
// menu_bar_knows is for the ext elements //
var menu_bar_ext = document.createElement('a');
menu_bar_ext.id = id_ext;
menu_bar_ext.innerHTML =
ext_person + '</a>';
// End of menu_bar_knows elements //
// ---------------------------------------------------------------------
// ---------------------------------------------------------------------
// Calling the elements in the header
document.getElementById('myHeader').appendChild(menu_bar_prev);
document.getElementById('myHeader').appendChild(menu_bar);
document.getElementById('myHeader').appendChild(menu_bar_ext);
// End
// ---------------------------------------------------------------------
}
}
//-------------------------------------------//
$(document).ready(function(){
$(function(angie) {
var isVisible;
$("#4, #6").toggle(false);
if (localStorage.getItem('prev_angie_visible') != null) {
isVisible = localStorage.getItem('prev_angie_visible') ===
'false' ? false : true;
$("#6").toggle(isVisible);
}
if (localStorage.getItem('ext_angie_visible') != null) {
isVisible = localStorage.getItem('ext_angie_visible') ===
'false' ? false : true;
$("#4").toggle(isVisible);
}
$("#prev_angie").click(function(){
$("#6").toggle();
localStorage.setItem('prev_angie_visible', $("#6").is(":visible"));
});
$("#ext_angie").click(function(){
$("#4").toggle();
localStorage.setItem('ext_angie_visible', $("#4").is(":visible"));
});
});
})
I would be very thankful for every tip or solution!!
