Let’s say you have a page on your website and you would like to offer your readers the ability to jot down notes related to the content of that page in some kind of input field. Furthermore, since you expect visitors to revisit the page from time to time, you’d like to store their notes somewhere so that the input field can be loaded when they next load the page. Before HTML5, you would either use a server-side process, cookies or some combination of the two to make this happen. With HTML5, there’s a third choice: the localStorage window object.

First, let’s start with the input field. We could use a textarea element but in HTML5, any element can be turned into an input element by adding the contenteditable attribute:

<ul id="notepad" contenteditable="true">
  <li></li>
</ul>

In the  CSS for this list element, we want to set its size and position:

#notepad {
 height: 20%;
 width: 20%;
 display: none;
 position: fixed;
 top: 0.5in; right: 0.5in;
 overflow: auto;
 padding: 1em;
 border: thin solid;
 list-style-type: none;
 background-color: #fffff0; /* light yellow */
}

This will place the list element 1/2 inch down and in from the top-right corner of the browser’s window. The bordered box will take up 1/5 of the window’s width and height and scrolling will be enabled if there is more content then fits. The display property is set to “none” initially. The user will be able to make the notepad list visible by clicking a button with an onclick handler.

<button id="notepad_toggle"
        onclick="$('#notepad').toggle()">Notepad</button>

I’m using jQuery for the onclick handler because it makes it easy to target elements . If you copy this code, make sure you load jQuery somewhere in the document’s head.

HTML5 extends the window object with the localStorage property and two primary methods: setItem(name, value) and getItem(name) to set and retrieve name/value pairs of data items. Any number of such items can be stored with a webpage and each page’s storage object is independent of any other page’s. Unlike cookies, local storage items are never sent by the browser to the server and thus provides a efficient means of saving page state information even for megabyte data items.

For our example, we can store the contents of the notepad element each time it is changed. We will do this with the blur method, detecting when the user leaves the notepad to do something else. Here’s some jQuery that does that nicely:

$('#notepad').blur(function () {
  localStorage.setItem('notepad', this.innerHTML);
});

How nice is that? The storage doesn’t have to be initialized; it’s just there waiting for you to throw something into it.

When the page is first loaded we need to check if the notepad contents has been saved from some previous visit by this browser and if so, use the stored value to replace the inner contents of the list. This can be done with the following JavaScript statement:

  if ( localStorage.getItem('notepad') ) {
    var notepad = document.getElementById('notepad');
    notepad.innerHTML = localStorage.getItem('notepad');
  }

Note that there’s no conflict in the three uses of ‘notepad’ in the code above. The name for the local variable can be anything as can the name of the stored data item. Neither has to be the same as the UL element’s ID. Hopefully, I’m avoiding confusion by naming everything ‘notepad’ and not adding any.

Since this is only going to work on some browsers, let’s test to see if local storage is available. If it isn’t,  we can just hide the the button that makes the notepad visible.

if (!window.localStorage) $('#notepad_toggle').hide();

or, for debugging, we can call an alert message.

All of the code can go into a script element embedded in the content body, like this blog post, for example:

Notepad

Click the button above and enter anything in the light yellow notepad that opens in the top right corner of your HTML5 capable browser. Enter anything you want – I’ll never see it, nor will anyone else. What’s entered in your local storage stays in your local storage. Try dragging and dropping images, tables, links and other thingys. Notice something interesting? You can’t use HTML to markup your own typing but anything you drag or paste in retains all of its HTML formatting. Now Go Away! Come back to this page sometime later (with the same browser) and click the notepad button again. There’s your stuff!

Click here to see the code for a stand-alone demo to get you started.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Notepad Demo</title>
<!-- (c) 2010 by Larry Aronson -->
<style>
    body  { padding: 36px; }
    #notepad {
     height: 20%;
     width: 20%;
     display: none;
     position: fixed;
     top: 0.5in; right: 0.5in;
     overflow: auto;
     padding: 1em;
     border: thin solid;
     list-style-type: none;
     background-color: #fffff0; /* light yellow */
    }
