title: Using variable in multiple frames
body: <p>Currently trying to create a website on a static server. Out of JSON-code it should create the navigation in one frame and in a right sideframe a "previous" and "next" button according to the current position in the hierarchy. </p>
  
  <p>I think the problem is that my "global variables" chap and subchap (which you are gonna find in the code below) cannot be accessed over all the 3 frames. I didn't know a way to simplify the problem, I'm sorry for the large post.</p>
  
  <p>I got all the files on my server if you want to see it live: <a href="http://fabitosh.bplaced.net/SkriptET/start.html" rel="nofollow">http://fabitosh.bplaced.net/SkriptET/start.html</a><br>
  Files: <a href="http://fabitosh.bplaced.net/SkriptET/" rel="nofollow">http://fabitosh.bplaced.net/SkriptET/</a><br>
  files.json isn't used in the code but clearer to look at than the implementation in json.js</p>
  
  <p>At first the basic structure:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="json.js"&gt;&lt;/script&gt;
  &lt;!--     &lt;link rel="stylesheet" href="style.css"&gt; --&gt;
    &lt;/head&gt;
      &lt;frameset cols="300,*,300"&gt;
      &lt;frame src="navigation.html" name="navigation"/&gt;
      &lt;frame src="elladq.html" name="content"/&gt;
      &lt;frame src="sidebar.html" name="rightsidebar"/&gt;
      &lt;/frameset&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>navigation.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="json.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
      &lt;base target="content"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="left"&gt;
          Die Navigation&lt;br/&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>rightsidebar.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="json.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="right"&gt;
          Die Sidebar &lt;br/&gt;
          &lt;script type="text/javascript"&gt;
              alert("I reloaded!");
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now it's getting a bit complicated. The following parts are out of javascript.js. I'm gonna try to explain my thoughts behind the different parts.</p>
  
  <p>The variables chap and subchap are thought as kind of a memory of the current position in the hierarchy. Depending on what link you click on they should adapt. The navigation-frame should never reload, so I hope they can kinda be saved there. (Big question mark)</p>
  
  <pre><code>$(document).ready(function(){ // DOM needs to exist in order to be able to add stuff in there
      //JSON-Data coming out of json.js which also converts it in a way to be accessed by data.chapter[chap].subchapter[subchap]
      var chap = 1; //position in the array of the currently open chapter
      var subchap = 0; //position in the array of the currently open subchapter
  </code></pre>
  
  <p>The following part kinda works. The navigation is created according to the JSON-structure. When pressing on a link, the right frame reloads (at least on the ftp-Server, it doesn't locally).
  When clicking on a link the variables chap and subchap should take the values of the element number in the array. (-> onclick='..')</p>
  
  <pre><code>        //********* Create Navigation out of JSON File *********
          for(var i = 0; i &lt; data.chapter.length; i++) { 
              $('#left').append("&lt;a href='"+data.chapter[i].url+"' target='content'&gt;"+data.chapter[i].title+"&lt;/a&gt;&lt;/b&gt;&lt;ul&gt;");
              for(var j = 0; j &lt; data.chapter[i].subchapter.length; j++) {
                  $('#left').append("&lt;li&gt;&lt;a href='"+data.chapter[i].subchapter[j].url+"' onclick='chap="+i+"; subchap="+j+"; parent.rightsidebar.location.reload();'&gt;"+data.chapter[i].subchapter[j].title+"&lt;/a&gt;&lt;/li&gt;"); // target="content"; defined in sidebar.html header
              }
              $('#left').append("&lt;/ul&gt;");
          }
  </code></pre>
  
  <p>This is what yet isn't working. The variables chap and subchap do not have the values which I want them to have. 
  When clicking on the "Next:" link, the subchap should increase by one.</p>
  
  <pre><code>        //********* Previous Page / Next Page *********
          if (subchap&gt;0){
              $('#right').append("&lt;a href='"+data.chapter[chap].subchapter[subchap-1].url+"' target='content' onclick='subchap-=1; parent.rightsidebar.location.reload();'&gt; Previous: "+data.chapter[chap].subchapter[subchap-1].title+"&lt;/a&gt;&lt;br/&gt;");
          } if (subchap&lt;data.chapter[chap].subchapter.length) {
              $('#right').append("&lt;a href='&gt;"+data.chapter[chap].subchapter[subchap+1].url+"' target='content' onclick='subchap+=1; parent.rightsidebar.location.reload();'&gt; Next: "+data.chapter[chap].subchapter[subchap+1].title+"&lt;/a&gt;&lt;br/&gt;");
          }
  });
  </code></pre>