Home/ Questions/Q 164739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T11:47:51+00:00

I’d like to have a recently viewed pages div filled by a javascript script

  • 0

I’d like to have a ‘recently viewed pages’ div filled by a javascript script which adds the titles and urls of new pages as they are requested by a user throughout their session on a site, by which the div’s content is also maintained by a cookie to persist between sessions.

Note: a new page added to the div’s ‘history list’ includes the clicking on href links that only contain a static variable that will thus only move the window down and not GET a completely new page. EG these links:

<a class='link' href='#john'>  <a class='link' href='#mary'>
  • which are two new items to be shown.

Here, are some code samples that don’t really solve the problem for me, because they do not include static variable GETs whilst on the same page:

http://community.actinic.com/showthread.php?t=33229
http://wordpress.org/extend/plugins/last-viewed-posts/installation/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Here is something that should do what you want using jQuery:

    (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>=10) {             history.shift();         }         history.push({             title: title,             url: url         });         saveHistory();         writeHistory();     }      function writeHistory() {         var list = $('<ul />');         $.each(history, function() {             var element = $('<li />');             var link = $('<a />');             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 > 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);

    Put in a js file you include in all your pages. You also need to include jquery.cookie.js before it (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)

    Your page must be formatted like these two test pages:

    [history.html]

         <html>      <head>       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>       <script type="text/javascript" src="jquery.cookie.js"></script>       <script type="text/javascript" src="history.js"></script>       <title>My First Page</title>      </head>      <body>       <h2>PAGE ONE</h2>       <h3>History</h3>       <div id="history"></div>       <h3>Links</h3>       <a href="#part1">Page 1 -Part 1</a>       <a href="#part2">Page 1 -Part 2</a>       <a href="history2.html#part1">Page 2 - Part 1</a>       <a href="history2.html#part2">Page 2 - Part 2</a>       <h3>Parts</h3>       <h4 id="part1">Part 1 of the First Page</h4>       <h4 id="part2">Part 2 of the First Page</h4>      </body>     </html>

    [history2.html]

         <html>      <head>       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>       <script type="text/javascript" src="jquery.cookie.js"></script>       <script type="text/javascript" src="history.js"></script>       <title>My Second Page</title>      </head>      <body>       <h2>PAGE TWO</h2>       <h3>History</h3>       <div id="history"></div>       <h3>Links</h3>       <a href="#part1">Page 2 - Part 1</a>       <a href="#part2">Page 2 - Part 2</a>       <a href="history.html#part1">Page 1 - Part 1</a>       <a href="history.html#part2">Page 1 - Part 2</a>       <h3>Parts</h3>       <h4 id="part1">Part 1 of the Second Page</h4>       <h4 id="part2">Part 2 of the Second Page</h4>      </body>     </html>

    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.

    Any coder with some knowledge of jQuery could tweak it to your specific needs.

    • 0