Snippets are small pieces of reusable code that solve specific problems within a website or web application. The focus here is on client side coding using HTML5, CSS (CSS3) and Javascript.

Information or portfolio cards

This snippet is intended to be a series of sliding ‘cards’ that on clicking/touching will open up their own individual content box, that can fill the screen with further information. One anticipated application would be a series of portfolio items each with their own more detailed description. All portfolio items can be visited without the delay of a further page load.

Cards snippet screenshot

Two javascript versions are included – one using library-free ‘vanilla’ javascript, and one using jQuery.

Demo and download

View the demo or download the files.

Coding

  • This code works out of the box for all modern browsers including IE >= 10.
  • You do not need to run the code on a web server. Opening the index.html file from your local machine/filesystem in a web browser will result in a fully working demo.
  • The demo and download package includes the HTML5 boilerplate from https://html5boilerplate.com.

Why have two javascript versions?

The jQuery version has the lowest additional overhead if you are using jQuery anyway.

However although the ‘vanilla’ javascript file is larger, it has no need for jQuery and hence has lower overall overheads and will have a quicker page load time.

More help?

You are free to use the Card Snippet code under the MIT license. If further development or support is required, on a commercial basis, then contact me.