Skip to content

Instantly share code, notes, and snippets.

@RichardBronosky

RichardBronosky/qrjoke.html

Created August 12, 2011 06:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RichardBronosky/1141590 to your computer and use it in GitHub Desktop.
Save RichardBronosky/1141590 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
qrjoke.html
<html>
<!--
Author: Richard Bronosky
Generated online via: http://j.mp/pyQfTl
Available on github: https://gist.github.com/gists/1141590
Idea: http://www.instructables.com/id/QR-Code-Bad-Jokes/
-->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://raw.github.com/eklitzke/autoresize.jquery.js/master/autoresize.jquery.js"></script>
<script>
$(document).ready(function(){
$("#punchline_img")[0].src="http://qrcode.kaywa.com/img.php?s=8&d="+$("#punchline_textarea")[0].value;
$('textarea').each(function() {
$(this).autoResize().keydown();
});
$("#punchline_img").click(function() {
this.style.display="none";
$("#punchline_textarea")[0].style.display="block";
});
$("#punchline_textarea").blur(function() {
this.style.display="none";
$("#punchline_img")[0].src="http://qrcode.kaywa.com/img.php?s=8&d="+$("#punchline_textarea")[0].value;
$("#punchline_img")[0].style.display="inline";
});
});
</script>
<style>
body {
margin:50px 0px; padding:0px;
text-align:center;
}
div {
width:7in;
margin:0px auto;
}
textarea {
width:7in;
font-size:36px;
}
#punchline_textarea {
display:none;
}
img {
image-rendering:-moz-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor;
}
#punchline_img {
width:5in;
height:5in;
}
#link {
width:100%;
text-align:right;
}
#link img{
width:.75in;
height:.75in;
}
</style>
<style media="print">
#joke_textarea {
border:none;
}
</style>
</head>
<body>
<div>
<p>
<textarea id="joke_textarea">This is the body of my joke. There are many like it. But, this one is mine.</textarea>
</p>
<p>
<img id="punchline_img" />
<textarea id="punchline_textarea">This is the punchline of my joke.</textarea>
</p>
</div>
<div id="link">
<img src="http://qrcode.kaywa.com/img.php?s=5&d=http%3A%2F%2Fj.mp%2FpyQfTl" />
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment