I am currently working on a webpage and I'd like for the images to be filtered based on the button presses. So if I press Holidays, it should only show images with the css class "holiday" assigned to them, etc.
I've already tried the following 2 approaches, but didn't get them to work. Probably a mistake from my side due to lacking a good understanding of javascript.
How to Filter Div Elements by W3Schools
Filtering from Drop Down Menu from a Stack Overflow post.
* {
box-sizing: border-box;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red; /* Just for Display purposes */
}
.row::after {
content: "";
clear: both;
display: table;
}
.button-container {
text-align: center;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.flex-content {
width: 20%;
padding: 5px;
}
<body>
<div class="row">
<div class="col-12">
<h1 style="text-align: center;">Image List</h1>
<div class="button-container">
<button class="button" >All</button>
<button class="button" >Holidays</button>
<button class="button" >Work</button>
</div>
</div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<div class="flex-container">
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content holiday">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content work">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
</div>
</div>
<div class="col-2">
</div>
</div>
</body>
Also on jsfiddle
Here you go with a solution
filterSelection("all")
function filterSelection(c) {
var eles = document.getElementsByClassName("flex-content");
for(var i=0; i < eles.length; i++) {
if (c === "all" || eles[i].classList.contains(c)) {
eles[i].classList.remove("displayNone");
} else {
eles[i].classList.add("displayNone");
}
}
}
* {
box-sizing: border-box;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red; /* Just for Display purposes */
}
.row::after {
content: "";
clear: both;
display: table;
}
.button-container {
text-align: center;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.flex-content {
width: 20%;
padding: 5px;
}
.displayNone {
display: none;
}
<body>
<div class="row">
<div class="col-12">
<h1 style="text-align: center;">Image List</h1>
<div class="button-container">
<button class="btn" onclick="filterSelection('all')" >All</button>
<button class="btn" onclick="filterSelection('holiday')" >Holidays</button>
<button class="btn" onclick="filterSelection('work')" >Work</button>
</div>
</div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<div class="flex-container">
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content holiday">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content work">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
</div>
</div>
<div class="col-2">
</div>
</div>
</body>
Add a onClick method filterSelection to buttons and pass values as argument.
Created a class displayNone for hiding the element.
Solution using jsfiddle
Related
Ok, let's say that I have two buttons, a container with two divs and below I have my footer, like this:
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<footer></footer>
I'm displaying content inside my divs. Div "one" has more height, much more. In order to hide div "two" and don't overlap content, I use opacity:0.
I have two buttons, to show or to hide div "one" or "two" (using jQuery).
But if I only use opacity:0 to hide div "one" when I show div "two", the page leaves a big space empty (due to div "one" has more height than div "two"). As here:
enter image description here
So I decided to use display:none to hide div "one", in order to don't leave space and just show the necessary space for div "two". But my footer goes up!! And overlaps content with div "two".
Here is the image: enter image description here
How can I solve this? Any ideas? I realized that my footer moves because not finding the content of div "one", it goes up. Sorry for my english haha
Here I leave you guys an excelent example of what happens to me, you can COPY and run:
HTML:
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
bt2.click(function(){
cont_all.css('display', 'none');
cont_curses.css('opacity', '1');
});
bt1.click(function(){
cont_curses.css('opacity', '0');
cont_all.css('display', 'flex');
});
h2 {
text-align: center;
font-size: 40px;
}
.container {
margin-top: 50px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: auto;
}
.one {
overflow: hidden;
}
.two {
width: 100%;
position: absolute;
top: 0px;
opacity: 0;
}
.chart {
width: 30%;
height: 200px;
margin: 15px;
background: #2096CE;
}
.curse {
width: 30%;
height: 200px;
margin: 15px;
background: #23AD5A;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h2>Problem with divs</h2>
</header>
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one">
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
</div>
<div class="two">
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
Well it's not the same at all, because it's a big project, but basically is that.
Full answer
check the max-height toggles
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display None</title>
<link rel="stylesheet" href="estilos.css">
<style>
h2 {
text-align: center;
font-size: 40px;
}
.container {
margin-top: 50px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: auto;
overflow: hidden;
}
.chart {
width: 30%;
height: 200px;
margin: 15px;
background: #2096CE;
}
.curse {
width: 30%;
height: 200px;
margin: 15px;
background: #23AD5A;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
</style>
</head>
<body>
<header>
<h2>Problem with divs</h2>
</header>
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one">
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
</div>
<div class="two">
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
bt2.click(function(){
cont_all.css('max-height', '0px');
cont_curses.css('max-height', '100%');
});
bt1.click(function(){
cont_curses.css('max-height', '0px');
cont_all.css('max-height', '100%');
});
</script>
</body>
</html>
I am slightly changed #alexkarpen answer. Instead of max-height you can also use fadeIn() and fadeOut() jquery function. it looks a little bit cool
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
var cont_project = $('.three');
var bt3 = $('#bt3');
bt2.click(function(){
cont_all.fadeOut("slow");
cont_project.fadeOut();
cont_curses.fadeIn("slow");
});
bt3.click(function(){
cont_all.fadeOut();
cont_curses.fadeOut();
cont_project.fadeIn("slow");
});
bt1.click(function(){
cont_curses.fadeIn("slow");
cont_project.fadeIn("slow");
cont_all.fadeIn("slow");
});
.container {
margin-top: 30px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two, .three {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
height: auto;
overflow: hidden;
}
.card {
width: 25%;
height: 200px;
margin: 15px;
}
.chart {
background: #2096CE;
}
.curse {
background: #23AD5A;
}
.project {
background: pink;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bt1">Show All</button>
<button id="bt2">Show Curses</button>
<button id="bt3">Show Projects</button>
<div class="container">
<div class="one">
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
</div>
<div class="two">
<div class="card curse"></div>
<div class="card curse"></div>
<div class="card curse"></div>
</div>
<div class="three">
<div class="card project"></div>
<div class="card project"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
Try this:
footer { height: 200px; background: black; color: white; display: flex; justify-content: center; text-align: center; position:fixed; bottom: 0px; }
I have some flip boxes that need a specific height. Otherwise, it does not work.
I gave them height: 220px; for testing. But this value shouldn't be 220px, it always should be the actual proportional image height.
How is it possible to code that? Maybe with a jQuery function? Like: Get the height of the image, and add it as CSS for the container?
This is my code:
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
height: 220px;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>
This can be possible without JavaScript. It's enough to not specify height for <div> and it will stretch to the height of the image.
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
position: relative;
background-color: #bbb;
color: black;
}
.flip_box_back {
position: absolute;
background-color: dodgerblue;
color: white;
transform: translate(0, -100%) rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>
You can loop through the containers, search for the image and retrieve the height, then assign it back to the container.
jQuery( window ).on( "load", function($) {
$( ".flip_box" ).each(function( index ) {
let imgHeight = $(this).find('img').height();
$(this).css('height', imgHeight + 'px')
});
});
But note that if images have different heights, it might cause a problem because you are only using the height of a single image from the container
After a slight delay of waiting for the photos to load, you can iterate over the flip boxes, locate their images, and set their heights to match the image height.
const resizeFlipBoxes = () => {
document.querySelectorAll('.flip_box').forEach(flipBox => {
flipBox.style.height = `${flipBox.querySelector('img').offsetHeight}px`;
});
};
setTimeout(resizeFlipBoxes, 1);
window.addEventListener('resize', resizeFlipBoxes);
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
i have 5 elements with the classname picked. each element has a div with classname title. i added :after pseudo element for each .title and need to set different background for each pseudo element.
it would be best if it could be done in pure CSS, but i couldn't find anything and maybe it needs javascript.
.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
<div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div>
ps. i have set background: #000; so that they are visible in the preview.
tnx in advance!
.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
.picked:nth-of-type(1) .title:after {
background: red;
}
.picked:nth-of-type(2) .title:after {
background: yellow;
}
.picked:nth-of-type(3) .title:after {
background: green;
}
.picked:nth-of-type(4) .title:after {
background: pink;
}
.picked:nth-of-type(5) .title:after {
background: blue;
}
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
Did you look at :nth-of-type(n)?
.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
.picked:nth-of-type(2) .title:after {
background: red;
}
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
I have included an example for the second child.
.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
.picked:nth-child(2) .title:after {
background: red;
}
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
margin: 5px;
}
.picked:nth-child(1) .title:after {background: red}
.picked:nth-child(2) .title:after {background: green}
.picked:nth-child(3) .title:after {background: blue}
.picked:nth-child(4) .title:after {background: yellow}
.picked:nth-child(5) .title:after {background: orange}
<div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div>
I need to place mail icon and password icon inside the text box, how to align items properly
my js code is:
return (
<div className="container">
<div className="login">
<img src={pacifyr} alt="logo"/>
<img src={Envelope} alt="username"/>
<input placeholder='username' />
<img src={Lock} alt="username"/>
<input placeholder='password' />
</div>
</div>
);
You can use the CSS positions to achieve this (https://developer.mozilla.org/en-US/docs/Web/CSS/position)
return (
<div className="container">
<div className="login">
<img src={pacifyr} alt="logo"/>
<div className="position-relative">
<img className="position-absolute" src={Envelope} alt="username"/>
<input placeholder='username' />
</div>
<div className="position-relative">
<img className="position-absolute" src={Lock} alt="username"/>
<input placeholder='password' />
</div>
</div>
</div>
)
<style>
.position-relative{
position: relative;
}
.position-relative input{
padding: 10px 10px 10px 30px;
}
.position-absolute{
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
</style>
* {
box-sizing: border-box;
}
.row {
margin: 10px 0;
width: 100%;
max-width: 300px;
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
border-radius: 6px;
}
.row .icon {
padding: 7px 10px;
border-right: 1px solid #e0e0e0;
}
.row .icon img {
width: 26px;
height: auto;
display: block;
}
.row input {
border: none;
outline: none;
padding-left: 20px;
}
<div class="row">
<div class="icon">
<img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
</div>
<input type="text" placeholder="Email/Username">
</div>
<div class="row">
<div class="icon">
<img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
</div>
<input type="text" placeholder="Password">
</div>
You can use flexbox for layout
<div className="container">
<div className="login">
<div className="row">
<img alt="logo"/>
</div>
<div className="row">
<img className="icon" alt="username"/>
<input placeholder="username" className="field"/>
</div>
<div className="row">
<img className="icon" alt="password"/>
<input placeholder="password" className="field"/>
</div>
</div>
</div>
And flexbox style need to be like below
.login {
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.row {
margin: 10px;
display: flex;
flex-direction: row;
height: 30px;
justify-content: center;
}
.icon {
width: 50px;
}
.field {
flex: 1;
}
HTML:
<div class="wrapper">
<div class="scrolls">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
</div>
</div>
CSS:
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.imageDiv img {
margin: 2px;
max-height: 100px;
cursor: pointer;
display: inline;
*display:inline;
*zoom:1;
vertical-align:top;
}
This is the result:
qshg7muq9vam.png http://jsfiddle.net/masgp4fg/
But I want to text "aruturek" was under the image, and is centered.
______________
| |
| |
| HEAD | and more...
| |
| |
______________
NICK
How I can position this?
Sorry for my english, I am from Poland! D:
Fiddle here: http://jsfiddle.net/masgp4fg/
Try this css:
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.scrolls div{
display: inline-block;
margin-right: 2em;
margin-left: 2em;
}
.imageDiv img {
margin: 2px;
max-height: 100px;
cursor: pointer;
display: inline;
*display:inline;
*zoom:1;
vertical-align:top;
}
And this html:
<div class="wrapper">
<div class="scrolls">
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
</div>
</div>
JSfiddle example here: http://jsfiddle.net/btz4sfsr/
You can update your html and css as per the below fiddle.
http://jsfiddle.net/kiranvarthi/v859mz30/
.scrolls .imagediv {
height: 150px;
float: left;
}
Your english is much better than my Polish
Just make a div for your images and the description.
<style>
.avatar {text-align:center;}
.avatarname {}
</style>
<div class="wrapper">
<div class="scrolls">
<div class="avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="avatarname">
aruturek
</div>
</div>
...
Put your image and name in a div floating left, and add a br between img and name :
HTML:
<div class="wrapper">
<div class="scrolls">
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
</div>
</div>
CSS (add this class):
.one-avatar {
float:left;
}
JSFIDDLE UPDATED : http://jsfiddle.net/ghorg12110/masgp4fg/3/
Is this what you want?
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.cont {
float: left;
padding: 10px;
}
<div class="wrapper">
<div class="scrolls">
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
</div>
</div>