Displaying Dates and Times Using JavaScript

2007-02-05T18:28:00-06:00

Some considerations when displaying dates and times on a website include showing delta times, customized timezones and caching. Often it's nice to show a delta time like "10 minutes ago" or "5 days ago" to give readers a frame of reference instead of an absolute date. When the date is far enough in the past and an absolute date becomes desired, customizing the date to the user's timezone is useful. And if your site grows large enough that caching becomes useful, finding a way to display customized deltas and timezone information in a cacheable static page becomes an ideal solution.

JavaScript is an ideal solution for all three issues. With JavaScript you can place an absolute date in the web page and have the JS dynamically update it when the page is loaded. This can be used to calculate delta times and accommodate timezones as well. The result is that the page can embed the same date every time and thus becomes more cache-friendly.

The Typo blog engine (which runs this blog) comes with a useful MIT-licensed JavaScript in it's typo.js script. Just copy three of the JS date/time functions, wrap your dates with spans (using the appropriate class name and absolute date in the span title) and then call show_dates_as_local_time() when your page is finished loading. The two other functions you'll need are get_local_time_for_date(time) and distance_of_time_in_words(minutes). This is what I did for Planet Catalyst's Plagger theme a while back.

Although it's pretty easy to accommodate timezones, the Typo script doesn't do that. I've done this for some projects and might post some code in the future but it's not hard.

Customization and cacheability, two great advantages for using JavaScript to handle dates and times.

Scriptaculous article slider for Typo themes

2006-07-12T01:48:00-05:00

Several Typo themes have nice DHTML effects and I thought it would be useful to extract some of these for use in other themes. In particular I am interested in adding Modernist's DHTML Scriptaculous ScrollTo article slider to my modded Azure theme. You can see this in action at poocs.net which is currently running Modernist. This article covers the steps necessary to repurpose the DHTML article slider and involves templates, CSS and images. I've shown how Modernist does it and, where applicable, how I prefer to do it. It turns out to be pretty easy.

I've added this feature to my test system, however it's not here yet because I've decided to create a custom Dev411_Azure theme to handle the views (and controller/helper patches) for the growing number of mods I'm using rather than to continue manually hacking files under themes/azure and app. This should be here before long.

The things discussed here are the changes necessary to add the DHTML slider to a theme of your choice. For the files below the path part ... should be along the lines of "themes/#{mytheme}" but can be simply app if you don't mind losing your changes when the admin console is used to change themes.

I'll show where my preferences deviate from Modernist's implementation. My pet peeve is the use of the extra @ta instance varaible since it's unnecessary and the name isn't self-explanatory. I'll use each_with_index with article_index as the index name.

.../views/articles/index.rhtml: in order to know the which article is next, Modernist introduces a counter called @ta in the index.rhtml file. I'll probably name this something more intuitive like @article_index but here's the code from: themes/modernist/views/articles/index.rhtml

Modernist:
```
<% @ta=0 %>
<% for article in @articles -%>
  <%= render_partial "article", article %>
  <% @ta+=1 %>
<% end -%>
```
My preference:
```
<% @articles.each_with_index do |article,article_index| -%>
  <%= render :partial => "article",
             :object  => article,
             :locals  => { :article_index => article_index }
  %>
<% end -%>
```
- use each_with_index instead of creating an extra counter since the index is already available
- use render instead of render_partial just because the former was indicated as preferred on the #typo channel
- use self-explanatory variable names: article_index instead of ta
- I would actually prefer to send the article object to the render method as a local variable since that's what it seems to be and I don't see a reason to treat it differently.
```
:locals => {
    :article => article
    :article_index => article_index
}
```
  instead of as :object but I can't be sure that will always work since article is also the name of the template and there's some magic there.
.../views/articles/_article.rhtml: there are two pertinent changes in this file: (a) the Scriptaculous ScrollTo controls and (b) adding a DOM id to the article header that can be navigated to.
- ScrollTo controls: In the Modernist theme, the Scriptaculous controls are embedded directly in _article.rhtml as follows. Another option is to put it in a separate _article_flip.rhtml template include but I'm not sure if this will be automatically copied in by Typo's theme admin manager. In any event, the following should be added to the top of _article.rhtml either directly or as an include. Notice the innerHTML of the links below is a space. The links will be rendered as graphics once the CSS is enabled.
  
  Modernist:
```
<div class="flip">
<a href="#header" onclick="new Effect.ScrollTo('header'); 
  return false" class="flip-top"
  title="Scroll to the top"> </a>
<% if @ta < (@articles.size-1) %>
<a href="#post-<%= @ta+1 %>"
  onclick="new Effect.ScrollTo('post-<%= @ta+1 %>');
  return false" class="flip-next"
  title="Scroll to the next post"> </a>
<% end %>
<a href="#menu" onclick="new Effect.ScrollTo('menu');
  return false" class="flip-menu"
  title="Scroll to the menu"> </a>
</div>
```
  The Modernist theme places the menu at the bottom of the page so having a control go to menu makes sense. For a more traditional theme like Azure, I added a <div id="bottom"> around <p id="pagination" to indicate the bottom and changed the last link above accordingly.
  
  My preference:
  - Change the @ta references to article_index as above
- article anchor: The next change is to add a DOM id with the article index to each article's title:
  
  Modernist:
```
<h3 id="post-<%= @ta %>">
  <%= article_link article.title, article %>
  <%= author_link(article) %>
```
  My preference:
```
<h3 id="post-<%= article_index %>">
```

CSS: Copy the CSS definitions that begin with .flip to one of your CSS files:

.flip {
        float: left;
        position: absolute;
        opacity: 0.9;
        margin: 0 0 0 -65px;
}

.flip a {
        display: block;
        width: 25px;
        height: 16px;
        padding: 4px;
        background-position: center center;
        background-repeat: no-repeat;
}

.flip-menu { background-image:
  url('/images/theme/flip-bottom-0.gif'); }
.flip-next { background-image:
  url('/images/theme/flip-down-0.gif'); }
.flip-top { background-image:
  url('/images/theme/flip-top-0.gif'); }
.flip-comments { background-image:
  url('/images/theme/flip-comments-0.gif'); }
.flip-post { background-image:
  url('/images/theme/flip-post-0.gif'); }
.flip-menu:hover { background-image:
  url('/images/theme/flip-bottom-1.gif'); }
.flip-next:hover { background-image:
  url('/images/theme/flip-down-1.gif'); }
.flip-top:hover { background-image:
  url('/images/theme/flip-top-1.gif'); }
.flip-comments:hover { background-image:
  url('/images/theme/flip-comments-1.gif'); }
.flip-post:hover { background-image:
  url('/images/theme/flip-post-1.gif'); }

control images: the last step is to copy the control images to the right location. These are the flip-post-[01].gif images referenced in the CSS. Copy these to the correct directory.

That's it, you should be able to get up and running.

Dev411 Blog: Category dhtml

Displaying Dates and Times Using JavaScript

Scriptaculous article slider for Typo themes