Skip to content

Instantly share code, notes, and snippets.

@ricardozea
Created July 9, 2017 03:56
Show Gist options
  • Save ricardozea/2803cf583a9f5e81000490bea8c8869f to your computer and use it in GitHub Desktop.
Save ricardozea/2803cf583a9f5e81000490bea8c8869f to your computer and use it in GitHub Desktop.
Snippet to make the text between 45 and 75 characters turn red. Created by Chris Coyier: https://codepen.io/chriscoyier/pen/atebf
<a class="btn-character-count" href="javascript:(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js',function(){
var redOutline={outline:'2px solid red'},text;var textyElements='p, li, dt, dd, h1, h2, h3, h4, h5, h6';$(textyElements).on('mouseover.red',function(){$(this).css(redOutline)}).on('mouseleave.red',function(){$(this).removeAttr('style')}).on('click.red',function(){text=$(this).text();var e=text.substring(0,45);var t=text.substring(45,75);var n=text.substring(75,text.length);var r=e+'<span style=\'color: red;\'>'+t+'</span>'+n;$(this).html(r);$(textyElements).off('mouseover.red mouseleave.red click.red');$(this).removeAttr('style');})
})})()">45-75</a>
<style>
.btn-character-count {
border-radius: 4px;
background: linear-gradient(#eee, #ccc);
padding: 5px 10px;
border: 1px solid #999;
color: #222;
text-decoration: none;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment