Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html>
<head>
<title>User Initials</title>
<style>
/* Relevant Code */
.person {
display: table;
margin: 24px auto;
}
.person > * {
display: table-cell;
vertical-align: middle;
}
.person-avatarPlaceholder {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid;
line-height: 46px;
text-align: center;
}
.person-avatarPlaceholder.color-0 {
color: #d9566f;
background: rgba(217, 86, 111, 0.15);
}
.person-avatarPlaceholder.color-1 {
color: #56bcd9;
background: rgba(86, 188, 217, 0.15);
}
.person-avatarPlaceholder.color-2 {
color: #7fbb15;
background: rgba(127, 187, 21, 0.15);
}
.person-name {
padding-left: 12px;
}
/* Style */
* {
box-sizing: border-box;
}
body {
color: #4f4f4f;
font-size: 18px;
font-family: "Helvetica Neue", "Segoe UI", "Roboto", sans-serif;
padding: 24px;
text-align: center;
}
input {
-webkit-appearance: none;
border-radius: 0;
border: 1px solid #4f4f4f;
font: inherit;
height: 32px;
line-height: 32px;
padding: 0 8px;
margin: 0;
}
input:focus {
outline: none;
}
input + .btn {
margin-left: -1px;
}
.btn {
cursor: pointer;
display: inline-block;
vertical-align: top;
height: 32px;
line-height: 32px;
padding: 0 8px;
border: 1px solid #4f4f4f;
background: linear-gradient(to bottom, white 0%, #eee 100%);
}
.btn:hover {
background: linear-gradient(to bottom, white 0%, #ddd 100%);
}
.form {
display: table;
margin: 0 auto;
zoom: 1;
}
.form > * {
float: left;
}
.form:before, .form:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.form:after {
clear: both;
}
.serif {
font-family: Georgia, serif;
margin-bottom: 24px;
}
@media (max-width: 767px) {
body {
font-size: 15px;
}
}
</style>
</head>
<body>
<p class="serif">Change the input below and see how the placeholder avatar reacts.</p>
<div class="form">
<input type="text" value="Jerry Primrose" class="js-input"/>
<a class="btn js-submit">Submit</a>
</div>
<div class="person">
<div>
<div class="person-avatarPlaceholder color-1 js-avatarPlaceholder">
<span class="js-initials">JP</span>
</div>
</div>
<div class="person-name js-name">Jerry Primrose</div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
String.prototype.hashCode = function() {
var hash = 0,
i, chr, len;
if (this.length == 0) return hash;
for (i = 0, len = this.length; i < len; i++) {
chr = this.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
};
String.prototype.getInitials = function(glue) {
if (typeof glue == "undefined") {
var glue = true;
}
var initials = this.replace(/[^a-zA-Z- ]/g, "").match(/\b\w/g);
if (glue) {
return initials.join('').substring(0, 2);
}
return initials.substring(0, 2);
};
var numColors = 3;
$('.js-submit').click(function() {
var initials = $('.js-input').val().getInitials();
var hash = Math.abs($('.js-input').val().hashCode()) % numColors;
$('.js-initials').text(initials);
$('.js-name').text($('.js-input').val());
$('.js-avatarPlaceholder').removeClass('color-0').removeClass('color-1').removeClass('color-2').addClass('color-' + hash);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.