Remove a class when two divs overlap - javascript

I have used flexbox to center my content vertically inside of 'main' tag, however when too much content is added it spills over into the 'header'. Is there a way I can calculate that if the div goes above a certain vertical position on screen (256px - height set as header), it removes a class from the 'main' (currently set to .vertical).
I know that the .removeClass() removes the class, but I dont know where to start with the vertical position calculation.
HTML
<header>Nav</header>
<main class="vertical">A lot of text here</main>
CSS
body, html{margin:0; height:100%}
header{width:100%; height:256px; background:red;}
main{width:100%; height: calc(100% - 256px); background:#fff;}
.vertical{
display: flex;
flex-direction: column;
justify-content: center;
}
Fiddle
I do hope that makes sense.
Many thanks Thanks.

I may misunderstand your goal, but it doesn't seem like you need to calculate the position on the screen. Since you have a Nav bar, it should always be visible and the content shouldn't overlap. I made a few changes to your code that allows the content to always sit underneath the header using justify-content: flex-start.
body, html {
margin: 0;
height: 100%
}
header {
display: block;
width: 100%;
height: 256px;
background: red;
}
main {
width: 100%;
height: 100%;
background: #fff;
}
.vertical{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
If you still want to align the text differently, you could nest the content within another tag inside .vertical. Like so:
<header>Nav</header>
<main class="vertical">
<p class="content">all the text...</p>
</main>
And then add vertical styles to the .content section.

Related

Using a media query with viewheight to fix footer

I am trying to create my own website with a basic structure (header, main and footer) but when there are not enough elements to fill the height of the screen, footer is not placed at the bottom.
To fix that problem I used these lines:
footer {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
but now that there are enough elements and should be scroll, the footer still fixed (what is obvious) so I am trying to create a media query to change footer's css when the height of the body is larger than 100vh - and it is not working and I do not know why. How can I fix it?
#media screen and (min-width: 100vh) {
footer {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
}
I know that I could choose any of them depending on the final structure but meanwhile I would like to forget about having to change the footer's css manually.
Thank you in advance.
I understand what you need to make and I offer you to use flex on container.
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
If you use this structure, add below styles then you will never need to add position fixed and media query to footer.
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
To make <body> fill the whole page vertically:
html {
height: 100% /*of viewport's height*/;
}
body {
/* At least 100%;
* allows vertical scrollbars if content overflows
*/
min-height: 100%;
/* Reset margin:
* Margins don't count towards size.
* If wanted, you'd need to explicitly subtract
* them from size declarations.
*/
margin: 0;
}
To distribute <body>'s space, you can use CSS Grid:
body {
display: grid;
grid-template-rows:
auto /*First row: Take up required space*/
1fr /*Middle row: Take up remaining space, after required space is allotted*/
auto /*Last row: Take up required space*/;
}
/*Previous rules*/
html {height: 100%}
body {
margin: 0;
min-height: 100%;
}
/*Ignore; for presentational purposes*/
header, main, footer {
min-height: 4rem;
}
header {background-color: cornflowerblue}
main {background-color: brown}
footer {background-color: darkkhaki}
<html>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
just write a property for the parent element of the entire site:
min-height: 100%;
and for the section before the footer, you need to register the following property:
flex-grow: 1;
Its default value for 'flex' is 0 1 auto , which means. flex-grow: 0; flex-shrink: 1; flex-basis: auto;

How to set height dynamically of a div content with overflow set as auto?

There is a parent div, which has two child div. I want the parent div to have height 100% of the body, and each of the child div should have dynamic height from the content inside them, so I cannot set a specific height to either of them, and on top of that the second child div is suppose to have overflow with auto, and hence even the second child div should be inside of the body, without taking the space out of it.
This is the html of it -
<div class="homepage-parent">
<div class="homepage-parent_child1"></div>
<div class="homepage-parent_child2"></div>
</div>
And this is the css of it -
.homepage-parent {
width: 100%;
display: flex;
flex-direction: column;
}
.homepage-parent_child1 {
width: 100%;
}
.homepage-parent_child2 {
width: 100%;
height: 100%;
overflow: auto;
}
NOTE: I do not want the child2 div to go out of the parent div, and I do not want to use absolute positioning to do that, I just want to know if there's any other way than JavaScript to achieve this.
Do you mean something like this? I can't really explain how though, cause I only know how to use tailwind, and I'm not really proficient with CSS. it should be something like this for css
.homepage-parent {
min-height: 100%;
height: 100vh;
/* No need for flex, but you can use it */
display: flex;
flex-direction: column;
}
.homepage-parent_child1 {
width: 100vh;
}
.homepage-parent_child2 {
width: 100%;
height: 100vh;
max-height: 100vh;
overflow: auto;
}

Making gallery responsive with css

I am trying to build simple gallery.
What I would like to achieve is this:
However, what I am actually achieving is this:
There is basically too much space between images and I can't find a way how to solve it. I understand that is because of justify-content: space-between; but perhaps there's another option that will put less space between the images?
Html
<div class="photoContainer>
<div class="ant-image">
...
</div>
</div>
Css
.photosContainer {
width: 80%;
height: 100%;
overflow: auto;
overflow-x: hidden;
display: flex;
align-content: space-between;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 10px;
}
.ant-image {
height: fit-content;
flex-shrink: 0;
position: relative;
display: inline-block;
width: 200px;
}
With the space-between rule you cannot have the control of the space between the images.
My suggestion is to:
make the image gallery container smaller because you have a small number of photos
to have more control over the images you can use also for the single image a % width as you have done for the container.
hint: use property object-fit for the single images
you can use grid display instead of flex and solve your problem:
.photosContainer{
display:grid;
grid-template-columns:repeat(4 , 1fr);
}

scrollHeight calculation is different with display:flex

I am facing a similar issue as this question scrollHeight gives incorrect value when height property is provided in css
where the scrollHeight of my element is incorrect when an explicit height is set on the element.
In my case there is no margin collapsing, but the bottom padding is collapsing.
I tried recreating that in a fiddle, and i realized that it might not have to do with the padding in my case, but the display: flex property.
Somehow the scrollHeight seems to be calculated differently when using display: flex vs when not using it.
$(function() {
console.log("test "+$(".container")[0].scrollHeight);
})
.header {
min-height: 48px;
background: red;
}
.body {
min-height: 28px;
background: green;
}
.footer {
min-height: 36px;
background: blue;
}
.container {
height: 56px;
/* remove this to see change in scroll height */
/* display: flex; */
}
.wrapper {
display: flex;
flex-direction: column;
padding-bottom: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="header">Some content </div>
<div class="body"> Body </div>
<div class="footer"> CTA </div>
</div>
</div>
http://jsfiddle.net/Lsz8an1r/4/
http://jsfiddle.net/3yrn6dz5/ - another example without an margins
I am not able to find any documentation to support the fact that the display:flex is somehow changing the calculation for scrollHeight. Any pointers/clarifications would be helpful.
I have tested this in Chrome 86
attaching images as some comments have suggested it might be a browser specific issue
With flex
Without flex

css square limit size and position to parent div

I am trying to get a square to have a limited size and stay within the bounds of the parent div and scale cleanly. I can get one or two of these, but not all.
Setup is I have a main div, two column divs on the left, and a div that takes up the remaining space on the right. I would like the div on the right to contain the square and the bounds of the square stay within the parent div. I can get it to stay put if I don't use the padding-bottom to keep it square, but then the pic of the item looks horrible.
Take a look at my js bin. The pathway to hit the square is:
Weapons -> item b1 -> click on it to make it stay
The padding-bottom pushes it way down and outside of the parent div and blows the bottom out of the whole thing.
css
.itempanel{
display: block;
align-items: center;
position: relative;
}
.itemcontainer{
position: relative;
top: 30%;
height: 60%;
width: auto;
margin-left: auto;
margin-right: auto;
}
.itemdisplay{
display:none;
flex-direction: column;
width: 60%;
padding-bottom: 60%;
margin-left: auto;
margin-right: auto;
position: relative;
align-items: center;
overflow: hidden;
}
/* .itemdisplay::after{
content: " ";
display: block;
padding-bottom: 100%;
} */
html
<div class="itempanel">
<div class = "itemcontainer">
<div id="itemdisplay" class="itemdisplay">
<img id="itemimg" class="itemimg" src=""></img>
<div id="itemdesc" class="itemdesc">
<div id="itemtitle" class="itemtitle"></div>
<div id="itembody" class="itembody"></div>
<a id="itemclick" class="itemclick" href="">Click To Place Order</a>
</div>
</div>
</div>
</div>
Thanks for any help!
*little bit of background - girlfriend wants a skyrim wedding so building out a website for rsvp and stuff. Belethor's shop is going to be setup to help those not so nerdy shop for cheap cosplay outfits. Everything else works just like I want it, but the itempanel/itemcontainer/itemdisplay is not in the display area how I want it.
figured it out. The psuedo element has to be opposite what padding you are using. For instance, using this worked like I expected it to. it's always the simple things...
.itemdisplay::after{
content: " ";
display: block;
padding-top: 100%;
I see that you have created a class .bottommenu but I don't see it being applied anywhere on your HTML or JavaScript. If you want to display two rows using Flex-box and you are not quite sure of the height of your images or content, you could set that parent container to have a height: auto and on your child container you could use the align-self: flex-end to handle the positioning of items, and on your parent use the justify-content or align-content to your liking. Something like this:
div .parent {
display:flex;
height: auto;
min-width: 300px;
}
div .child {
align-self: center;
width: 100%;
min-height: 50%;
height: auto;
margin: 0 auto;
}
Hope that helps.

Categories

Resources