Tuesday, 20 December 2016

How do i set profile image as first letters of first and last name




HTML

<span id="firstName">Hemant</span>
<span id="lastName">Vishwakarma</span>
<div id="profileImage"></div>

CSS

#profileImage {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #512DA8;
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 150px;
  margin: 20px 0;
  font-family:Verdana, Geneva, sans-serif;
}


JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  var firstName = $('#firstName').text();
  var lastName = $('#lastName').text();
  var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0);
  var profileImage = $('#profileImage').text(intials);
});
</script>

How do i set profile image as first letters of first and last name

No comments:

Post a Comment