Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here is something that should do what you want using jQuery:</p> <pre><code>(function($){ var history; function getHistory() { var tmp = $.cookie("history"); if (tmp===undefined || tmp===null) tmp = ""; if ($.trim(tmp)=="") tmp = []; else tmp = tmp.split("||"); history = []; $.each(tmp, function(){ var split = this.split("|"); history.push({ title: split[0], url: split[1] }); }); } function saveHistory() { var tmp = []; $.each(history, function(){ tmp.push(this.title+"|"+this.url); }); $.cookie("history",tmp.join("||"),{ expires: 60, path: "/" }); } function addToHistory(title,url) { var newHistory = [] $.each(history, function(){ if (this.url!=url) newHistory.push(this); }); history = newHistory; if (history.length&gt;=10) { history.shift(); } history.push({ title: title, url: url }); saveHistory(); writeHistory(); } function writeHistory() { var list = $("&lt;ul /&gt;"); $.each(history, function() { var element = $("&lt;li /&gt;"); var link = $("&lt;a /&gt;"); link.attr("href",this.url); link.text(this.title); element.append(link); list.append(element); }); $("#history").empty().append(list); } $(document).ready(function(){ getHistory(); var url = document.location.href; var split = url.split("#"); var title; if (split.length &gt; 1) { title = $("#"+split[1]).text(); } else { title = document.title; } if (title===undefined || title===null || $.trim(title)=="") title = url; addToHistory(title,url); url = split[0]; $("a[href^='#']").click(function(){ var link = $(this); var href = link.attr("href"); var linkUrl = url+href; var title = $(href).text(); if (title===undefined || title===null || $.trim(title)==="") title = linkUrl; addToHistory(title,linkUrl); }); }); })(jQuery); </code></pre> <p>Put in a js file you include in all your pages. You also need to include jquery.cookie.js before it (<a href="http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/" rel="nofollow noreferrer">http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/</a>)</p> <p>Your page must be formatted like these two test pages:</p> <p>[history.html]</p> <pre> &lt;html&gt; &lt;head&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.cookie.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;history.js&quot;&gt;&lt;/script&gt; &lt;title&gt;My First Page&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;PAGE ONE&lt;/h2&gt; &lt;h3&gt;History&lt;/h3&gt; &lt;div id=&quot;history&quot;&gt;&lt;/div&gt; &lt;h3&gt;Links&lt;/h3&gt; &lt;a href=&quot;#part1&quot;&gt;Page 1 -Part 1&lt;/a&gt; &lt;a href=&quot;#part2&quot;&gt;Page 1 -Part 2&lt;/a&gt; &lt;a href=&quot;history2.html#part1&quot;&gt;Page 2 - Part 1&lt;/a&gt; &lt;a href=&quot;history2.html#part2&quot;&gt;Page 2 - Part 2&lt;/a&gt; &lt;h3&gt;Parts&lt;/h3&gt; &lt;h4 id=&quot;part1&quot;&gt;Part 1 of the First Page&lt;/h4&gt; &lt;h4 id=&quot;part2&quot;&gt;Part 2 of the First Page&lt;/h4&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p>[history2.html]</p> <pre> &lt;html&gt; &lt;head&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.cookie.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;history.js&quot;&gt;&lt;/script&gt; &lt;title&gt;My Second Page&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;PAGE TWO&lt;/h2&gt; &lt;h3&gt;History&lt;/h3&gt; &lt;div id=&quot;history&quot;&gt;&lt;/div&gt; &lt;h3&gt;Links&lt;/h3&gt; &lt;a href=&quot;#part1&quot;&gt;Page 2 - Part 1&lt;/a&gt; &lt;a href=&quot;#part2&quot;&gt;Page 2 - Part 2&lt;/a&gt; &lt;a href=&quot;history.html#part1&quot;&gt;Page 1 - Part 1&lt;/a&gt; &lt;a href=&quot;history.html#part2&quot;&gt;Page 1 - Part 2&lt;/a&gt; &lt;h3&gt;Parts&lt;/h3&gt; &lt;h4 id=&quot;part1&quot;&gt;Part 1 of the Second Page&lt;/h4&gt; &lt;h4 id=&quot;part2&quot;&gt;Part 2 of the Second Page&lt;/h4&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p>Note that the title used for the history block is the text of the tag targetted by the link if it's a #something href or the title of the page if it's not.</p> <p>Any coder with some knowledge of jQuery could tweak it to your specific needs.</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