</style>

<!-- let's get our jQuery from Google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
      if ( window.localStorage ) { 	// see if webstorage is working
        if ( localStorage.getItem('notepad') ) {
          var notepad = document.getElementById('notepad');
          notepad.innerHTML = localStorage.getItem('notepad');
        }
        $('#notepad').blur(function () {	// save when exiting the notepad
          localStorage.setItem('notepad', this.innerHTML);
        });
      }
      else {
        $('#notepad_toggle').hide(); 	// hide button if no webstorage
      }
    });
</script>
</head>  

<body>
  <button id="notepad_toggle"
  	  onclick="$('#notepad').toggle('slow')">Notepad</button>
<ul id="notepad" contenteditable="true">
<li> </li>
</ul>

</body>
</html>

Someone had started a blog for Profoto-USA using a customized theme but left it an unfinished mess. The sidebar was all screwed up, the more tag wasn’t working, there were no social-sharing functions and no control over the main menu – to name just a few of the problems. Profoto-USA is about the importance of good photographic lighting with dozens of interesting articles (some of the best authored by Ron) illustrated with beautiful photographs. Please click the screenshot below to check it out.

Fixing the sidebar, installing social sharing widgets and enabling the WP 3.0 menu manager was straight forward. The real challenge was finding a way to give authors more control over the content. The more tag, mentioned above, provides the ability to place a marker in a post so that on the blog’s front page, the post is displayed up to the marker, followed by a link to the rest of the article. I got that working but it wasn’t enough to manage the huge amount of content. The beginning paragraphs of a post often do not make the best summary, especially with long magazine-style articles. WordPress provides the ability to hand-craft a article summary, called an excerpt, but this feature has to be coded into the theme. Some themes show post excerpts on their front page; some show full posts (up to the first more tag.) I decided to give Profoto-USA the choice of which to use on a per-post basis using a custom field.

The previous developer had hard-coded a modified Recent Posts sidebar widget that showed, for each post, the post title and a linked thumbnail image. The thumbnails are large: 304 x 190 pixels, and only the first two or three appeared “above the fold.” The obvious solution was to use a sideshow plugin that cycled through the thumbnail photographs. Now, I’ve used a number of such plugins before and the general problem with them is that they only do what the plugin author designed them to do plus whatever user configurable options that author cares to code in. Imho – most of them fall short. Since most of the code for fetching the post data was already working, I decided to use some jQuery to add the animation effects and navigation controls to make it into a sideshow (click for nerdy technical details.)

<div id="post-slides">
    <div class="post-slide">  <!-- first slide -->
        <a href=..." title="..."><img ... /></a>
        <h3><a href=".." title="...">...</a></h3>
    </div>

    <div class="post-slide">  <!-- second slide -->
        ...
    </div>

    ...
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#post-slides').show().cycle({
            fx: 'fade',
            speed: 1000,
            timeout: 10000,
            next: '#next_slide',
            prev: '#prev_slide'
        });
    });
</script>

<h4>Recent Articles</h4>
 <div id="slideshow-nav">
   <div id="prev_slide">
     <a href="#" title="previous article">&lt;&lt;</a>
   </div>
   <div id="next_slide">
     <a href="#" title="next article">&gt;&gt;</a>
   </div>
 </div>

This took much less time than I anticipated – less time than it would have taken to find and configure a plugin to the client’s specifications. With the extra time on my hands, I decided to give Profoto-USA a feature they didn’t ask for but felt the site definitely needed: an index to all articles showing only the permalinked titles and the meta-info line with author and publication date. I added it to the footer menu without telling them about it.

My client, Kate Nasser – the people skills coach, has grown her consulting business by consistently adding content to her blog/website and by using Twitter, LinkedIn and youTube to draw traffic. A recent SEO/SEM assessment of her site recommended adding more keyword-rich content and reducing some of front page’s  clutter.  This is what the page looked liked.

Advanced Tooltips.

We had a box on the right side of the content area listing a dozen “Needs” linked to different site pages or posts. With each need there was an associated comment (technically, a definition list.) We decided to move the box to the left side of the page (ahead of the straight text content,) placing the comment parts in tooltip boxes that appear as you mouse over the topic part. Kate was free to add more content to the hidden (only from humans) comment parts.

Tooltips are the little yellow boxes that appear when your mouse hovers over a link. The content of the tooltip box is taken from the title attribute of the HTML tag that creates the link. But ordinary tooltips are boring with fixed style and color; yellow wasn’t the best choice given the site’s aqua tones.

So, I installed JQuery Tools from Flowplayer.org which has an easy to use, advanced tooltip tool. JQuery is a library of Javascript functions that make it easy to add dynamic behavior to Web page elements without having to worry about cross-browser incompatibilities. JQuery Tools is a free, lightweight tool collection that provides basic behaviors to attach to any page element. The Advanced Tooltip tool replaces the browser’s builtin tooltip and can be attached to any page element, not just links.

To make Advanced Tooltips work, you have to provide a page element with a unique id to hold the content. It doesn’t matter where it’s placed. The element, typically a division, is dynamically positioned near the moused-over element. The element is re-useable; you only need one holder element for all tooltips of a given style on a page. The tooltip is styled using Normal CSS so I was able to match the colors and typography of that section of the site’s front page.

Technical Details (Expand)

<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script type="text/javascript">
<?php if (is_page("2")) { ?>
    $(document).ready(function() {
        $("h3.need-title a").tooltip({ tip: "#TipBox",
                                       offset: [-25, 150],
                                       effect: 'fade' });
    });
<?php } ?>
</script>

<div id="TipBox" class="needs-tips">&nbsp;</div>

#TipBox {
 display:none;
 width: 200px;
}

.needs-tips {
 text-align: left;
 background-color: #fafcfb;
 border: 2px solid #009ea0;
 font: italic 10pt comic sans ms;
 color: #000;
 padding: 3px 8px;
}

Random Quotes

Kate has a bunch of her own quotes and was updating her front page every few days with a new quote from the collection. She asked if there were some way to automate the process. I browsed the various code and plugin collections and found noting simple or suitable. I decided to write my own.

I copied her front page as a new draft page and cloned the default page template and assigned it to the new page. Thus, I was able to work on and test the new features without endangering the site’s current front page. The cloned template would contain custom code to randomly pick a quote and place it at the beginning of the content area. The quotes themselves would be stored (and editable) as custom fields for that page with the key, “quote”.

<?php
    $todaysquote = '';
    $quotes = get_post_meta('2', 'quote');
    if (!empty($quotes)) {
        $todaysquote = $quotes[rand(0, sizeof($quotes) - 1)];
    }
?>
<div class="dailyquote">&ldquo;<?php _e($todaysquote); ?>&rdquo;
<span>&mdash;Kate Nasser</span></div>

First, a PHP variable, $todaysquote, is initialized. Then the WordPress function, get_post_meta(), gets all custom fields from post number 2 (that’s the front page) with key = ‘quote’. The values are returned as an array of strings and assigned to the variable, $quotes. If it’s not empty, the built-in, PHP random number generator picks one of its array items. Finally, the last two lines define the HTML division element that will hold the quote,  enclosing it in smart quote marks and adding Kate’s signature. Note the use of the special echo function,  _e($todaysquote),  to encode any HTML characters that might be in the quote string.

One of the upsides of this technique is that a new front page is seen in most every visit to the front page including those by search engine robots. Over time, this can expand the number of keywords associated with the page. Unfortunately, there’s no easy way to measure which quotes work best. If you do add random content like this to a page, you should check to see if you have a caching plug-in active. You might want to exclude that page from the cache.

I added this feature as a template hack because my client only wanted it on one page which already had a customized template. It could be easily generalized and added as a filter to the theme’s functions file, for example, to append a random quote to post content when generating a single-post view.