StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I copied part of their js.</p> <pre><code>// populates the menu according to what link was clicked, opens it if not already opened populateMenu: function (currentLink) { dd.removeClass(pages); dd.addClass(currentLink + " open"); dd.slideDown(speed, function () { // callback that runs after menu finishes sliding down $("nav ul li.menu>a.active").find("span").html(upArrow); // ajax call is below; it appends a timestamp to prevent caching, in case of dynamic content; remove if you like dd.load(dir + "/" + currentLink + ext + "?" + new Date().getTime(), function () { // callback that runs after menu finishes loading dd.removeClass("loading"); addCloseLink(); }); }); // change the hash according to the clicked link document.location.hash = currentLink; }, </code></pre> <p>If you change the <code>dd.load</code> call for a modify statement with jQuery like <code>dd.html(...)</code> with the content of your choice, you do not have to use ajax.</p> <p>If you remove the <code>document.location.hash = currentLink;</code> line at the end of the function, it will not modify your back/forward navigation.</p> <p>That would end up looking something like:</p> <pre><code>populateMenu: function (currentLink) { dd.removeClass(pages); dd.addClass(currentLink + " open"); dd.slideDown(speed, function () { // callback that runs after menu finishes sliding down $("nav ul li.menu>a.active").find("span").html(upArrow); dd.html($('#your_source_here')); dd.removeClass("loading"); addCloseLink(); }); }, </code></pre> <p><strong>Edit:</strong></p> <p>You could also use a jQueryUI tabs with collapsible content, see <a href="http://jqueryui.com/tabs/#collapsible" rel="nofollow">demo here</a>. It would require styling but should work with maybe less work than adapting the previous code.</p> <p>See <a href="http://jsfiddle.net/XKqhg/1/" rel="nofollow">this jsFiddle</a> for a basic example. Only the styling of the tabs need to be done.</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