XKCD Embedder
This is a very silly little project. Everyone loves XKCD, and I wanted to embed a few of my favorites into a blog or whatever. For any other comic-strip it might make sense to simply take the image and put it in an image tag. But as any avid reader of XKCD is aware, each comic has a fun hover-text.
And so what does this mean? It means that the comic image alone is not a complete representation of the comic. And so you lose some information in only displaying the image. Of course, you can add the alt-text as well. But unfortunately, alt-texts are not good on mobile screens - hover effects in general are not good on mobile. So you want an on-click display of the alt-text. With the addition of a little "Add to favorites" feature, it eventually became a full widget.
No one actually uses this as far as I know, but it exists.
A small bit of JS for embedding XKCDs. Embed the latest XKCD, a particular XKCD, or a random XKCD.
For sample usage see xkcd-embedder.fahmidur.us
Usage
The usage is quite simple.
Setup
In your header place add the stylesheet:
<link rel='stylesheet' href='http://xkcd-embedder.fahmidur.us/css/xkcd-embedder.css'/>
At the end of your body place:
<script src='http://xkcd-embedder.fahmidur.us/js/xkcd-embedder.js'></script>
Normal Usage
For the latest XKCD:
<div class='xkcd-embed' data-id='latest'></div>
For an XKCD with a particular ID:
<div class='xkcd-embed' data-id='1'></div>
For a random XKCD:
<div class='xkcd-embed' data-id='random'></div>
You can also set the maxWidth if you need it.
<div class='xkcd-embed' data-id='random' data-maxWidth='400px'></div>