Skip to content

Instantly share code, notes, and snippets.

@adactio

adactio/lettering.html

Created January 26, 2012 11:35
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save adactio/1682367 to your computer and use it in GitHub Desktop.
Save adactio/1682367 to your computer and use it in GitHub Desktop.
Download ZIP
A quick'n'dirty way of doing some lettering.js stuff without jQuery.
Raw
lettering.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.slogan span:nth-child(odd) {
color: red;
}
</style>
</head>
<body>
<span class="slogan">Testing</span>
<script>
function sliceString(selector) {
if (!document.querySelector) return;
var string = document.querySelector(selector).innerText,
total = string.length,
html = '';
for (var i=0; i<total; i++) {
var letter = string.charAt(i);
html+= '<span class="'+letter+'">'+letter+'</span>';
}
document.querySelector(selector).innerHTML = html;
}
sliceString('.slogan');
</script>
</body>
</html>
@aamarks
Copy link

aamarks commented Jul 24, 2015

Thanks! One problem though, to get your example to work in FireFox I had to change innerText to innerHTML: var string = document.querySelector(selector).innerText

I don't know much javascript so not sure if that would cause other problems...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment