I have a function to determine the height of the page, so that the page always stays at the maximum size regardless of the device, without scrolling.
I first take the maximum height of let s = $ (document) .height and then the height of all other elements, such as the header, main footer and footer. I subtract the value of all items by the variable s, which contains the height total. I assign the result to the main height value, so the page is the way I want it.
However, when I change the device to chrome inspection feature, or I leave it in landscape, the page is irregular. So be sure to reload, try using windows.resize by calling a function, but it doesn't adjust, just reloads. I don't know what to do.
I call the function like this:
$("document").ready(function() {
changesize();
$(window).resize(function() {
changesize();
});
};
Any reason you couldn't use css to accomplish this? height: 100vh will keep an element at the viewport height even when resized, and using flex or grid you could stretch and scale the main layout elements however you need them.
body {
margin: 0;
text-align: center;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header, footer {
background: aliceblue;
flex: 0 0 auto;
}
.content {
flex: 1 1 auto;
background: lightblue;
}
<section class="container">
<header><h1>header</h1></header>
<div class="content">content</div>
<footer>Footer</footer>
</section>
Related
I have a sticky header which utilizes IntersectionObserver to gain a class when stuck, which then hides a few elements and reduces the size of the logo. Of course, when the height of the header shrinks, so does the scroll height, and so if you scroll down just enough to shrink the header, it shrinks, then realizes it's no longer stuck so grows, but that cause it to shrink again, so it grows, and so on in an infinite loop. This seems to be most egregious in Chrome, but I've seen it happen in Firefox as well (though Firefox seems to recognize what's happening and sorts itself out).
I've tried numerous things, including a setTimeout() to delay when the class gets removed, adding equivalent margin-bottom to the header when it shrinks, displaying a hidden element with a height of the shrunk space, but nothing seems to fix this problem.
I know I've seen this on other sites before as well, and I suspect this is just a systemic problem with shrinking headers, but is there anything I can do to prevent this from happening? I'm out of ideas.
const OBSERVER = new IntersectionObserver(
([e]) => e.target.classList.toggle("js-is-sticky", e.intersectionRatio < 1),
{
rootMargin: document.getElementById("wpadminbar") ? "-32px 0px 0px 0px" : "0px 0px 0px 0px",
threshold: [1],
}
);
OBSERVER.observe(document.querySelector(".sticky-block"));
CSS and markup is a bit more complicated (and slightly irrelevant), so if needed, please refer to our demo site here. https://gepl.myweblinx.net/
If anything else is needed I'd be happy to add it.
EDIT 1: I see this answer suggests putting a container around the element that retains the correct height, but that won't work with position: sticky; as position: sticky; only works for the closest container (unless someone knows how to get around this?)
EDIT 2: I was overthinking the answer from my first edit
Well, that was a surprisngly obvious solution... Thanks to this answer, I was able to figure out that if I just set a fixed height on the sticky element, but let the contents of that element shrink, the issue goes away.
Essentially:
<div class="sticky-block" style="height:140px;">
<div class="header-block">
...
</div>
<div class="navigation-block">
...
</div>
</div>
In my case these solutions didn't work, Chrome on Android still had the flickering issue. My solution was to make my header position fixed and have a dummy div behind it that resizes to be the same height as the header.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
:root {
--lightGrey: #bbbbbb;
}
body {
margin: 0;
width: 100%;
height: 500%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(9, auto);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
header {
width: 100%;
grid-area: 1 / 1 / 1 / 4;
position: fixed;
top: 0;
z-index: 100;
background-color: var(--lightGrey);
}
.headerBackground {
grid-area: 1 / 1 / 1 / 4;
background-color: var(--lightGrey);
height: fit-content;
}
</style>
</head>
<body>
<header>My Header</header>
<div class="headerBackground">Background div</div>
</body>
<script>
// Changes the header once you have scrolled down by 100 pixels or more
$(window).scroll(function () {
if ($(window).scrollTop() >= 100) {
$('header').css('height', '20vw');
$('header').css({ 'font-size': '4vw', 'padding': '5vw' });
} else if ($(window).scrollTop() == 0) {
$('header').attr('style', '');
}
});
// This keeps the space behind the header at the same height as the header to get around the flickering sticky
$(".headerBackground").css({ 'height': ($("header").height() + 'px') });
</script>
</html>
I want that when the user opens that chat or writes any message, the scroll bar to go down to see the latest messages. I have found the following answer that I want to use in order to accomplish the task.
https://stackoverflow.com/a/21067431/12051965
The problem is that it does not have any effect on the scroll bar, it is still at the top of the chatbox, and I would appreciate if someone could tell me what am I doing wrong.
let chat = document.getElementById("chat-messages-main-div-id");
window.onload = toBottom;
function toBottom() {
const isScrolledToBottom = chat.scrollHeight - chat.clientHeight <= chat.scrollTop + 1;
if (isScrolledToBottom) {
chat.scrollTop = chat.scrollHeight - chat.clientHeight;
}
}
.chat-messages-main-div {
width: 100%;
height: inherit;
overflow: overlay;
overflow-y: scroll;
display: flex;
flex-direction: column;
padding-left: 2%;
padding-right: 2%;
box-sizing: border-box;
padding-bottom: 15px;
}
<div id="chat-messages-main-div-id" class="chat-messages-main-div" onload="toBottom">
....
</div>
There is two issues with your code snippet the first one comes from the height: inherit, which make your div grow with parent element, so the scroll bar you are seeing is a parent node (the first fixed height parent if any or the window object) scrollbar and not the chat one, the div or its parent have to be limited in height for it to work, also your comparaison in the toBottom function should be a >= instead of <= (The scrollTop property is the number of pixel scrolled from the top), but i recommend you something easier (you dont need to check or calculate the position if its given that all you need to is to go to the upmost bottom of the scroll) :
function toBottom() {
chat.scroll(0, chat.scrollHeight)
}
What do i want to achive?
I want to remove a div which isnt visible(for the user not the css atribute) anymore on the screen because i let the html and body scroll to a div with jquery(scrollTop). Now i want to remove the div which was visible beforr i scrolled down with jquery.
Edit: After removing the .header div, the #begining should be the top of the page and the .header div should be removed forever.
What is the problem?
After i scrolled down and removed the div with the following line of code: $('.header').css('display','none'); the scroll position changes.
Code to scroll down and remove the div.
function scrollToBegining(){
$('html, body').animate({
scrollTop: $("#begining").offset().top
}, 750);
setTimeout(function(){
$('.header').css('display','none');
},750);
}
Problem visualized:
GIF of the problem (Watch to understand better)
This is odd, but I think a better choice is to slideUp the div instead of scrolling:
function scrollToBegining(){
$('.header').slideUp(750);
}
Obviously, rename the function since it's no longer scrolling.
You can use visibility: hidden to hide the div but reserve its space. Also, sometimes the scroll position has to be changed when you use display: none.
visibility: hidden
is what you are looking for, but another solution I use with this kind of issue is instead of scrolling down to your second div, have the initial div shrink its height in a uniform animation until it is 0. This prevents the weird shuddering scroll issue you are experiencing
document.querySelector('#header h1').addEventListener('click', closeHeader)
function closeHeader(){
document.querySelector('#header').classList.add("hidden");
}
#header {
height: 300px;
width: 100%;
background: red;
text-align: center;
}
#content {
height: 1000px;
width: 100%;
background: yellow;
text-align: center;
}
.hidden {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
<div id="header">
<h1>
HEADER
</h1>
</div>
<div id="content">
CONTENT
</div>
I have a header, in which i put my h1 and h2 headings at top. The problem is that header scrolls along the scroll bar which is of course normal but i want to fixed it at some point when all the headings on header scroll away. At this point I want header to stop and stays fixed.
I already tried fixed position but of course it fixed heading as well which exactly I don't want.
I also tried this JavaScript but no luck.
JavaScript
$(window).scroll(function() {
var _height = 120 - (120 * $(this).scrollTop() / $('body').height());
if (_height >= 80) {
$('.header_container').height(_height);
}
});
and here qre my HTML and CSS codes respectively.
HTML
<div class="header_container" id="header_container">
<div id="header_titles">
<h1 class="homepage-heading">Browse</h1>
<h2 class="homepage-heading-subtle">GENRES & MOODS</h2>
</div>
</div>
CSS
#header_container {
background-color: black;
width: 100%;
height: 120px;
top: 0;
left: 0;
right: 0;
}
#header_titles {
position: absolute;
width: 100%;
font-size: 35px;
text-align: center;
padding-top: 10px;
}
So, let me see if I get this...you want your header to be scrolled normally with the page until a certain point where it becomes fixed?
EDIT
Ok, well, you could determine the element on the page that you want the position to be triggered at. Like, the top of a certain paragraph, and use that position in your condition.
var condition = $(element).offset().top;
if($(window).scrollTop > condition) { //add a fixedClassName } else { remove the fixedClassName }
and have header.fixedClassName have those proprieties ( with position fix, top 0 and width: 100% to your header etc). Be sure to add and remove a class on the body that gives it padding-top with the height of your displaced header.
Used some similar effect here http://goodmen.se/ after a point the logo shows up in the header, then there's a background change. You do something similar with your position.
EDIT 2
Here's an example fiddle http://jsfiddle.net/Corsico/vpskd8hd/
So you want a sticky header?
In your javascript create a code:
var $header_container = $('#header_container');
var header_height = $header_container.outerHeight(true);
if($(window).scrollTop() < header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
$(window).on('scroll', function(){
if($(window).scrollTop()< header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
});
This will add a sticky class to your header, and then you can set the header to be fixed:
.sticky{
position:fixed;
top:0;
left:0;
width:100%;
display:block;
}
This should do it. When you scroll pass the height of the header, you'll get the 'sticky' class, if not, you'll remove the sticky class...
I have the following HTML.
<body>
<nav>..</nav>
<div class='container'>
<div class='row' id='header'>
...
</div>
<div class='row' id='content'>
...
</div>
</div>
</body>
My aim is to have the header remain constant height, while the content fill the rest of the page (I have a Highchart in there). I have tried to use the information here: how do I give a div a responsive height and here: http://codethatworks.blogspot.co.uk/2012/05/responsive-full-height-columns-using.html and here Make a div fill the height of the remaining screen space - but with no luck.
My basic understanding is that I set the body height to 100%, and the header height to say 25% and the content to say 75%. Is the nav confusing things here?
Please note that I am using Bootstrap 3.
It's not just the body you need to set to 100% height, it's all the parents of those two 'rows'. So in your case, html, body, .container.
html, body {
height: 100%;
}
body > .container {
height: 100%;
}
nav {
position: absolute;
top: 50px;
}
#header {
height: 25%;
background: yellow;
}
#content {
height: 75%;
background: red;
}
If you don't set your nav to be positioned absolutely, then it'll cause a scrollbar as it's pushing the content down and making the total height more than 100%.
Demo here!
You can use the viewport percentage. See this fiddle
Relevant lines:
#header
{
height: 25vh;
...
}
#content
{
height:75vh;
...
}
In this case you don't have to set the height of body, html, etc. If you want it to fill the page without padding you would add:
body
{
padding:0px;
margin:0px;
}
See support here.
See this answer for more details.
For the nav element, you either need to make this absolutely positioned as suggested in other answers or give up some percentage of the page for the nav. E.g. make content height 65vh and nav height 10vh.