How can I get first letter of each word in Jquery? - javascript

I have multiple Names & I want to get first letter or each word. How can I do this?
My Code:-
$('.testimonial-box').each(function(){
let clientNameFirstLetter = $(this).find('.client-name').text();
let clientNameSecondLetter = $(this).find('.client-name').text();
let clientNameBothLetters = clientNameFirstLetter.charAt(0) + clientNameSecondLetter.charAt(0);
$(this).find('.img-circle').text(clientNameBothLetters);
});
.testimonial-sectiioin{ display:flex; gap:45px;}
.testimonial-sectiioin .testimonial-box .img-circle {
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50%;
font-size: 55px;
font-family: proximaNovaBold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="testimonial-sectiioin">
<div class="testimonial-box">
<div class="img-circle"></div>
<p class="client-name">Rohit Verma</p>
</div>
<div class="testimonial-box">
<div class="img-circle"></div>
<p class="client-name">Vipin Kumar Verma</p>
</div>
<div class="testimonial-box">
<div class="img-circle"></div>
<p class="client-name">Neha Aggarwal</p>
</div>
</section>
ThankYou!

You can use split to split the text based on the space. So you will get your first name and second name.
So you can take the first letters of both words. Easy.
If you have more than 2 words in the name, you can use a map/forEach to get each letter's.
$('.testimonial-box').each(function(){
let clientName = $(this).find('.client-name').text();
let clientNameBothLetters = clientName.split(" ")[0][0]
+ clientName.split(" ")[clientName.split(" ").length - 1][0];
$(this).find('.img-circle').text(clientNameBothLetters);
});
.testimonial-sectiioin{ display:flex; gap:45px;}
.testimonial-sectiioin .testimonial-box .img-circle {
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50%;
font-size: 55px;
font-family: proximaNovaBold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="testimonial-sectiioin">
<div class="testimonial-box">
<div class="img-circle"></div>
<p class="client-name">Rohit Verma</p>
</div>
<div class="testimonial-box">
<div class="img-circle"></div>
<p class="client-name">Vipin Kumar Verma</p>
</div>
<div class="testimonial-box">
<div class="img-circle"></div>
<p class="client-name">Neha Aggarwal</p>
</div>
</section>
EDIT
As per the request, the snippet updated in a way that only two letters will be shown in the img-circle. So for "Vipin Kumar Verma", it will be "VV".

$('.testimonial-box').each(function(){
// Get client name
let clientName = $(this).find('.client-name').text();
// Create an array with words inside the name
let splittedName = clientName.split(' ');
// Now let's loop all words and save the first letter
var name = ''
splittedName.forEach(n => {
name += n[0]
})
// Set name to current image circle
$(this).find('.img-circle').text(name);
});
.testimonial-sectiioin{ display:flex; gap:45px;}
.testimonial-sectiioin .testimonial-box .img-circle {
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50%;
font-size: 55px;
font-family: proximaNovaBold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="testimonial-sectiioin">
<div class="testimonial-box">
<div class="img-circle"></div>
<p class="client-name">Rohit Verma</p>
</div>
<div class="testimonial-box">
<div class="img-circle"></div>
<p class="client-name">Vipin Kumar Verma</p>
</div>
<div class="testimonial-box">
<div class="img-circle"></div>
<p class="client-name">Neha Aggarwal</p>
</div>
</section>

Related

Center div by specific item

Is it possible to center not the whole child-container div but by an specific item. The content of the first p and last p have different heights and can change dynamically.
.container {
display:flex;
align-items: center;
height: 300px;
background-color: red;
}
.child-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: purple;
}
.big{
line-height:40px;
}
.bigger{
line-height:80px;
}
<div class="container">
<div class="child-container">
<p class="big">Lorem ipsum</p>
<p>Center this</p>
<p class="bigger">Lorem ipsum</p>
</div>
</div>
Give the child container a position of relative and the center paragraph absolute. Then give the center paragraph a margin top and bottom of 50vh:
.container {
display:flex;
align-items: center;
height: 300px;
background-color: red;
}
.child-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: purple;
position: relative;
}
.big{
line-height:40px;
}
.bigger{
line-height:80px;
}
.center {
position: absolute;
margin-top: 50vh;
margin-bottom: 50vh;
}
<div class="container">
<div class="child-container">
<p class="big">Lorem ipsum</p>
<p class="center">Center this</p>
<p class="bigger">Lorem ipsum</p>
</div>
</div>
Assuming you mean center horizontally, you just need to expand the child container with flex-grow and use align-self on your chosen child:
.container {
display: flex;
align-items: center;
height: 300px;
background-color: red;
}
.child-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: purple;
flex-grow: 1;
align-items: flex-start;
}
.child-container * {
background-color: greenyellow;
}
.big {
line-height: 40px;
}
.bigger {
line-height: 80px;
}
.center {
align-self: center;
}
<div class="container">
<div class="child-container">
<p class="big">Lorem ipsum</p>
<p class="center">Center this</p>
<p class="bigger">Lorem ipsum</p>
</div>
</div>

all containers remove themselves instead of one at a time

Sorry, I repost the problem:
I want to remove a single container when their border right x become inferior to the border left x of their parent. It work fine with visibility hidden, but not with remove() as it remove all the containers.
Here the complete code of the problem...
Here is the JavaScript, for what the result is unexpected
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
//container.style.visibility = "hidden"; // work fine
//container.style.display = "none"; // hide all the container
container.remove() // remove all the container
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
If you remove() the most left container, the other contains will move over to fill the gap that is there by removing the previous containers.
When they move, they instantly match your if, and therefore they are removed them self.
Fix 1
Use justify-content: flex-end; on the .division so that the containers are aligned from the end of the box, so it won't overlap if you remove any of them. This way remove() will work as expected
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
container.remove();
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
justify-content: flex-end;
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Fix 2
Using style.visibility = "hidden" is your best option, if you don't want to change the HTML/CSS to prevent the moving of the containers when you remove() one.
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
container.style.visibility = "hidden"; // work fine
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>

Display divs in the row on small screens

I am trying to display these divs with flex. But when the width of the screen gets less then approximately 500px I see only one div on the row. How to keep 2 divs on the row when the width of the screen gets less than it was before?
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.wrapper {
margin: 20px;
background: beige;
border-radius: 15px;
}
.divla{
margin: 15px;
}
#media(max-width:500px) {
.box{
width: 50%;
}
<div class="box">
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
</div> `
Please use nowrap instead of wrap in flex-wrap property.
.box {
display: flex;
flex-wrap: nowrap;
align-content: space-between;
}
You can also remove flex-wrap: nowrap; from the class as nowrap is set by default.
.box {
display: flex;
align-content: space-between;
}

How can i move a small text on 2 lines, without using 1 div only

How can I make "This text" to be on 2 lines, and center it next to the circle, also put the arrow between first and second circle
https://i.stack.imgur.com/2wfVy.png
<div className="steps">
<div className="circle">
<div className="step-number">{number}</div>
</div>
<div className="step-text">This text</div>
<div>{ shouldRenderArrow && <Icon className="arrow" name="ArrowDownward" /> }</div>
</div>
Some change require in your div and some styling need then you got.
.steps{
display: flex;
}
.circle {
border: 1px solid red;
border-radius: 50px;
float: left;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.step-text {
align-self: self-start;
justify-self: start;
flex-direction: column;
margin-left: 6px;
padding-top: 6px;
}
.arrow{
border: 1px solid;
width: 11px;
display: flex;
align-self: center;
justify-self: flex-end;
height:25px
}
.circle-arrow {
display: flex;
flex-direction: column;
}
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">1</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">2</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">3</div>
</div>
</div>
<div class="step-text">This text</div>
</div>

javascript fires if both div have one same class

Suppose, i have 2 div 'menu' & 'pipe'. when i click menu pipe's width will be 100% but here i have 6 pair same like this so affecting one will affect all. "main code is given bellow."
now here i want js like this,
addclass 'addwidth' in pipe div but that pipe div have one same class form the object(here, menu div) form which the click event is happen,
eg. menu one div is clicked so only pipe one div have to be affected.
.hasClass can help in some way but i dont know how.
help me for it's js,thanks in advance.
.leftbox{
width:100px;
height:400px;
background-color:lightgreen;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.uprow{
width:100px;
height:100%;
background-color:pink;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.menu{
width:50px;
height:50px;
background-color:yellow;
}
.selected{
background-color:green;
border:2px solid blue;
}
.downrow{
width:100%;
height:100%;
background-color:gray;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.pipe{
width:10%;
height:5px;
background-color:aqua;
}
<div class="leftbox">
<div class="uprow">
<div class="menu one"></div>
<div class="menu two"></div>
<div class="menu three"></div>
<div class="menu four"></div>
<div class="menu five"></div>
<div class="menu six"></div>
</div>
<div class="downrow">
<div class="pipe one"></div>
<div class="pipe two"></div>
<div class="pipe three"></div>
<div class="pipe four"></div>
<div class="pipe five"></div>
<div class="pipe six"></div>
</div>
</div>
Use .eq() with .index()
$('.uprow .menu').on('click', function() {
$('.downrow .pipe').eq($(this).index()).css('width', '100%')
})
.leftbox {
width: 100px;
height: 400px;
background-color: lightgreen;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.uprow {
width: 100px;
height: 100%;
background-color: pink;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.menu {
width: 50px;
height: 50px;
background-color: yellow;
}
.selected {
background-color: green;
border: 2px solid blue;
}
.downrow {
width: 100%;
height: 100%;
background-color: gray;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.pipe {
width: 10%;
height: 5px;
background-color: aqua;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="leftbox">
<div class="uprow">
<div class="menu one"></div>
<div class="menu two"></div>
<div class="menu three"></div>
<div class="menu four"></div>
<div class="menu five"></div>
<div class="menu six"></div>
</div>
<div class="downrow">
<div class="pipe one"></div>
<div class="pipe two"></div>
<div class="pipe three"></div>
<div class="pipe four"></div>
<div class="pipe five"></div>
<div class="pipe six"></div>
</div>
</div>
You can use the click event of the selected element like below.
In below example, clicking any element will change the width to 100% for that element only.
$(function() {
$('.pipe').click(function() {
/* $(this) is the clicked/selected object. */
/* Do your required action using $(this). Below is an example */
$(this).css('width', '100%');
});
});
.leftbox {
width: 100px;
height: 400px;
background-color: lightgreen;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.uprow {
width: 100px;
height: 100%;
background-color: pink;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.menu {
width: 50px;
height: 50px;
background-color: yellow;
}
.selected {
background-color: green;
border: 2px solid blue;
}
.downrow {
width: 100%;
height: 100%;
background-color: gray;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.pipe {
width: 10%;
height: 5px;
background-color: aqua;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leftbox">
<div class="uprow">
<div class="menu one"></div>
<div class="menu two"></div>
<div class="menu three"></div>
<div class="menu four"></div>
<div class="menu five"></div>
<div class="menu six"></div>
</div>
<div class="downrow">
<div class="pipe one"></div>
<div class="pipe two"></div>
<div class="pipe three"></div>
<div class="pipe four"></div>
<div class="pipe five"></div>
<div class="pipe six"></div>
</div>
</div>

Categories

Resources