Skip to content

Instantly share code, notes, and snippets.

@peterchester

peterchester/all-chars.html

Created October 26, 2012 23:19
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 peterchester/3962122 to your computer and use it in GitHub Desktop.
Save peterchester/3962122 to your computer and use it in GitHub Desktop.
Download ZIP
All Chars
Raw
all-chars.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.char {
padding: 0;
margin: 0;
display: block;
float: left;
position: absolute;
}
#chars {
}
</style>
</head>
<body>
<input type="submit" id="start" value="Show me characters!" />
<div id="chars"></div>
<script>
i = 0;
function morechars() {
s = '';
max = i + 1;
while (i < max) {
size = Math.round( Math.random() * 300 ) + 20
x = Math.round( Math.random() * $(document).width() ) - (size/2);
y = Math.round( Math.random() * $(document).height() ) - (size/2);
s += '<span style="left:'+x+'px; top:'+y+'px; font-size:'+size+'px; z-index:'+i+';" class="char" title="'+i+'">&#'+i+';</span>';
i++;
}
$("#chars").html(s + $("#chars").html());
}
$(document).ready(function() {
interval = false;
interval_toggle = false;
$("#start").click(function() {
if (interval_toggle) {
clearInterval(interval);
interval_toggle = false;
$(this).val("CONTINUE");
} else {
interval = setInterval("morechars()", 50);
interval_toggle = true;
$(this).val("STOP");
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment