I try to add/remove -Class with on click event through data-attribute to another div.
When I click to TExt 2 the first FLAF 1 display none; And DOT should change the background. The TExt should be bind with FLAG and DOT elements above.
I've already the selected and active classes.
//plans secetor
var familyTariffSelected = '.boxy';
var builderCheckoutSteP = '.container .box';
var familyTariffSelectedData = $('.builder-tariff-family.selected').attr('data-selected');
var builderCheckoutStePData = $('.builder-checkout-steps .step.active').attr('data-selected');
$(familyTariffSelected).on('click', function() {
$(familyTariffSelected).removeClass('selected');
$(this).addClass('selected');
});
.container{
border: 2px black dotted;
display: flex;
justify-content: space-between;
}
.event-box{
display:flex;
margin: 20px 0;
background-color: gray;
justify-content: space-between;
}
.container .box .flag{
display:none;
}
.container .box .dot{
border: 1px solid green;
color:black;
}
.container .box.active .flag{
display: block;
background-color: green;
color:white;
}
.container .box.active .dot {
background-color: green;
color:white;
}
.boxy {
background-color: yellow;
cursor:pointer;
}
.boxy.selected {
background-color: #64B246;
}
<div class="container">
<div class="box active" data-selected="dalib-1"><p class="flag">FLAG 1</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-2"><p class="flag">FLAG 2</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-3"><p class="flag">FLAG 3</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-4"><p class="flag">FLAG 4</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-5"><p class="flag">FLAG 5</p> <span class=" dot">DOT</span></div>
</div>
<div class="event-box">
<div class="boxy" data-selected="dalib-1">TExt 1</div>
<div class="boxy" data-selected="dalib-2">TExt 2</div>
<div class="boxy" data-selected="dalib-3">Text 3</div>
<div class="boxy" data-selected="dalib-4">Text 4</div>
<div class="boxy" data-selected="dalib-5">TExt 5</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
It's a lot easier when you don't complicate it?
You have to get the data attribute inside the event handler, and then just target the .box with the same data attribute
$('.boxy').on('click', function() {
$('.boxy').removeClass('selected');
$(this).addClass('selected');
$('.box').removeClass('active')
.filter('[data-selected="' + $(this).data('selected') + '"]')
.addClass('active');
});
.container {
border: 2px black dotted;
display: flex;
justify-content: space-between;
}
.event-box {
display: flex;
margin: 20px 0;
background-color: gray;
justify-content: space-between;
}
.container .box .flag {
display: none;
}
.container .box .dot {
border: 1px solid green;
color: black;
}
.container .box.active .flag {
display: block;
background-color: green;
color: white;
}
.container .box.active .dot {
background-color: green;
color: white;
}
.boxy {
background-color: yellow;
cursor: pointer;
}
.boxy.selected {
background-color: #64B246;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box active" data-selected="dalib-1">
<p class="flag">FLAG 1</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-2">
<p class="flag">FLAG 2</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-3">
<p class="flag">FLAG 3</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-4">
<p class="flag">FLAG 4</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-5">
<p class="flag">FLAG 5</p> <span class=" dot">DOT</span></div>
</div>
<div class="event-box">
<div class="boxy" data-selected="dalib-1">TExt 1</div>
<div class="boxy" data-selected="dalib-2">TExt 2</div>
<div class="boxy" data-selected="dalib-3">Text 3</div>
<div class="boxy" data-selected="dalib-4">Text 4</div>
<div class="boxy" data-selected="dalib-5">TExt 5</div>
</div>
Related
I'm struggling to get my table data to be directly underneath my table headers it's currently looking like this on inspection:
enter image description here
this is what it looks like with a space around
, but how can I make it more centered?
I give you an example for your reference:
/* DivTable.com */
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"> cxvv</div>
<div class="divTableCell"> xcvxcv</div>
<div class="divTableCell"> xcvx</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> vxvx</div>
<div class="divTableCell"> wewrwe</div>
<div class="divTableCell"> xcvxv</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> xxcvxcv</div>
<div class="divTableCell"> dsf</div>
<div class="divTableCell"> sdf</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> vfsdf</div>
<div class="divTableCell"> sdfsf</div>
<div class="divTableCell"> dsfsdf</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> cxvxcv</div>
<div class="divTableCell"> sdfsf</div>
<div class="divTableCell"> sdf</div>
</div>
</div>
</div>
You can browse the web site to generate the div table.
This is a pure flexbox example:
.cell,
.cellEnd,
.cellTail,
.container,
.headerRow,
.row {
display: flex;
flex-grow: 1;
}
.cell,
.cellEnd,
.cellTail {
border-top: 1px solid black;
border-left: 1px solid black;
}
.cellBottom {
border-bottom: 1px solid black;
}
.cellEnd {
border-bottom: 1px solid black;
}
.cellEnd,
.cellTail {
border-right: 1px solid black;
}
.container {
flex-direction: column;
}
.headerRow .cell,
.headerRow .cellTail {
font-weight: bold;
justify-content: center;
}
.row .cell,
.row .cellEnd {
padding: 3px;
}
<div class="container">
<div class="headerRow">
<div class="cell">
1
</div>
<div class="cell">
2
</div>
<div class="cellTail">
3
</div>
</div>
<div class="row">
<div class="cell cellBottom">
1000
</div>
<div class="cell cellBottom">
2000
</div>
<div class="cellEnd">
3000
</div>
</div>
</div>
Well, i tried to create a layout like instagram and faced the following problem. I hope i'll get help from experts in this regard. And i tried various ways to remove the active class after clicking on the nav tab , but everytime there arose a problem. let me know how can i remove the active class from this piece of javascript as attached below.
<div class="menu">
<p data-target="#initial" class="active">Initial</p>
<p data-target="#product">Product</p>
<p data-target="#contact">Contact</p>
</div>
<div class="content">
<div data-content id="initial" class="active">
<div class="cards">
<div class="card">
abc
</div>
<div class="card">
abc
</div>
<div class="card">
abc
</div>
</div>
</div>
<div data-content id="product">
<div class="cards">
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
</div>
</div>
<div data-content id="contact">
<div class="cards">
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
</div>
</div>
</div>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Sans-serif;
}
body{
padding: 5%;
}
.menu{
display:flex;
}
.menu p{
margin-right: 2rem;
cursor: pointer;
}
.content{
margin-top:2rem;
}
[data-content]{
display:none;
}
.active[data-content]{
display:block;
}
.menu .active{
text-transform:uppercase;
color:#FFF;
background: #000;
padding: 5px 10px;
margin-top: -5px;
border-radius: 50px;
}
.menu p{
text-transform:uppercase;
}
.cards{
display:flex;
flex:1;
flex-basis: 33.33%;
max-width: 33.33%;
min-width: 33.33%;
height: 100%;
position: relative;
}
.card{
border: 1px solid #ccc;
background: #fff;
}
const targets = document.querySelectorAll('[data-target]');
const content = document.querySelectorAll('[data-content]');
targets.forEach(target => {
target.addEventListener('click',()=>{
content.forEach(c => {
c.classList.remove('active')
})
const t = document.querySelector(target.dataset.target)
t.classList.add('active');
target.classList.add('active');
})
})
Your javascript code is almost working, but there are typos in contents instead content. That typo makes javascript returns an error and the code below doesn't be executed. And you can remove the active class from that tab by targets.forEach(...
const targets = document.querySelectorAll('[data-target]');
const contents = document.querySelectorAll('[data-content]');
targets.forEach(target => {
target.addEventListener('click',()=>{
targets.forEach(t => {
t.classList.remove('active')
})
contents.forEach(c => {
c.classList.remove('active')
})
const t = document.querySelector(target.dataset.target)
t.classList.add('active');
target.classList.add('active');
})
})
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Sans-serif;
}
body{
padding: 5%;
}
.menu{
display:flex;
}
.menu p{
margin-right: 2rem;
cursor: pointer;
}
.content{
margin-top:2rem;
}
[data-content]{
display:none;
}
.active[data-content]{
display:block;
}
.menu .active{
text-transform:uppercase;
color:#FFF;
background: #000;
padding: 5px 10px;
margin-top: -5px;
border-radius: 50px;
}
.menu p{
text-transform:uppercase;
}
.cards{
display:flex;
flex:1;
flex-basis: 33.33%;
max-width: 33.33%;
min-width: 33.33%;
height: 100%;
position: relative;
}
.card{
border: 1px solid #ccc;
background: #fff;
}
<div class="menu">
<p data-target="#initial" class="active">Initial</p>
<p data-target="#product">Product</p>
<p data-target="#contact">Contact</p>
</div>
<div class="content">
<div data-content id="initial" class="active">
<div class="cards">
<div class="card">
abc
</div>
<div class="card">
abc
</div>
<div class="card">
abc
</div>
</div>
</div>
<div data-content id="product">
<div class="cards">
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
</div>
</div>
<div data-content id="contact">
<div class="cards">
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
</div>
</div>
</div>
You can use classList.remove()
Example:
var element = document.getElementById("targetid");
element.classList.remove("active");
More documentation
I'm using this html below to display a flex view on my website. But changing the text (length of the text) from a div will lead to the crazy-looking autoresizing.
How can I avoid this resizing in relation to this special div element below? How to keep the same layout when the click button is clicked?
Edit: I would like that neither the size nor the position of any element changes. (No matter how much text is inside!)
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
.wrapper{
width:100%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
}
.wrapper > div{
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="wrapper">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
Here's the solution:
document.addEventListener("click", function(e){
if(e.target.id == "button")
document.getElementById('text').innerHTML+='.';
});
#navigation {
position: fixed;
width: 100%;
height: 30%;
left: 0%;
top: 0%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
flex-basis: 1 1 100%;
}
#navigation > div {
flex-direction: column;
overflow: hidden;
width: 100%;
}
#button {
position: relative;
}
<div id="navigation">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<button id="button">click</button>
Edit: To lock the tekst as well. I would do it with align it left and than adding a padding to it:
#navigation > div > div:nth-child(2) {
padding-left: 10%;
text-align: left;
}
Add flex: 1 0 33%; to the elements you don't want to resize. This is equivalent to:
flex-grow: 1;
flex-shrink: 0;
flex-basis: 33%;
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
Here's an example of using max-width with your code. The first block will never be wider than 150px and text which which will overflow will be hidden.
.wrapper{
width:100%; background: black; display: flex; justify-content: space-around; text-align: center; color: white;
}
.wrapper > div{
flex: 1;
text-overflow:ellipsis;
overflow:hidden;
}
<div class="wrapper">
<div style="max-width: 150px">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
I have a flexbox container where the items on each row overflow, and go onto the next line. Each item is aligned to a baseline; hence, the rows can be of varying sizes depending on which items are on which row and how they align to their baseline.
The items are pictured below being centered at a baseline:
I was wondering if there was a way to dynamically get the row height? Or get the distance from each item's baseline to the top/bottom of the row?
I would like to do this so i can set a hover state around the items that allow the hover to stretch over the item and have the height go all the way to the top of each row, hence the hover for each items will look as follows:
my attempt:
codepen
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
I was able to make the hover effect same height on all items by changing
.flex-container {
align-items: baseline
}
to
.flex-container {
align-items: strech
}
then I added the following lines to make items align vertically:
.flex-item {
display: flex;
align-items: center;
}
However, your original code is aligning these items "baseline" instead of "center".. I didn't figure out how to do that.
Hope this helps.
codepen: https://codepen.io/bottlecap/pen/pEgbNx
Try plugging this into codepen.
html
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
css
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
outline:1px solid red;
height:62vh;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 400px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
flex-direction:column;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
I want to make so that each 3 elements (top, middle and bottom) of my polygon changes color when you hover over it. I would normally do it with css: xxx:hover but since it involves 3 different elements that need to change at the same time, I can only assume that I need take a different approach. I assume some sort of javascript? Ideas?
CODEPEN: http://codepen.io/anon/pen/shfge
HTML
<div class="hex-row even">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
<div class="hex-row">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
CSS:
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
.hex:hover {
cursor: pointer;
}
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 104px;
height: 60px;
background: #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}
Not too hard, just target the .hex container and it's children like so:
.hex:hover .top {
border-bottom-color: red;
}
.hex:hover .middle {
background: Red;
}
.hex:hover .bottom {
border-top-color: red;
}
http://codepen.io/anon/pen/GboDw