Develop Reference

How to control when a jQuery slideToggle(); which is position:absolute; is higher than viewport?

I have a slideToggle(); menu which is positioned absolutely on the bottom of the page. The slideToggle(); is going to show big content and sometimes this ends up being taller than the viewport.
My question is, how do I prevent the menu to:
1 - Not going on the top of the logo as they are both on the sidebar of my website
2 - When it reaches a height taller than the viewport, this will be scrollable
To explain myself better, I'd like the content of my menu, once is shown by slideToggle(); and whenever is taller than the viewport's height minus logo's height, to stop right below my logo and to continue expanding downwards if that's the case, and that I am able to scroll it down despite its position:absolute.
Does anyone have an idea on how I can achieve that? Please have a look at the snippet.
$( "#click" ).click(function() {
$( ".content" ).slideToggle();
});
.logo {
background: #11a1d6;
margin: 10px;
height: 100px;
width: 300px;
}
.list {
width: 200px;
position: absolute;
bottom: 20px;
}
.content {
background: #082965;
height: 10000px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"></div>
<ul class="list">
<li id="click">
Click me
<div class="content"></div>
</li>
</ul>

You would need an additional wrapper for your .content that has overflow-y: hidden and height set to the max height available. To determine this height you need a function that runs after your DOM is loaded and adds this to your .content-wrapper:
function setContentMaxHeight() {
let containerHeight = $('.container').height()
let logoMargin = $('.logo').offset().top;
let logoHeight = $('.logo').height();
let listHeight = $('.list').height();
let listMargin = 20;
let maxHeight = containerHeight - ( 2 * logoMargin ) - logoHeight - ( 2 * listMargin) - listHeight;
$('.content-wrapper').css({
'height': maxHeight + 'px'
});
}
$(document).ready(function(){
setContentMaxHeight();
window.onresize = setContentMaxHeight; // detect the window resize and rerun the function
});
working fiddle

Center scroll based on viewport insteed of container fixed sized

I am working on a project based on a big image (7000 X 5321). The image will be like a huge map. At the center of this map the user will have the main interest point so my aim is that once the page loads, this spot needs to be in the center of the viewport and from there, the user will scroll horizontal or vertically.
My problem is that while I can adjust the scroll position with my script I need this page to be responsive so the adjustments to center this spot needs to be done based on the window viewport and not based in the size of the image and no idea if this can be done.
In the snippet below you can see my actual code and my problem. I have centered a red square inside the container. if you check the snippet at full page in a panoramic screen the spot is centered (more or less) as I would like it but it won't work if the window width or height changes (as you can see in the small window)
Any help or idea I could work on would be greatly apreciated.
$(document).ready(function() {
$('html, body').animate({
scrollTop: ($('body').height() / 2 - 450)
}, 0);
$('html, body').animate({
scrollLeft: ($('body').width() / 2 - 1000)
}, 0);
});
html,
body {
margin: 0;
height: 5321px;
width: 7000px;
}
.contenedor-mapa {
height: 5321px;
width: 7000px;
position: relative;
background-color: grey;
}
.center {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="contenedor-mapa">
<div class="center"></div>
</div>

I'm not sure how to to it 100% with jQuery, but what you need is something like:
$('html, body').animate({
scrollTop: $('body').height() / 2 - window.innerHeight / 2
}, 0);
$('html, body').animate({
scrollLeft: $('body').width() / 2 - window.innerWidth / 2
}, 0);

Found the way to do it. It was not as difficult as I thought. Diego Cesar gave me the hint I needed.
$(document).ready(function() {
$(window).resize(function () {
var viewportWidth = $(window).innerWidth();
var viewportHeight = $(window).innerHeight();
$('html, body').animate({
scrollTop: ($('body').height() / 2 - viewportHeight / 2)
}, 0);
$('html, body').animate({
scrollLeft: ($('body').width() / 2 - viewportWidth / 2 )
}, 0);
}).resize();
});
html,
body {
margin: 0;
height: 5321px;
width: 7000px;
}
.contenedor-mapa {
height: 5321px;
width: 7000px;
position: relative;
background-color: grey;
}
.center {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="contenedor-mapa">
<div class="center"></div>
</div>

How to put a div from the top of my page to the bottom of it when i scroll to the end of the page

So i hope my question is clear enought ! I have a div at the top of my page and i'd like that div to move at the bottom when i scroll and hit the end of the page, well i think you get the idea !
If anyone as an idea, i'm taking it ;)

Try to use scroll event with animate() method, and use a flag scroll to make sure the div will be moved just one time :
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
Hope that will give you an idea.
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
html, body { height: 500px; }
#my-div {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100px;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>

You can detect when user scroll to the bottom of the page and then transition top property from 0 to the height of the window minus height of that element.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('div').css({
top: $(window).height() - $('div').height()
});
}
});
CODEPEN

