Skip to content

Instantly share code, notes, and snippets.

@derek-schaefer

derek-schaefer/qr.html

Created June 6, 2012 12:31
Show Gist options
  • Save derek-schaefer/2881586 to your computer and use it in GitHub Desktop.
Save derek-schaefer/2881586 to your computer and use it in GitHub Desktop.
Download ZIP
QR Code Generator
Raw
qr.html
<html>
<head>
<title>QR Code Generator</title>
<style type="text/css">
#container {
width: 800px;
margin: auto;
}
#generator {
width: 350px;
float: left;
margin-right: 10px;
}
#generator fieldset {
border: 1px solid #DDD;
}
#generator textarea {
height: 50px;
width: 100%;
resize: none;
}
#result {
width: 350px;
height: 350px;
display: inline-block;
border: 1px solid #DDD;
margin-top: 8px;
position: relative;
}
#result img {
display: block;
margin: auto;
top: 25%;
left: 100px;
position: absolute;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $img = $('#result img');
var $parent = $img.parent();
$img.load(function() {
$img.css({'top':$parent.height() / 2 - $img.height() / 2, 'left':$parent.width() / 2 - $img.width() / 2}).show();
});
$('#submit').click(function() {
$img.attr('src', 'https://chart.googleapis.com/chart?cht=qr&' + $('#generator form').serialize());
});
});
</script>
</head>
<body>
<div id="container">
<h1>QR Code Generator</h1>
<div id="generator">
<form>
<fieldset>
<legend>Size:</legend>
<input type="radio" name="chs" value="150x150" checked>150x150<br>
<input type="radio" name="chs" value="200x200">200x200<br>
<input type="radio" name="chs" value="250x250">250x250<br>
<input type="radio" name="chs" value="300x300">300x300<br>
</fieldset>
<fieldset>
<legend>Content:</legend>
<textarea name="chl"></textarea>
</fieldset>
<input id="submit" type="button" value="Generate"></input>
</form>
</div>
<div id="result"><img style="display:none;" /></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment