We Keep Coding

Scroll to bottom of hidden div?

I have a simple chat JS application, with a div.chat-holder holding all chat messages within a pane on the overall window. I set height of '.chat-holder so it remains fixed in size, and allows for scrolling of all the messages.
<style>
.chat-holder {
height: 30px;
overflow-y: scroll;
}
</style>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">
first msg
</div>
<div class="chat-item">
second msg
</div>
....
<div class="chat-item">
last msg
</div>
</div>
</div>
On page load, I scroll to the bottom by setting the scrollTop of the holder:
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
and this works fine.
Problem occurs when I start with div.pane set to display:none. Ideally, I look to have a separate event to "show/hide" the chat pane, and start with the pane hidden.
When the parent pane is hidden, the .chat-holder scrollHeight is 0, so on load, the hidden pane won't be scrolled to the bottom. Which means when the pane is displayed, the chats are not scrolled to the most recent chats. You can see this in the following snippet: with .pane initially not displayed, scroll isn't set. If you set .pane to start displayed, then scroll works fine.
Is there anyway to "scroll to the bottom" while parent is hidden? (Yes, I know I could do this by detecting when the chat-holder is exposed & then scroll to the bottom, but I'm looking to do it on load.)
$(function() {
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
$('button').click(function() {
$('.pane').toggleClass('active');
});
});
.chat-holder {
height: 30px;
overflow-y: scroll;
border: thin solid black;
}
.chat-item {
font-size: 20px;
}
.pane {
display: none;
}
.pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">first msg</div>
<div class="chat-item">second msg</div>
<div class="chat-item">last msg</div>
</div>
</div>
<button>Toggle pane</button>

You can get creative and use opacity or visibility rules instead of display: none:
$(function() {
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
$('button').click(function() {
$('.pane').toggleClass('active');
});
});
.chat-holder {
height: 30px;
overflow-y: scroll;
border: thin solid black;
}
.chat-item {
font-size: 20px;
}
.pane {
opacity: 0;
position: absolute;
z-index: 1;
}
.pane.active {
opacity: 1;
position: relative;
}
button {
z-index: 2;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">first msg</div>
<div class="chat-item">second msg</div>
<div class="chat-item">last msg</div>
</div>
</div>
<button>Toggle pane</button>

Javascript/jQuery - Parallax effect on divs containing content

I want to create a parallax effect on divs on click on an element. I have html set up like this:
<div id="app">
<div id="main-section">
<top-bar></top-bar>
<div id="main-content">
...
</div>
</div>
<div id="item-detail">
</div>
</div>
I have an image slider in main-content div, and on click of an image slider div item-detail is being populated with content, on the page load is empty. Now I would like to somehow get the parallax effect of when the div is populated, that it scrolls to the top-bar and goes over the main-content div.
I have tried with something like this:
$('html, body').animate({
scrollTop: $("#item-detail").offset().top
}, 1700);
parallaxScroll();
function parallaxScroll(){
var scrolledY = $(window).scrollTop();
$('#item-detail').css('top','-' + ((scrolledY*1.3)) + 'px');
}
And the css for the divs:
#main-section {
position: absolute;
top: 0;
height: 900px;
width: 100%;
background-image: url('/img/cover.png');
background-size: cover;
}
#main-content {
position: absolute;
top: 77px;
height: 833px;
}
#item-detail {
position: absolute;
top: 900px;
z-index: 1;
}
But it didn't work for me, and both main-content and item-detail have top set to 0 after the function was executed on click.

JQuery Hide/Show on Scroll down

I'm new to jquery. I'm trying to write a script that will hide the div "box" and all children. When the user scrolls to the bottom of the page, the div "box" and all children display. For time's sake, we'll say the children are "chamber1", "chamber2" and "chamber 3".
when I hide "box", it only removes that div.
$(document).ready(function() {
$("#box").hide();
});
Apologies for lack of code, but I'm having trouble understanding this lesson and I can't find an exact example of what I'm trying to do through my internet searches.
Thank you!

If you to hide the box when you reach the bottom of the page, you javascript should be as follows:
JAVASCRIPT:
$(document).ready(function() {
$(document).on("scroll", function(){
if ( window.scrollMaxY == window.scrollY ) {
$("#box").hide();
}
})
});
HTML:
<div id="box">
<div>Chamber 1</div>
<div>Chamber 2</div>
<div>Chamber 3</div>
</div>

You should make sure that the div has id "box". If you're working with a div of class "box" then you would use:
$(document).ready(function() {
$(".box").hide();
});

I think this might help you and would be better to understand. A good explantion is given below here with demo.
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).outerHeight() == $(document).outerHeight()) {
//Script for activity on reaching bottom of document
$("#box").fadeOut();
} else // optional
{
$("#box").fadeIn();
}
});
body {
margin: 0px;
width: 100%;
}
.container {
position: relative;
height: 900px;
width: 100%;
background: #fee;
}
#box {
position: fixed;
top: 50px;
left: 0px;
background: lightblue;
height: auto;
padding: 15px;
overflow: hidden;
max-width: 250px;
width: 210px;
}
#box > div {
margin: 5px;
background: #F33636;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
</div>
<div id="box">
Box
<hr>
<div class="chamber1">
Chamber 1
</div>
<div class="chamber2">
Chamber 2
</div>
</div>
JSFiddle
You can play around with Fiddle Link.

horizontal slide in html

I know that this is a frequent question but I can't find an answer that matches my requirements.
In short, I want to horizontal slide a box from the right-side (insivisible) part of the screen to the left and then from the left back to the right.
The html/css/js below demonstrates what I want:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
#box-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80em;
background-color: #f00;
}
#box-2 {
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 4em;
background-color: #0f0;
}
#viewport {
overflow: hidden;
position: relative;
height: 100em;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="viewport">
<div id="container">
<div style="position: relative">
<div id="box-1">
</div>
<div id="box-2">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
});
</script>
</body>
</html>
Now, everything might seem fine except for two important things:
I do not want to specify a height for the outer viewport. I would like this viewport to adopt automatically the height of the highest item in the container
this code does not do what I want if you scroll down at the bottom of the page when the red box is visible and click on it: the green box comes within the viewport but it is scrolled at the bottom. I would like the green box to come in view directly. As a bonus, it would be nice if once the green box is in view, if I click on it, the red box came back in view at its previous scroll position.
Of course, this example has lots of other limitations (the default animation function provided by jquery sucks, etc...) but I believe I can fix them later.
Given the limitations of the solution I have posted here, I suspect that I did not chose the right approach but I have no idea on where I should start.

You need to scroll to the top of the div when you click on the box.
Here's the code:
$(function() {
var vheight = Math.max($("#box-1").height(), $("#box-2").height());
$("#viewport").height(vheight)
});
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
$('html,body').animate({
scrollTop: $("#box-1").offset().top
});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
$('html,body').animate({
scrollTop: $("#box-2").offset().top
});
});
I also updated the JS Fiddle: http://jsfiddle.net/Av7P3/1/

Auto resize height CSS

I have html code like this
<div id="wrapper">
<div id="collapse"></div>
<div id="content"></div>
</div>
the css code
#wrapper {
width:100%;
height: 100%;
}
#collapse {
width:100%;
height: 30%;
}
#content {
width:100%;
height: 70%;
}
what i want to ask is how to make the #content height fit the #wrapper when the #collapse is hidden (assuming there is a js script that make the #collapse show and hidden) ?

Try this:
HTML code:
<div id="main">
<div id="Example">Hello</div>
<button id="Toggle">Toggle</button>
<div id="body">This is Body!!!</div>
</div>
JS code:
$('#Toggle').on('click', function() {
$('#Example').slideToggle({
duration: 1000,
easing: 'easeOutCubic'
});
});
CSS code:
#Example {
height: 100px;
background: #cc0000;
}
#main{ height:500px;
background-color:yellow;}
#body{ height: 100%;
background-color:blue;}
you can remove button and customize this code.
see this DEMO

You can do this with jQuery .
See the example
[http://jsfiddle.net/atinder123/6hq8h/][1]
[1]: http://jsfiddle.net/atinder123/6hq8h/

in the same JS that hides the collapse element you add
document.getElementById('content').style.height = '100%';
and of course in reverse when you show collapse again