footer animate up when scrolling and touch bottom and animate down when scrolling up

This is a question that once asked in a different variation,
and i tried to use the code, but it doesn't work for me.
I want my footer to animate up when scrolling just a bit before reaching the bottom, and closing while scrolling up.
like in this site - you will see if you scroll all the way down.
http://www.pronto.co.il
this is my code:
css:
body, html { height: 1000px; }
html:
<button id="buttonTest">try me</button>
<div id="footer" style="display: none;"><img src="pics/try_me_1.png" ></div>
I'm trying to leave the jquery code but I don't understand exactly how it works here yet.
so this is the link to the answer - i took it and use animate() instead the alert.
Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up
will help me a lot. thank u so very much

you can add/remove a given class
var footer = document.querySelector("#footer");
window.onscroll = function(event) {
((window.innerHeight + window.scrollY) >= document.body.offsetHeight) ? footer.classList.add("visible") : footer.classList.remove("visible")
};
And here is your css
#footer{
position: fixed;
bottom: 0;
overflow: hidden;
height: 0;
transition: height .3s ease
}
#footer.visible{
height: 100px;/*what ever you want*/
}

As the comment suggest there is no animation on the link you provide, but based on the link question is just simple as this:
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
$('#footer').slideToggle();
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$('#footer').slideToggle();
isShowing = false;
}
});
body,
html {
height: 1000px;
}
#footer {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background:black;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="buttonTest">try me</button>
<div id="footer"></div>

Jumping div in Safari and Chrome. jQuery/Javascript

I have a div #HangerLeft that the css.right is automatically generated via jQuery to sit on the left side of the page based on the body width. It is absolute positioned.
function hangerLeft() {
var hangerPosition = (jQuery("body").innerWidth() / 2) + (990 / 2);
jQuery("#HangerLeft").css("position","absolute").css("right", hangerPosition +"px").css("top","20px");
}
Inside the #HangerLeft div I have a #scrollWrapper div with no positioning and inside the #scrollWrapper i have a #scrollBox. The #scrollBox is absolute positioned.
#scrollWrapper { width:130px; height:400px; border:1px solid #fff;}
#scrollBox { position: absolute; top: 100; margin-top: 25px; padding-top: 0px;}
#scrollBox.fixed { position: fixed; top: 0;}
The #scrollBox sits until you scroll. Once you scroll past the top of the #scrollBox div javascript adds a class to make the #scrollBox position:fixed instead of absolute.
<script>
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#scrollBox').offset().top - parseFloat($('#scrollBox').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#scrollBox').addClass('fixed');
} else {
// otherwise remove it
$('#scrollBox').removeClass('fixed');
}
});
}
});
</script>
In Firefox and IE this works fine.
In Safari and Chrome once the #scrollBox javascript hits, the #scrollBox div jumps out of the #HangerLeft div into the middle of the page and ignores the positioning of the #HangerLeft div.
I have been battling this for 2 weeks and am at a loss.
Any help would be appreciated.

Ok, so I reworked your code. I kept it to your liking.. I would set this up in a different way but this works for your approach. You can see a live version here
JavaScript:
<script type="text/javascript">
function setupScrollBox(){
// cache box element and use wrapper as your position element
var hanger = $("#HangerLeft"),
position = $("#wrap").offset();
hanger.css({
position: 'absolute',
left: position.left - $("#scrollWrapper").outerWidth(),
marginTop: '25px'
});
}
$(document).ready(function(){
// check if IE6
var msie6 = $.browser.msie && $.browser.version < 7;
setupScrollBox();
// attach resize event to window
$(window).resize(function(){
setupScrollBox();
});
// check browser
if(!msie6){
// attach scroll event
$(window).scroll(function (event) {
// get scroll position and cache element so we only access it once
var y = $(this).scrollTop(),
wrap = $('#HangerLeft');
// if scroll position is greater than 100 adjust height else do nothing
if(y > 100)
// you can animate the position or not, your call
wrap.stop().animate({top: y}, 250);
//wrap.css('top', y+'px');
});
}
});
</script>
CSS:
#HangerLeft {
top: 100px;
}
#scrollWrapper {
width: 130px;
}
#scrollBox {
position: relative;
margin-top: 25px;
padding-top: 0px;
z-index: 10;
}
HTML:
<div id="HangerLeft">
<div id="scrollWrapper">
<div id="scrollBox">
<div id="mainContainer">
<div id="shareContainer">
<div class="moduleShareHeader">SCROLL BOX</div>
</div>
</div>
</div>
</div>
</div>