Раздобыл в интернете такой код для генерации аватарки, но он срабатывает только один раз почему то..не пойму что я не так делаю.
уже начал свой код на чистом пхп писать для этого дела, но там тоже загвоздка - не пойму как сделать чтоб цвет аватара сохранялся у юзера.
есть мысли что я неправильно его подключаю - инклудом файл с данным скриптом подключаю.
может надо как то js подключать в хеде как библиотеку?
<div class="user-info">
<div class="user-info-avatar" id="avatar"></div>
<div class="user-info-name" id="name"></div>
</div>
<script>
var stringToColor = function stringToColor(str) {
var hash = 0;
var color = '#';
var i;
var value;
var strLength;
if(!str) {
return color + '333333';
}
strLength = str.length;
for (i = 0; i < strLength; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
for (i = 0; i < 3; i++) {
value = (hash >> (i * 8)) & 0xFF;
color += ('00' + value.toString(16)).substr(-2);
}
return color;
};
var name = '<?="$user"?>'; //здесь вставляю переменную имени юзера из php
var letter = name.substr(0, 1);
var backgroundColor = stringToColor(name);
var elementAvatar = document.getElementById('avatar');
var elementName = document.getElementById('name');
elementName.innerHTML = name;
elementAvatar.innerHTML = letter;
elementAvatar.style.backgroundColor = backgroundColor;
</script>
<style>
.user-info-avatar {
display: inline-block;
width: 28px;
height: 28px;
line-height: 25px;
border-radius: 15px;
text-align: center;
margin-right: 10px;
color: white;
}
.user-info-name {
display: inline-block;
}
</style>
а здесь выходит вот так
