"Insert" image horizontally on button click - javascript

So here is what I am trying to achieve. I want to have an image centered in the middle of the page, and when a button is clicked, a second image, horizontally aligned with the 1st, will appear next to it (with even spacing between them).
Right now I have the code to get them aligned next to each other working fine.
HTML:
div class="quiz">
<div class="column">
<span id="img1label" class="word"></span>
<img id="img1" class="imgs"/>
</div>
<div class="column">
<span id="img2label" class="word"></span>
<img id="img2" alt="quiz image" class="imgs"/>
</div>
</div>
CSS:
.quiz {
display: flex;
flex-direction: row;
flex-grow: 1;
margin: auto;
}
.column{
display:flex;
justify-content:center;
flex-direction: column;
flex-grow: 1;
}
.imgs{
display:block;
width:50%;
}
.word{
display:block;
width: 100%;
text-align:center;
}
The JS at the moment isn't really much worth showing, right now I have it so that img2 is a pure white image, on button click it just swaps images.
The problems with this:
The initial image is not centered, its put all the way to the left.
The insertion of a new image isn't really an insertion, so nothing changes in layout to adjust the margins to center two new images.
I tried using the image grid tutorial here: https://www.w3schools.com/howto/howto_js_image_grid.asp
But I don't want to resize my actual images. I just want them to move further apart when the number of images being displayed changes. I am not using JQuery right now, and I'd prefer to not have to learn how to use a whole new package for what seems to be a simple problem that I'm struggling with. Any help is appreciated.

How I understand, you should add alignments in your .quiz class
.quiz {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
margin: auto;
}
then your items in this block will be aligned. And if you want to add space between images just add margin on them.

Related

How do I fit header and img in div with set width and height with flex?

I have an assignment where I need to fit an image and header into a div with a fixed width that changes heights every time. It needs to look like the screenshot below, but I have no idea how to get that look.
The sections are where the flexbox starts and I organized the child elements to appear like they should, but everything inside of that, I can't get to work.
HTML
<main class="card-grid">
<section class="row-grid"></section>
<section class="col-grid">
<div class="card" style="width: 200px; height: 280px;">
<img src="littlecolorado.jpg">
<h2>Another card</h2></div>
</section>
</main>
CSS
.col-grid {
display: flex;
flex-flow: column wrap;
gap: 20px;
height: 2000px;
}
.col-grid div img {
width: 200px;
}
.col-grid div h2 {
display: block;
}
My file:
What it should look like:
Just setting the height of the image to 100% should do it. That means the image will take up 100% of the available space. If you want more direct control of the growth and shrinking of the children use flex-shrink and flex-grow.
https://codepen.io/gallagher7788/pen/bGLRGLx
https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/
Note: height:100%;width:100% will distort your image, but thats how the example you included did it. You could create a div with a background image and use background-size:cover to crop the image.

center thumbs in splidejs image gallery

I am working on a Thumbnail Slider like here:
https://splidejs.com/tutorials/thumbnail-slider/
on big screens the thumbs are left aligned.
I tried to center them.
see https://codepen.io/caplod/pen/ExboPyP
but then the first one gets cut off on small screens.
#thumb .splide__list {
justify-content: center
}
how can I fix this?
Add code align-items:center;
#thumb .splide__list {
justify-content: center;
align-items:center;
}

Clickable Element under Overlay - HTML/CSS

so I am currently working on a web-app with a nav-bar on the bottom. I decided to have a linear-gradient overlay above the underlying elements in order to make the menu more visible.
You can see in this screenshot what I mean, I think.
Now I faced the problem that when an item I want to be clickable is just below that, one can obviously not click that. I can't change the z-index since that would defeat the whole purpose of the overlay.
The Overlay is just a background applied to the menu div, which is located at the very bottom in the dom.
Its CSS:
div{
display: flex;
align-items: center;
justify-content: space-around;
position: sticky;
bottom: 0;
padding: 5em 0 1em 0;
background: linear-gradient(var(--opaque-main-background), var(--main-background));
}
All the other elements, including those I want to be clickable have no particular positioning. It's a vue app, so if you need any more information I forgot, here is a live demo. You may have to resize the window for the issue to kick in
Is there any basic/simple solution to this problem I am just not seeing right now?
ok. here is a solution.
add pointer-event:none to this menu div above in css.
then to each span add a pointer-event: auto like this:
span[data-v-4fb6fd22] {
position: relative;
pointer-events: auto;
}
You can use pointer-events here. Just add pointer-events:none to your css for div
div{
pointer-events:none;
display: flex;
align-items: center;
justify-content: space-around;
position: sticky;
bottom: 0;
padding: 5em 0 1em 0;
background: linear-gradient(var(--opaque-main-background), var(--main-background));
}
Hope it helps.

Javascript for altering padding in css

I've encountered a problem while coding my website row by row. For specifying products I have made small slideshows for every one of them, but I have a hard time centering the images vertically due to some pictures are standing and some are laying down. I use "text-align: center" for horisontall centering, but since the pictures heights varies I've been trying to use js.
Here's how far I've come trying to code a script that calculates the top-padding depending on how high the image is:
function padding(nr) {
var heightPX = document.getElementsByClassName("IMG"+nr).clientHeight;
document.getElementById("frame"+nr).style.paddingTop = ((290-s)/2);
}
290 is the maximum height, so 290-s is what's left over, and then divided by 2 for the same space over and under.. You get the idea, this isn't working though.
Help pls
You can center an element vertically using a combination of display: flex; align-items: center; on the parent element. There are other techniques covered here https://www.w3.org/Style/Examples/007/center.en.html
img {
max-height: 50vh;
}
div {
height: 100vh;
background: #333;
display: flex;
justify-content: center;
align-items: center;
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

how to get an image to display at the bottom of a div

I have a div 100% of the screen height, top of the DIV is a table...Idea being then white space with a image at the bottom of the DIV. When I add the image it appears directly under the table, as opposed to the bottom of the page. How can I fix this? I have tried many things from searching in google...
display:block
margin:0 auto;
bototm:0px
but no joy, does anyone have any ideas? thanks
Add position: relative to parent div then add position: absolute; bottom:0px; to the image. This works in most cases but your could be different since you haven't posted the full code. Ps you have a typo bottom
Codepen http://codepen.io/noobskie/pen/epEPYw
Flexbox is one way of doing it: http://codepen.io/zvona/pen/BodqBY
HTML:
<div>
<img src='...' />
</div>
CSS:
div {
display: flex;
flex-direction: row;
}
img {
align-self: flex-end;
}

Categories

Resources