Develop Reference

When div reaches bottom of window, stick and scroll over next div

I want to create this sliding scroll behavior in between divs. Let's say that the markup looks like this:
<main>
<div class="slide">Content</div>
<div class="slide">Content</div>
<div class="slide">Content</div>
</main>
Every .slide div would have different heights depending on the content inside them and would of course also change it's height depending on window size.
What I want is that when each div reaches it's bottom when scrolling the page, I. e. when the bottom of the div is at the bottom of the window, the div should become fixed and the div underneath should then scroll over the previous fixed div. And this behavior would be repeated for each div within the container (in this example main).
Do you have any ideas for how this could be achieved?

I figured that adding the following to each section through JavaScript (in my case jQuery just for this exercise) will make each div behave like I wanted on scroll:
$(".slide").each(function(){
$(this).css({
"top": `-${$(this).height() - $(window).height()}px`
})
})
Essentially applying a CSS top value that is the div height minus the window height.
This would also require the divs to have position: sticky applied to them through CSS.

Getting absolutely positioned unknown height children to resize the parent on window resize

https://codepen.io/umbriel/pen/MxazRE
I have a slideshow that the user changes which slide to look at by swiping their mouse cursor horizontally over the slide container.
Because the children (slides) are absolutely positioned I need to dynamically update the height of the parent (slideshow container). Otherwise
Because I dont know the height of the individual slides I need to calculate the tallest div and give that to the parent
Code below to get tallest element below:
function getTallestSegment(element) {
let elementsHeight = [];
let height = 0;
element.forEach(child => {
elementsHeight.push(child.scrollHeight);
});
height = Math.max(...elementsHeight);
return height;
}
And the window resize snippet to update the parent height dynamically.
window.onresize = function(e){
Object.assign(item.style, {
height: getTallestSegment(getChildren) + "px"
});
};
Now it works, but only only when I downsize the window:
Please have a look in the gif. Notice the height value in the bottom right corner is in fact changing. But only when I downsize the window, I want it to work when I expand the window width as well!
Any takers to figure out to make the parent resize in both directions?
Thanks!

The problem with your code is that, when you expend the viewport, the elements are 100% height of it's container. When you expand, the elements are still 100% height of it's container because the container has a fixed height, that's whay it doesn't shrink.
But with CSS grids you can overlap elements and still make the container resize according to the tallest of them, no need for absolute position and no need for javascript to resize them.
First you make the container a grid:
.hover-slide {
display:grid;
}
Then, you put all elements on the same row and column (no need for absolute, left, right, width, height, etc):
.hover-slide > * {
grid-column: 1;
grid-row: 1;
}
And that's it, you can change the active element, but the height will just be the minimal to get all the elements inside.
Your code but using this idea https://codepen.io/anon/pen/PLPLpv (I've added a border to see the container's height easily)

Horizontal scrolling with a fixed width in HTML CSS Javascript Angular JS

I have a horizontal banner. Inside the banner, I have 4 fixed elements. First element is a image / link. 2nd fixed element is suppose to be used for scrolling left. 3rd is a fixed width element which will have images ( number varies and clicking on first image will add another image element. 4th is another fixed element suppose to be used for scrolling right.
I did some basic searching on the internet and found few solutions but they are not working for me.
The width for elements to be used for navigation is fixed like 75px. The first element width is also fixed like 100px, 3 element which will have the images is calculated calc(100% - 250px).
I have used overflow-x:hidden for the third element.
I tried the scroll using the code document.getElement('.scroll').scrollLeft += 200;
This will work only when I define the width of that element like 1000px; when I make it fixed and hide the overflow, I am not able to see all the elements which are over flowing also the above code to scroll also did not work.
Any help is much appreciated.

I created a Plunker demonstrating scrolling a container of images.
First, I created a parent component that handles navigation and a image container component. Whenever the user clicks a button on the navigation, i am setting the transform CSS property to move the inner div by a number of pixels.
The outer div contains a fixed width set to 285px with overflow hidden.
ImageContainer.js
ctrl.$onChanges = function(changes) {
console.log(changes);
// set the image width of all images
if (changes.imageSize) {
ctrl.imageStyle = {width: changes.imageSize.currentValue + 'px'};
}
// update the scroll position
if (changes.scrollPosition) {
ctrl.scrollStyle = { transform: 'translateX(' +
changes.scrollPosition.currentValue + 'px)' };
}
}
imageContainer.html
<div class="flex fixed-image-container-width" >
<div class="flex scrolling" ng-style="$ctrl.scrollStyle">
<div class="item" ng-repeat="item in $ctrl.items track by $index">
<img ng-style="$ctrl.imageStyle" ng-src="{{item}}"/>
</div>
</div>
</div>

% based height, turned dynamicly into pixels

I am looking for an easy way to do the following:
I am building a website, and i have a .content class and its height is = height:auto; and its width = width:80%;
but i do not want the div to become "TOO" bit vertically, when i am scaling it.
Question:
Is there a javascript 'if' statement that checks for the height of a div, and then is able to put overflow-y:scroll; on the element if it gets too big, say 400px vertically?
Note that, the div has no height in the css. It is set to auto.
thx

If you don't want to do it via CSS, then the jQuery functions you're looking for are:
$("#element").outerHeight() and $("#element").outerWidth()
They return the computed height and width of elements, rather than the height and width that was explicitly set.
So,
if ($("#element").outerWidth() > 400) {
$("#element").width(400);
$("#element").css('overflow-y', 'scroll');
}

If you are going the jQuery way, adding to #ieeehh, first include jQuery. Then assuming the element has the id of #element
$(function(){
if ($("#element").outerHeight() > 400) {
$("#element").width(400).css('overflow-y', 'scroll');
}
});

Dynamically change size of div and all its content?

Please note that this is not the same question as "change a div size to fit content". What I have is a relatively positioned div with a couple of absolutely positioned images inside it:
<div id="nj_size_holder">
<img id="nj_credit_card" src="credit_card.png" width="340"/>
<img id="nj_ruler" src="ruler.jpg" />
<img id="nj_item_image" src="{$base_dir_ssl}img/p/{$imgurl}" height='{$imgheight}'/>
</div>
What I also have is a Javascript/jQuery function. This function is where my question lies. What I need it to do is - given a certain parameter (as a percentage) it should dynamically resize both the div and the images inside it by that percentage.
function resizeAll(perc){
//resize everything here
}
So if the div height is initially 600px and the "nj_ruler" image height is 400, calling resizeAll(25) should increase the height of the div to 750px and the height of the image to 500px (25% increase).
Is there a way to accomplish this without increasing each height individually? There will be more elements in the div later on and, if possible, I'd like to have a function which resizes everything without referring to every element within the div individually.

var increaseby=25; //in percent
$("#nj_size_holder, #nj_size_holder > img").each(function() {
$(this).css("height",$(this).css("height")*((increaseby+100)/100));
});