StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>To go a bit into the details of the comments:</p> <ol> <li><p>A History-Array:</p> <blockquote> <p>var history_array = [];<br> function show(idx) {<br> hide();<br> content[idx].style.visibility = 'visible';<br> historyArray[] = idx;<br> }</p> </blockquote></li> </ol> <p>You can then call <code>show(historyArray[historyArray.length-1]);</code> on a Go-back-button. You will also want to remove the last index of the array using <code>historyArray.splice(historyArray.length-1, 1);</code>.</p> <p>Your script on the Go-back-button thus should look like this: Go Back You may want to decide on a maximum-size of the history and splice the first element of the array if it's reached, but that's up to you.</p> <ol> <li>Explaining elclanrs code, as I already used it in above example as well:</li> </ol> <p>First off, he puts every element of the class "content" into the array "content". He calls show() with an identifier for each of your pages. Within show() he first calls hide(). hide() iterates over every element of the class "content" and sets the visibility of those to "hidden". Afterwards show() uses the identifier (int) as index of the array "content" and sets that very element to "visible".</p> <p>It's somewhat like: "Hide everything and show me the n-th element that I just clicked"</p> <p><strong>Edit:</strong> As the follow-up is too long for a mere comment:</p> <p>At the top of your script-tag add the following function:</p> <blockquote> <pre><code>onload=function(){ if (document.getElementsByClassName == undefined) { document.getElementsByClassName = function(className) { var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); var allElements = document.getElementsByTagName("*"); var results = []; var element; for (var i = 0; (element = allElements[i]) != null; i++) { var elementClass = element.className; if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) results.push(element); } return results; } } show(0); </code></pre> <p>}</p> </blockquote> <p>Then replace: <code>var content = document.querySelectorAll('.content');</code></p> <p>With: <code>var content = document.getElementsByClassName('content');</code></p> <p>Afterwards remove the onload-event from the -tag.</p> <p>It still throws an initial error that content[idx] is undefined, but it works and I can't get rid of that one on the spot, first priority was to provide a functional fix - the error is probably caused by the loading-order.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload