javascript fires if both div have one same class

javascript fires if both div have one same class - javascript

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>

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>

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

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>

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>

Flexbox grow inside anchor

I'm facing a problem where I would like an anchor flexbox child to take all remaining height available. I thought that adding flex-grow: 1 would suffice but it is not working. The div inside the anchor does not take the full height.
Question: Is there a way to make it work without converting my plain anchor to a flexbox element?
Here is a codepen illustrating the issue:
https://codepen.io/alansouzati/pen/YVpYeO
I've created 3 tiles where the first one has the anchor to exemplify. You can see that the price does not align with the other siblings.

.plain is not a flex parent, so setting flex-grow: 1 on .service doesn't do anything.
Just add display: flex to .plain
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
display: flex;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>

See Below. I made the ".service" after the anchor tag absolute and relative to the main container. Hope it helps
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
position: relative;/**Added Code**/
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
}
/**Added Code**/
.plain > .service {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

javascript fires if both div have one same class - javascript

Related

Center div by specific item

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

Display divs in the row on small screens

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

Flexbox grow inside anchor

Categories

Resources