Sidebar stick to bottom (CSS or JS) - reset to top

Sidebar stick to bottom (CSS or JS) - reset to top - javascript

Added snippet like requested but the css was designed for broader screen.
const target = document.getElementById('content_left');
const init_rect = target.getBoundingClientRect();
const index_height = init_rect.height;
console.log('initial height '+index_height);
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
window.onscroll = function()
{
const rect = target.getBoundingClientRect();
const buffer = document.getElementById('buffer');
console.log("viewport :"+viewportHeight);
console.log("top: "+rect.top);
console.log("bottom: "+rect.bottom);
console.log("height: "+rect.height);
top_diff = viewportHeight-index_height;
console.log("topdiff: "+top_diff);
if (rect.bottom < viewportHeight)
{
console.log('passed');
target.style.position='fixed';
buffer.style.display='block';
buffer_position = buffer.getBoundingClientRect();
target.style.left=buffer_position.left+"px";
target.style.bottom="0px";
}
};
body
{
margin:0px;
padding:0px;
width:100%;
height;100%;
background-color:#777b87;
min-height: 100%;
overflow-x:hidden;
display:flex;
flex-flow:row wrap;
justify-content:center;
max-width:1920px;
margin:0 auto;
}
#content_left
{
display:flex;
flex-flow:column nowrap;
width:300px;
padding:0px 10px 0px 10px;
position:sticky;
height:100%;
bottom:0px;
}
#content
{
width:calc(100% - 60px);
padding:20px;
margin: 0px 10px 0px 10px;
border-radius: 5px;
margin-top:10px;
z-index:100;
border:1px solid #CCC;
width: calc(100% - 350px);
max-width: 850px;
}
#buffer
{
display:none;
height:1px;
width:300px;
padding:0px 10px 0px 10px;
}
<body>
<div id="buffer">
</div>
<div id="content_left">
<div class="sub_container">
START START START START TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
<div class="sub_container">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
<div class="sub_container">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST END END END END END END END END
</div>
</div>
<div id="content">
aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb cccccaaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc aaaaaa bbbbb ccccc
</div>
</body>
I'm trying to build a page with a left sidebar that becomes sticky when the viewport reaches the bottom of that sidebar. I have tried using position:sticky but each time the viewport was reaching the bottom of the sidebar, the stickiness worked but the sidebar was set to top:0px.
I have then tried to do the same with javascript, I can trigger the changes when the bottom of the sidebar crosses the viewport but again, the sidebar gets positioned from the top and is not entirely visible. I suspect it has something to do with height settings but I can't isolate it.
I have created a codepen to show what is happening once content in inserted into the page:
https://codepen.io/LaurentWi/pen/OJwbrRw (it's too long to be copied here)
The html without the content is the following:
<body>
<div id="buffer">
</div>
<div id="content_left">
<div class="sub_container">
</div>
<div class="sub_container">
</div>
<div class="sub_container">
</div>
</div>
<div id="content">
</div>
I have used a "buffer" div to keep the rest of the screen in the right position when content_left leaves the flow.
The CSS looks like this:
body
{
margin:0px;
padding:0px;
width:100%;
height;100%;
background-color:#777b87;
min-height: 100%;
overflow-x:hidden;
display:flex;
flex-flow:row wrap;
justify-content:center;
max-width:1920px;
margin:0 auto;
}
#content_left
{
display:flex;
flex-flow:column nowrap;
width:300px;
padding:0px 10px 0px 10px;
position:sticky;
height:100%;
bottom:0px;
}
#content
{
width:calc(100% - 60px);
padding:20px;
margin: 0px 10px 0px 10px;
border-radius: 5px;
margin-top:10px;
z-index:100;
border:1px solid #CCC;
width: calc(100% - 350px);
max-width: 850px;
}
#buffer
{
display:none;
height:1px;
width:300px;
padding:0px 10px 0px 10px;
}
And finally the JS:
const target = document.getElementById('content_left');
const init_rect = target.getBoundingClientRect();
const index_height = init_rect.height;
console.log('initial height '+index_height);
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
window.onscroll = function()
{
const rect = target.getBoundingClientRect();
const buffer = document.getElementById('buffer');
console.log("viewport :"+viewportHeight);
console.log("top: "+rect.top);
console.log("bottom: "+rect.bottom);
console.log("height: "+rect.height);
top_diff = viewportHeight-index_height;
console.log("topdiff: "+top_diff);
if (rect.bottom < viewportHeight)
{
console.log('passed');
target.style.position='fixed';
buffer.style.display='block';
buffer_position = buffer.getBoundingClientRect();
target.style.left=buffer_position.left+"px";
target.style.bottom="0px";
}
};
I would prefer a solution without JS if you have one but JS is fine as long as it is only vanilla JS.
I suspect that the problem is coming from the height because when the JS display the height of content_left, the value is ok until the element is in position fixed where the height value becomes the viewport height (see console in codepen). I have tried avoiding this by forcing the initial height but it didn't work either because the initial height (see code in JS) was always smaller than the reality. I'm a bit puzzled.
Any idea?

Related

Select css siblings between two elements

The html I'm looking at looks like this:
document.querySelectorAll('h4#unique_id ~ h5 ~p +p +h5').forEach(title => console.log(title))
<body>
<h4 id="unique_id"> foo bing bar </h4>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<!-- selection should start here -->
<h5>title text 1</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 2</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 3</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<!-- and end here -->
<h4 id="randome_id_234353">title text</h4>
<p>some text I don't want</p>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
</body>
I want to grab all the h5 elements, and if possible the p elements as well.
I have document.querySelectorAll('h4#unique_id ~ h5 ~p +p +h5') so far but that misses the first h5 I want and grabs the last one I don't want. I can't figure out sibling selectors or how to use :not or similar to stop when I find another h4.
This question Select all elements between two known elements by CSS selector relies on jquery which I don't have access to, and Select elements between two defined elements relies on knowning the number and position of elements, which I don't.
Is this possible with just css selectors?

Ok you can use a mixture of sibling selector and not:
The selector is:
#unique_id~p:not(#unique_id~h4~p) /* any p following the unique id but not a p following another h4 after the unique id */
you then repeat this selector for your h5s and the result is:
document.querySelectorAll('#unique_id~p:not(#unique_id~h4~p),#unique_id~h5:not(#unique_id~h4~h5)').forEach(title => title.style.color = 'red');
<h4 id="unique_id"> foo bing bar </h4>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 1</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 2</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 3</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h4 id="randome_id_234353">title text</h4>
<p>some text I don't want</p>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
As per your edit - not to include the p before the first h5 (selector is slightly modified from Alohci's comment):
document.querySelectorAll('#unique_id~:is(h5, h5~p):not(#unique_id ~ h4 ~ *)').forEach(title => title.style.color = 'red');
<h4 id="unique_id"> foo bing bar </h4>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 1</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 2</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 3</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h4 id="randome_id_234353">title text</h4>
<p>some text I don't want</p>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>

Interesting question. If I understand your problem correctly, you want to log all of the elements that are not containing some text I don't want and the h5-elements.
If you have a parent element, you can use the > to selector in combination with the parent element to select all of its children with the *-selector.
You can apply multiple :not()-selectors to a statement. Below I just selected all p and h4-elements that are preceded by the h4#randome_id_234353-element, like so:
document.querySelectorAll('.container > *:not(h4#randome_id_234353 ~ p):not(h4#randome_id_234353 ~ h5):not(h4)').forEach(title => console.log(title))
<body>
<div class="container">
<h4 id="unique_id"> foo bing bar </h4>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 1</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 2</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 3</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h4 id="randome_id_234353">title text</h4>
<p>some text I don't want</p>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
</div>
</body>
If you don't have a container, you can use the same logic to log everything that does not preceed h4#randome_id_234353.
document.querySelectorAll('h4#unique_id ~ *:not(h4#randome_id_234353 ~ *):not(h4#randome_id_234353)').forEach(title => console.log(title))
<body>
<h4 id="unique_id"> foo bing bar </h4>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 1</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 2</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 3</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h4 id="randome_id_234353">title text</h4>
<p>some text I don't want</p>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
</body>

Only a small number of array methods work with array-like objects, so I often find it useful to turn a NodeList (which is an iterable, array-like object but, crucially, not an array) into an array, so that I can do many more things with it.
In this case by turning NodeList into an array I can use the javascript method .filter() which is exactly what I need to remove the unwanted elements from the end of the collection.
Turning a NodeList into an array:
How can I turn this static NodeList:
let myClassElements = document.querySelectorAll('.myclass');
into an array?
By combining spread syntax (...) with an array literal ([]):
let myClassElements = [... document.querySelectorAll('.myclass')];
On that basis, I can create an array of all the elements I do need (plus a few unnecessary ones):
[...document.querySelectorAll('h4#unique_id ~ h5, h4#unique_id ~ p')]
and also another array of all the unnecessary elements:
[...document.querySelectorAll('h4:not(#unique_id) ~ h5, h4:not(#unique_id) ~ p')]
And then I can .filter() out the latter from the former:
const rawListOfElements = [...document.querySelectorAll('h4#unique_id ~ h5, h4#unique_id ~ p')];
const elementsToRemove = [...document.querySelectorAll('h4:not(#unique_id) ~ h5, h4:not(#unique_id) ~ p')];
const mySelectedElements = rawListOfElements.filter((element) => elementsToRemove.includes(element) === false).forEach(title => console.log(title));
Working Example:
const rawListOfElements = [...document.querySelectorAll('h4#unique_id ~ h5, h4#unique_id ~ p')];
const elementsToRemove = [...document.querySelectorAll('h4:not(#unique_id) ~ h5, h4:not(#unique_id) ~ p')];
const mySelectedElements = rawListOfElements.filter((element) => elementsToRemove.includes(element) === false).forEach(title => console.log(title));
<body>
<h4 id="unique_id"> foo bing bar </h4>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<!-- selection should start here -->
<h5>title text 1</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 2</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h5>title text 3</h5>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<!-- and end here -->
<h4 id="randome_id_234353">title text</h4>
<p>some text I don't want</p>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
<h5>title text I don't want</h5>
<p>some text I don't want</p>
</body>

How to set card height depending on the height of the card with the largest height in the rows

I have a row like:
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Title 1</h3>
<p class="card-text">5 Line Text</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Title 2</h3>
<p class="card-text">3 Line Text</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Title 3</h3>
<p class="card-text">4 Line Text</p>
</div>
</div>
</div>
</div>
In this case, I have three cards with different heights (first 5 line, second 3 line, third 4 line) which is not much pretty...
I want these cards to have same height equal to the largest height (in this example 5 line).

You have two possibilities to solve this.
Add the h-100 utility class to the card containers (.card):
By using the h-100 utility class the cards get the height of the columns. Since the columns are all the same height in one row, the cards get also all the same height.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="row">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Title 1</h3>
<p class="card-text">
5 Line Text<br>
5 Line Text<br>
5 Line Text<br>
5 Line Text<br>
5 Line Text
</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Title 2</h3>
<p class="card-text">
3 Line Text<br>
3 Line Text<br>
3 Line Text
</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Title 3</h3>
<p class="card-text">
4 Line Text<br>
4 Line Text<br>
4 Line Text<br>
4 Line Text
</p>
</div>
</div>
</div>
</div>
Use card decks to make all cards the same height:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="row">
<div class="col">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h3 class="card-title">Title 1</h3>
<p class="card-text">
5 Line Text<br>
5 Line Text<br>
5 Line Text<br>
5 Line Text<br>
5 Line Text
</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h3 class="card-title">Title 2</h3>
<p class="card-text">
3 Line Text<br>
3 Line Text<br>
3 Line Text
</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h3 class="card-title">Title 3</h3>
<p class="card-text">
4 Line Text<br>
4 Line Text<br>
4 Line Text<br>
4 Line Text
</p>
</div>
</div>
</div>
</div>
</div>

You can simply use and the easiest way to solve this issue is that use h-100 class.
Just add h-100 class and apply it on your .card div to make sure all cards have same height equal to the largest height card in your HTML.
Live Working Demo:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="row">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Title 1</h3>
<p class="card-text">5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Title 2</h3>
<p class="card-text">3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Title 3</h3>
<p class="card-text">4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text</p>
</div>
</div>
</div>
</div>

jQuery hover falling off from the screen

This is my code at the moment.
I need to prevent hover box 'falling down' on the bottom of the page while hovering on paragraphs. I managed to prevent that on the right on smaller screens but i cant on bottom.
$(function() {
var moveLeft = 20;
var moveDown = 10;
// var moveRight = 10;
$('.hoverKartX').hover(function(e) {
$('.hoverKart').show();
}, function() {
$('.hoverKart').hide();
});
$('.hoverKartX').mousemove(function(e) {
$('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
// preventing 'falling out to the right' on smaller screens
if ($('.hoverKart').position()['left'] + $('.hoverKart').width() > $(window).width()) {
$('.hoverKart').css("left", $(window).width() - $(".hoverKart").width());
};
});
});
.hoverKart {
position: absolute;
width: 400px;
height: 220px;
border-radius: 25px;
border: 1px solid #999;
z-index: 1;
display: none;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverKart"> <!-- hidden -->
<p>
TEST
</p>
</div>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>

You can use the e object from $('.hoverKartX').mousemove(function(e) { to calculate how far from the width of the window the mouse is. If distance is less than the height of your .hoverKart, then you can adjust its offset with the edge to make it stay within the window.

You already have the logic for off the right (left / width) so apply the same login to the bottom (pageY+height):
if ((e.pageY + moveDown + $(".hoverKart").height())
> ($(window).scrollTop() + $(window).height())) {
$('.hoverKart').css("top",
$(window).height() - $(".hoverKart").height() + $(window).scrollTop()
);
}
$(function() {
var moveLeft = 20;
var moveDown = 10;
// var moveRight = 10;
$('.hoverKartX').hover(function(e) {
$('.hoverKart').show();
}, function() {
$('.hoverKart').hide();
});
$('.hoverKartX').mousemove(function(e) {
$('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
$(".hoverKart>p").html($(this).html())
// preventing 'falling out to the right' on smaller screens
if ($('.hoverKart').position().left + $('.hoverKart').width() > $(window).width()) {
$('.hoverKart').css("left", $(window).width() - $(".hoverKart").width() - moveLeft);
};
if ((e.pageY + moveDown + $(".hoverKart").height()) > ($(window).scrollTop() + $(window).height())) {
$('.hoverKart').css("top", $(window).height() - $(".hoverKart").height() + $(window).scrollTop());
}
});
});
.hoverKart {
position: absolute;
width: 400px;
height: 120px;
border-radius: 25px;
border: 1px solid #999;
z-index: 1;
display: none;
background: #fff;
}
p.hoverKartX {
border:1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverKart"> <!-- hidden -->
<p>
TEST
</p>
</div>
<p class="hoverKartX">
test1
</p>
<p class="hoverKartX">
test2
</p>
<p class="hoverKartX">
test3
</p>
<p class="hoverKartX">
test4
</p>
<p class="hoverKartX">
test5
</p>
<p class="hoverKartX">
test6
</p>
<p class="hoverKartX">
test7
</p>
<p class="hoverKartX">
test8
</p>
<p class="hoverKartX">
test9
</p>
<p class="hoverKartX">
testa
</p>
<p class="hoverKartX">
testb
</p>
<p class="hoverKartX">
testc
</p>
<p class="hoverKartX">
testd
</p>
<p class="hoverKartX">
teste
</p>
<p class="hoverKartX">
testf
</p>
<p class="hoverKartX">
testg
</p>
<p class="hoverKartX">
testh
</p>
<p class="hoverKartX">
testi
</p>
<p class="hoverKartX">
testj
</p>
<p class="hoverKartX">
testk
</p>
<p class="hoverKartX">
testl
</p>
<p class="hoverKartX">
testm
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>

Here is solution
$(function() {
var moveLeft = 20;
var moveDown = 10;
// var moveRight = 10;
$('.hoverKartX').hover(function(e) {
$('.hoverKart').show();
}, function() {
$('.hoverKart').hide();
});
$('.hoverKartX').mousemove(function(e) {
var offset = $( this ).offset().top,
bodyOffset=$(document).scrollTop();
if($( this ).offset().top+$(".hoverKart").height()+moveDown<bodyOffset+$(window).height()){
$('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
}
else{
$('.hoverKart').css('top', bodyOffset+$(window).height()-$(".hoverKart").height())
.css('left', e.pageX + moveLeft);
}
// preventing 'falling out to the right' on smaller screens
if ($('.hoverKart').position()['left'] + $('.hoverKart').width() > $(window).width()) {
$('.hoverKart').css("left", $(window).width() - $(".hoverKart").width());
};
});
});
.hoverKart {
position: absolute;
width: 400px;
height: 220px;
border-radius: 25px;
border: 1px solid #999;
z-index: 1;
display: none;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverKart"> <!-- hidden -->
<p>
TEST
</p>
</div>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>

How to sync the scroll of two divs by ID

I have two divs each taking up half the screen vertically. on one of them there is a scroll bar. On each of the divs there are waypoints, or id's. When scrolling, i want the scroll to align the two divs so that the same id's are always opposite each other.
An example is something like this
http://jasmine.github.io/edge/introduction.html

I think I understand what you want please try this
and you can enhance the code
$('#dv2').on("scroll", function () {
var lastDivInView = -1
var stop=false
var allCommts=$("#dv2").find("div")
var cnt=allCommts.length
var i=0;
while (!stop && i < cnt) {
if ($(allCommts[i]).offset().top > 0 && $(allCommts[i]).offset().top < $(this).height()) {
lastDivInView = i;
stop = true
}
i++
}
if (lastDivInView>-1)
$("#dv1").find("a")[lastDivInView].scrollIntoView()
});
function ScrollToView(index) {
var dvCommt = $("#dv2").find("div")[index - 1]
dvCommt.scrollIntoView()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width: 400px">
<div id="dv1" style="float: left; max-height: 40px; width: 45%; border: 1px solid red; overflow: auto">
Code 1<br />
Code 2<br />
Code 3<br />
Code 4<br />
Code 5<br />
Code 6<br />
Code 7<br />
Code 8<br />
Code 9<br />
Code 10<br />
</div>
<div id="dv2" style="float: left; max-height: 150px; width: 45%; border: 1px solid green; overflow: auto">
<div style="border:1px solid black;margin:10px">
Comments for code 1:aaa bbbbb cccc dddd eee ffff
</div>
<div style="border:1px solid black;margin:10px">
Comments for code 2:aaa bbbbb cccc dddd eee ffff
</div>
<div style="border:1px solid black;margin:10px">
Comments for code 3:aaa bbbbb cccc dddd eee ffff
</div>
<div style="border:1px solid black;margin:10px">
Comments for code 4:aaa bbbbb cccc dddd eee ffff
</div>
<div style="border:1px solid black;margin:10px">
Comments for code 5:aaa bbbbb cccc dddd eee ffff
</div>
<div style="border:1px solid black;margin:10px">
Comments for code 6:aaa bbbbb cccc dddd eee ffff
</div>
<div style="border:1px solid black;margin:10px">
Comments for code 7:aaa bbbbb cccc dddd eee ffff
</div>
<div style="border:1px solid black;margin:10px">
Comments for code 8:aaa bbbbb cccc dddd eee ffff
</div>
<div style="border:1px solid black;margin:10px">
Comments for code 9:aaa bbbbb cccc dddd eee ffff
</div>
<div style="border:1px solid black;margin:10px">
Comments for code 10:aaa bbbbb cccc dddd eee ffff
</div>
</div>
</div>

I think you want 2 divs beside each other when you scroll div you want to scroll other div like this
$( '#dv1' ).on("scroll",function(){
var t=$(this).scrollTop()
$("#dv2").scrollTop(t)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width:100%">
<div id="dv1" style="float:left;max-height:150px;width:45%;border:1px solid red;overflow:auto">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>
<div id="dv2" style="float:left;max-height:150px;width:45%;border:1px solid green;overflow:hidden">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>
</div>

SlideIn/Out content by data-attribute?

I use a simple slideIn/Out script by clicking on a link. My problem, if I click on a link to slideIN the content, all other content-boxes also slide in their content, because there is no attribute with which they can seperate the content boxes. So I think the "data-attribute" will be a good way?
The plan, the script should compare the "data-attribute" from the link with the "data-attribute" from the content:
<div class="button" data-filter="1">Show</div>
<div class="text" data-filter="1">Bla1 bla1 bla1</div>
<div class="button" data-filter="2">Show</div>
<div class="text" data-filter="2">Bla2 bla2 bla2</div>
Is there a simple way?
That is my fiddle

First, get the clicked attribute value with attr(). Then use it in the proceeding selector to find the .text element with that attribute value
var attrVal = $(this).attr('data-filter');
$box = $('.text[data-filter="'+attrVal+'"]');
Alternatively, you can use .prev() like
$box = $(this).prev();
This works because this will get you the immediate preceding element(which happens to be .text).
$(function(){
$(".button").click(function(){
var attrVal = $(this).attr('data-filter');
$box = $(this).prev();
minimumHeight = 100;
// get current height
currentHeight = $box.innerHeight();
// get height with auto applied
autoHeight = $box.css('height', 'auto').innerHeight();
// reset height and revert to original if current and auto are equal
$box.css('height', currentHeight).animate({
height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
})
});
})
.text{
height:100px;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="text" data-filter="1">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="1">Show</div><br /><br />
<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><br /><br />
<div class="text" data-filter="2">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="2">Show</div><br /><br />
<div class="text" data-filter="3">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="3">Show</div>

You can use data-* attributes, but .prev() can also be used.
$box = $(this).prev(".text");
Updated Fiddle
or with data-filter use attribute based selector with .data(),
$box = $(".text[data-filter="+$(this).data('filter')+"]");

You can simply wrap the necessary .text divs and buttons into separate divs and then use siblings to target the correct text div.
http://jsfiddle.net/karanmhatre/dw6936L3/9/
HTML
<div>
<div class="text" data-filter="1">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="1">Show</div><br /><br />
</div>
<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><br /><br />
<div>
<div class="text" data-filter="2">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="2">Show</div><br /><br />
</div>
<div>
<div class="text" data-filter="3">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="3">Show</div>
</div>
JS
$(function(){
$(".button").click(function(){
$box = $(this).siblings(".text");
minimumHeight = 100;
// get current height
currentHeight = $box.innerHeight();
// get height with auto applied
autoHeight = $box.css('height', 'auto').innerHeight();
// reset height and revert to original if current and auto are equal
$box.css('height', currentHeight).animate({
height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
});
});
})
Feel like this is a far cleaner solution as opposed to trying to detect them using data filters.

You can use .prev() to refer to immediate previous sibling from the current element.
I would also like to suggest you to enclose the related dom elements within a container div as it makes the DOM easy to understand & looks well organised.
JS code:
$(function () {
$(".button").click(function () {
$box = $(this).prev('.text'); //get previous sibling
minimumHeight = 100;
// get current height
currentHeight = $box.innerHeight();
// get height with auto applied
autoHeight = $box.css('height', 'auto').innerHeight();
// reset height and revert to original if current and auto are equal
$box.css('height', currentHeight).animate({
height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
});
});
});
Live demo # JSFiddle :
http://jsfiddle.net/dreamweiver/dw6936L3/8/

Develop Reference

JavaScript is the programming language of the Web.

Sidebar stick to bottom (CSS or JS) - reset to top - javascript

Related

Select css siblings between two elements

How to set card height depending on the height of the card with the largest height in the rows

jQuery hover falling off from the screen

How to sync the scroll of two divs by ID

SlideIn/Out content by data-attribute?

Categories

Resources