Well, I have implemented a very simple demo of the first steps. So far, the script only makes sure to add some extra text to the current selection when ever the mouse button is released (which is how most users select most text) and it only works in Firefox (tested in 3.6). Next steps include making the link direct to the actually selected content, record text copying in Google Analytics, add cross-browser checks etc.

The script is published under the same license as these ideas, CC-BY 3.0.

Why?

Copy-paste is another quite common way of interacting with websites and allowing people to easily spread the word about your website in a new way ensures you credit where such is due. Creating a full-featured jQuery-plugin from this should be fairly easy and then making sure it integrates with Google Analytics if present – and then we’re actually done.

What’s next?

Do with this idea whatever you like – expand, implement, trash or forget. Just remember, that if you use it in anyway make sure to attribute me according to the Creative Commons Attribution 3.0 License, that all these 365 Social Ideas are published under.

Related posts:

1. Social Traffic Analyzer – January 2010 Ideas
2. Comment On Everything – January 2010 Ideas
3. App Idea Store – January 2010 Ideas

With HTML 5 and the introduction of datasets, we can do something new. The main advantage and the really huge application area for datasets are, that you can include custom attributes in the serverside-rendered HTML, that the client-side script will use to enhance the browsing experience.

A common example: You have a gallery page, which has an area for displaying a large image and one for a list of thumbnails. In the serverside-rendered HTML you render the first picture in the large image and a list of thumbnails below. In javaScript you hook a function for each thumbnail to change the large image. But where do you supply the path for the large image? It could be done via several methods:

• from the server render a JavaScript-array that do the mapping,
• have a strict naming-convention, and e.g. always remove “-thumb” from the thumbnail path to obtain the large image path,
• hide it on the node by abusing some existing legal property – e.g. hide it in the title-field of the thumbnail, or
• add it is a new property on the node, that will make your document non-compliant with the standard.

But with datasets, the server simply includes the large image path on the thumbnail image node (or the surrounding link node) via a custom data-attribute here named data-fullpath:

<img
  id="large-image"
  src="images/large/picture1.png"
  alt="Large Picture 1"
/>
<ul id="thumbnails">
  <li>
    <a href="gallery_with_picture1_enlarged.html" title="View Picture 1">
      <img
        src="images/thumbs/picture1.png"
        data-fullpath="images/large/picture1.png"
        alt="Picture 1"
      />
    </a>
  </li>
  <li>
    <a href="gallery_with_picture2_enlarged.html" title="View Picture 2">
      <img
        src="images/thumbs/picture2.png"
        data-fullpath="images/large/picture2.png"
        alt="Picture 2"
      />
    </a>
  </li>
  <li>
    <a href="gallery_with_picture3_enlarged.html" title="View Picture 3">
      <img
        src="images/thumbs/picture3.png"
        data-fullpath="images/large/picture147_no_conventions.png"
        alt="Picture 3"
      />
    </a>
  </li>
</ul>

Of course, in live implementation the links above would link to pages, where the other thumbnails where shown in the large area to allow for graceful degradation, but this is just to show the idea. The above example have now been updated to provide actually interesting links in the surrounding <a>-tags and not just link to the image as several have suggested.

The JavaScript that went with this would be something along the lines of (asuming jQuery.dataset functionality):

$("ul#thumbnails a").click(function(e) {
	$("#large-image").attr("src", $(this).find("img").dataset('fullpath'));
	return false;
});

See full example here – it works in all browsers, and is valid HTML 5. The JavaScript works in non-HTML5 browsers, as it includes a little jQuery plugin I wrote adding the method dataset, which includes a fallback if the DOM attribute “dataset” is not available.

I personally find this to be a very clean way of implementing this feature over the many hacks, that we need to use today. And this is of course not limited to galleries, but can be used for anything, where the script needs to know extra information about the objects in the document in order to add additional functionality through scripts on the page – this could include having a reference to “previous” or “next” image in the above gallery, meta-information about rows in a table to use for client-side searching, filtering or sorting, meta data for link previews and many other possibilities.

NB: This is not to be used as meta-data for external entities – only for scripts on the page enhancing the browsing experience. For providing meta-data for external entities, use microdata, which is completely different from datasets – but the two could be used to convey the same meta information, just with different recipients in mind.

Related posts:

1. Web Sockets in HTML 5 might solve the http pull problem once and for all