When building web directories in particular or websites in general you often need copy & print functionalities.
For example you could allow users to easily copy an address. Or maybe you want to allow users to print certain elements from a list – like a search result.
Having tried & used multiple solutions in the past I recently found a combination which I think works great.
As a result, I suggest using 2 simple plugins.
Copy / Clipboard
For the copy/functionality, the best cross-browser solution, in my opinion, at this moment is clipboard.js.
A quick usage example ( besides the examples on their website ) would be:
The plugin gets its value from the data attribute “data-clipboard-text” in the example above. Also the button’s text is changed, after clicking the link, so your users have a nice feedback.
Printing
A good stylesheet is the key to printing pages properly. The problem is that sometimes it’s hard to manage this for dynamic elements. One solution which I used successfully is the jQuery plugin printThis.
This plugin gives you the option to directly print independent elements. Let’s say you want to allow users to print only the search result relevant to them.
Here’s a code sample which I think is self-explanatory, the plugin is very easy to use.
The 2 examples above will come in handy for many websites. I think these plugins will allow you to easily integrate functionality which will make the website more interactive.