I'm looking for a way to dynamically change a div's height when a page scrolls. This is because I have a fixed panel on the right side of the screen, and a menu banner at the top.
When at the top of the page, the top of the side panel touches the bottom of the banner at the top. Thing is, when the page is scrolled down and the banner leaves the screen, this leaves a gap the size of the top banner between the top of the screen and the top of the side panel. I'd like to put a div between them that would grow in height when the page is scrolled down. Is there a way in css or js to do so ?
I can't just have the side panel have 100% height because it would hide some elements on the top banner, especially on lower resolution screens.
I added some ugly images made on paint to explain :
This is the css for the side panel :
position: fixed;
right: 0;
top: 180px;
height:calc(100% - 180px);
Hello I do not really understand your banner situation.. but regarding what you need, you can just call a js function whenever you scroll:
<body>
<div class="content" onscroll="dynamicheight()">
</div>
<script>
function dynamicheight() {
var content = document.getElementById("content");
var y = content.scrollTop;
document.getElementById('random').style.height = y;
}
</script>
This way the div with the id random will grow according to how much you scroll. Obviously you have to adjust it to your wishes. Hope this could guide you a bit.
As per your question, you have to stick Panel to the top of viewport on scroll right?
For that purpose you can trick some negative margin equal to the height of menu bar like,
Check this fiddle here
$(window).scroll(function() {
if ($(".sidepanel").offset().top > 50) {
$(".sidepanel").addClass("stick-top");
} else {
$(".sidepanel").removeClass("stick-top");
}
});
body{
margin:0;
padding:0;
height:1000px
}
.menu{
width:100%;
height:50px;
background:#111111
}
.sidepanel{
width:200px;
height:200px;
background:#888888;
position:fixed;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
}
.sidepanel.stick-top{
margin-top:-50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="menu"></div>
<div class="sidepanel"></div>
See first based on the content you can adjust it automatically.
How to make sidebar with same height as the content div?
Related
I'm trying to create a responsive design for a practice website.
The situation is that the below menu-icon image is only displayed while width is less than 701 px. So it does that fine. But the problem is that, when menu-icon image is displayed, screen width less than 701 px, I click on the image and nothing happens. The onclick attribute "togglemenu()" does not seem to function. Can someone help please?
This is a live site:
https://moortje.github.io/HTML-CSS-Project-Bro-Code/
The menuList and menu-icon in question are at the very bottom.
Here is an HTML snippet.
<ul id="menuList">
<li>CSI</li>
<li>CHP</li>
<li>HCSS</li>
<li>JS</li>
</ul>
<img src="moortje2.png" class="menu-icon" onclick="togglemenu()">
<script type="text/javascript">
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if (menuList.style.maxHeight == "0px") {
menuList.style.maxHeight = "130px";
}
else{
menuList.style.maxHeight = "0px";
}
}
</script>
Here is a CSS snippet.
.menu-icon{
width: 25px;
cursor: pointer;
display: none ;
}
#media only screen and (max-width: 700px){
.menu-icon{
display: block;
}
#menuList{
overflow: hidden;
transition: 0.5s;
}
}
Well I went through the code and find out that togglemenu function is working properly and its even opening the menu. But you have given position absolute to ul tag and when you click on toggle image. It opens menu but at the top of page.
So click on image and scroll up to top and you will going to see your menu. You just have to adjust its position to open it below toggle menu button/image.
The problem is that you are setting max-height and max-width
Changing those properties doesn’t change the size of the element, only what its max bounds are.
Use width and height instead.
It's appear at the top of the page because of position: absolute
When viewing a website with Chrome for Android, the height of the view-area changes as soon as scrolling causes the URL-bar to hide. When using a fixed background image, this results in annyoing resizing of the image, initially when scrolling down, and also when the user scrolls up again, which enables to URL-bar again.
This topic has already been discussed here:
Background image jumps when address bar hides iOS/Android/Mobile Chrome
There was also a 'fix' announced, that recommends the use of vh instead of % to describe the height of the image:
https://developers.google.com/web/updates/2016/12/url-bar-resizing
Given now a site that contains a fixed background image:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="content">
<div style="padding-bottom:2000px; width:100%;">Test</div>
<div>Test again</div>
</div>
</body>
</html>
using the following CSS:
html, body {
margin: 0;
padding: 0;
}
div {
color:white;
font-size: 30px;
}
#content {
background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
background-size: cover;
}
will rescale the background image as described above, using Google Chrome for Android. Here is a Fiddle.
The methods determined to solve this (see linked JS-thread) make use of JavaScript to determine the window height after resizing of the window has taken place and then update the image height. However, it won't stop the background image from resizing without leaving a part of the page blank.
In order to keep the background image in place, two methods seem suitable:
preventing the URL-bar to hide
render the image with an initial offset to be able to compensate the image shift
Preventing the URL-bar to hide
In order to keep the URL-bar visible all the time, I created a fixed-div that contains a scrollable div-container:
<div id="content">
<div id="fixed">
<div id="scroller">
<div style="padding-bottom:2000px; width:100%;">Test</div>
<div>Test again</div>
</div>
</div>
</div>
CSS:
#fixed {
height:100vh;
width:100vw;
overflow:hidden;
}
#scroller {
overflow-y: auto;
height:100vh;
}
The idea is that since the user is not scrolling the website-body, the URL-bar won't disappear. This Even though this works on my emulator, it doesn't work on a real Galaxy S20. A user would be able to hide the URL-Bar after scrolling to the bottom of the page (the div).
Rendering the image with an initial offset to be able to compensate the image shift
The other idea was to draw the background image 'deeper' by default:
background-size: auto calc(100vh + 100px);
If there is "unused" space on top of the image, it should be possible to catch the resize- or touchmove-event, compare the new window height to the initial window height and then compensate the offset. Unfortunately, this will only affect the y-dimensions of the image and I would probably need to do the same for the x-axis or rescale the image again. However, when trying to determine the current image size in JavaScript (using jQuery, see this thread), I ran into another error; retrieving the image-size via $('#background').css('background-size') returned just auto and ignored the second part.
Most threads about this topic are older than five years. Can someone enlighten me and tell me there is a way to manage this by now?
Update:
I was able to eliminate the resizing using the following technique:
Assuming portrait-mode is active, I calculated the image width from the scaled image height and set the background-size to pixel values:
var initHeight = '';
var initWidth = '';
var imageHeight = 982;
var imageWidth = 1500;
var cssHeight;
var cssWidth;
$(window).on('resize', function () {
if (initHeight == 0) {
initHeight = $(window).height();
initWidth = $(window).width();
cssHeight = parseInt($('#content').css('background-size').split(" ")[1].slice(0,-2));
cssWidth = cssHeight / imageHeight * imageWidth;
$('#background').css('background-size', cssWidth + "px " + cssHeight + "px");
}
Now the background image won't scale, but it will move vertical when toggling the URL-bar.
To get rid of this, I make use of the second method described above and draw the background image with an initial offset:
background: url(../images/bg.jpg) no-repeat right 15% top -100px;
background-size: auto calc(100vh + 200px);
As soon as a resize-event occurs, I update the background image position:
let newHeight = $(window).height();
let newWidth = $(window).width();
let diff = newHeight - initHeight;
$('#background').css('background-position', "85% " + (startHeightOffset + diff) + "px")
This seems to work in my emulator. The background image stays in place now. However, when switching devices, I noticed that this approach works only for devices that have no toolbar in the bottom. Emulating a Galaxy S9, which has a URL-bar on the top as well as a toolbar on the bottom, the background image gets shifted too much, since the space acquired by both toolbars (top and bottom) will be added to the top of the image. In order to make this work, I would need to determine the height of the top URL-bar only and I genuinely don't know if this is possible.
Again, in order to solve this problem, one of the following problems must be solved:
reliably prevent hiding of the URL-bar
determining the height of the bottom toolbar
Update 2:
I was able to prevent hiding of the URL bar like so:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: scroll;
}
body {
-webkit-overflow-scrolling:touch;
}
#content {
width: 100%;
height: 100%;
background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
background-size: cover;
}
#fixed {
height:100%;
width:100vw;
overflow:hidden;
}
#scroller {
overflow-y: auto;
height:100vh;
}
The background image stays in place, since the URL-bar will never collapse. However, this isn't the ideal solution and it would be great if there would be a way to make this work without the need of preventing the URL-bar to collapse.
Like other pages, the main div is always a way in which occupies the entire screen seen by the User, and when he scroll down he can see another div: example1 , example2
No matter if you resize the screen, the main div will always occupy the total space seen by the User.
To test It I try this code below:
<div style="background:yellow; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; float:left;">
This is my Section!
</div>
With him I can see a large yellow background with a text occupying the entire area of my browser. Assuming I would like to add another div below this, how could I do that? Is possible with css or I will need javascript?
You can do it without javascript with only pure CSS.
With vh units, you can specify a margin-top on the next container like this :
#content { margin-top: 100vh;}
The advantage of this method is that it is fully responsive, no matter how you resize it (height or width).
See it here
If you check your div more correctly, this code:
top: 0; bottom: 0; right: 0;
Is what causes your div to occupy the whole screen because there isn't any space between the div since you set all of them at 0.
I am building a chat widget, which is minimized (collapsed and fixed to bottom of page) by default and then maximized when clicked.
It has a fixed height, and overflow-y: scroll. I want the scrollbar to start at the bottom and scroll upwards, but this is prettry problematic.
If I never collapse the widget, which I do with widget.toggle('blind') (JQuery), I can simply scroll with javascript on page load: using .scrollTop(), however, I want the widget to initially be collapsed. Using .scrollTop() on the collapsed widget has no effect! Furthermore, whenever I collapse/expand the widget, it scrolls all the way to the top.
Is there a library or do you have some hints to solve this?
You can do it like this:
Declare your chatView (widget) minimized height (5vh in my example) by default
When user wants to open the chatView (click in my example), you adding class (open in my example) and increase it's height (90vh in my example). With transition property - you get wanted animation.
Use mentioned jQuery method .scrollTop with needed container height (#chatView>div in my example), which insures it scroll to the bottom.
$(function(){
$("#chatView").click(function(){
$(this).toggleClass("open").scrollTop($("#chatView>div").height());
});
});
*{
margin:0;
}
footer{
height:10vh;
position: absolute;
bottom: 0;
}
#chatView{
width: 20vw;
background:red;
position:absolute;
bottom:0;
height:4vh;
transition: height 1s;
overflow-y:scroll;
}
#chatView.open{
height: 90vh;
}
#chatView>div{
background:green;
height: 95vh;
}
#chatView>figure{
height: 4vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
<div id="chatView" >
<figure></figure>
<div ></div>
</div>
</footer>
I have a responsive menu that extends beyond the page height, which means users cant see the lower menu items on short pages (pages with little content)
jsfiddle -http://jsfiddle.net/ashconnolly/QDznX/
I understand that it is because my nav is positioned absolute, however if I set the nav to position relative, it pushes the page content below it down.
How could I manage my html + css better to fix this?
OR
In javascript how do I set the body height to be the same as the menu, when the body height is less than the menu height?
Hope you can help!
you can achieve this by CSS
Just add couple of css properties for overflow and height for nav.active
nav.active {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
height: 100%;
overflow: auto;
}
Here is a fiddle