Page 1 of 1

HTML coding question regarding Sliding Timeline?

Posted: Thu Jun 11, 2009 5:47 am
by wolframbane
Would anyone here be able to assist with an HTML/Javascript function?

I am trying to essentially construct a relative Timeline that uses the sliding timeline concept, where events occur "XX years ago" (like "10 years ago" or "the past year") as opposed to specific years (ie "1986" or "YEAR 12"). The most 'modern' year occasionally slides forward, so that in another few real years, the events that relatively occur 'one year ago' from today's perspective will eventually occur 'two years ago.'

When I write up my Timeline, when this inevitable shift occurs, rather than going through the entire Timeline and update every single "years ago" reference, I was thinking of simply assigning a 'base' year in the HTML coding, and every reference to "years ago" will actually be derived from a mathematical equation and simply change to whatever the most updated 'base year' I have for that page.

For example, suppose I have a timeline that goes from Year 1 to Year 14. Relatively speaking, Year 14 would be "within the past year" and Year 1 would be "13 years ago." In the HTML coding, I would have the base number as say 13, so the number of years ago could automatically be determined on the webpage with the equation (base number - Marvel Year = number of years ago).

However, a few real life years down the road, more comics stories inevitably add another comic book year, so that the most modern year is Year 15. So the previously mentioned Year 14 would now be "1 year ago" and Year 1 would be "14 years ago." By simply changing the base number in the HTML coding from 13 to 14, all the years on the webpage would automatically be reset based upon the same equations.

I have been trying for a while with no luck to determine the proper HTML coding, but to no avail. If anyone could be of assistance, I would be very grateful. Thank you.

Re: HTML coding question regarding Sliding Timeline?

Posted: Thu Jun 11, 2009 8:48 pm
by Ross
I think you'd want something like this:

Code: Select all

<script type="text/javascript">
  var base_year = 13;
  function getYearsAgo(marvel_year) {
    return (base_year - marvel_year);
  }
</script>
Then in your page, anywhere you want the year, you'd do (for Marvel Year 3, as an example):

Code: Select all

This happened <script>document.write(getYearsAgo(3));</script> years ago.
This is somewhat ugly - normally people would do this in a server-side scripting language rather than do it in client-side JavaScript. But it should work.

Re: HTML coding question regarding Sliding Timeline?

Posted: Fri Jun 12, 2009 12:47 am
by wolframbane
Thank you very much for your help Ross. this is exactly what I was looking for. I did a test run with it and it works great. I greatly appreciate this!!