Forcing scrollbar to the bottom jquery/css - javascript

I have created a chatroom which elements are li. I want it to always stick to the bottom. It works fine when number of chats are like 10-20 but after that it stops halfway. I think there is something wrong with the height but I can't figure it out here is my html :
<div id="chat-main">
<ul id="chat-list">
//I dynamically add <li>s using ajax
</ul>
</div>
<div id="message-panel">
<form class="form-inline" id="messageForm">
<input id="message-value" type="text" autocomplete="off" maxlength="510" placeholder="Type your message...">
</form>
</div>
Here is my css:
#chat-main {
height: 84%;
border: 2px solid #d8d7cf;
}
#chat-list {
height: 100%;
overflow-y: scroll;
}
#chat-main>ul {
padding-left: 10px;
list-style-type: none;
}
And this is the jquery code for scrolling:
$("#chat-list").animate({ scrollTop: $(document).height() }, "slow")
I'm really stuck and don't know what is wrong.
Edit: here is my jsfiddle sorry for the chat objects I inserted alot so you can see what happens :
http://jsfiddle.net/L8msx/19/

Using document height doesn't seem logical, this will get the exact overflow of the chat :
http://jsfiddle.net/1yLzkgw8/
var chat = $("#chat-list"),
overflow = chat[0].scrollHeight-chat.height();
chat.animate({scrollTop: overflow}, 'slow');
When getting scrollHeight, plain JS is used so the DOM node itself is retrieved with [0].

Related

scrollTo() function does nothing

I wanted to scroll to the bottom of the page using vanilla JS, but I encountered a problem. The code below is supposed to scroll to the bottom of the page:
window.scrollTo(0,document.body.scrollHeight);
Whereas all it does is logs "undefined" in the console. Inputting
document.body.scrollHeight
returns an integer 736. Other than that, it doesn't matter what I input into the function's parameters, nothing happens. What more, it only happens on one website. What may matter (not sure) is that the website hides its vertical scrolling bar, even thought it has a really long list of content.
The problem might be that the actuall scroll that you have on the website is not the scroll of the body but a scroll of another element inside that body.
Here is an example:
$('#btn1').click(function() {
window.scrollTo(0,document.body.scrollHeight);
});
$('#btn2').click(function() {
el = $('.a')[0];
el.scrollTop = el.scrollHeight;
});
body {
overflow: hidden;
margin: 0;
padding: 0;
}
div.a {
height: 100vh;
overflow: auto;
}
div.b {
height: 1500px;
position: relative;
}
div.c {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<button id="btn1">Scroll body - doesn't work</button><br />
<button id="btn2">Scroll element - will work</button>
<div class="c">This is at bottom of page</div>
</div>
</div>
Note - the usage of jquery is only to make the example shorter.
Put some content in your page o style the body heigth = 1500px for example, then try to execute same code.
Solved. This is what had to be done:
document.getElementsByTagName('body')[0].style.display = "block";
For whatever reason, changing the display to "block" enabled the scrolling using the given code:
window.scrollTo(0,document.body.scrollHeight);
If you will try to type in browser's console like a var a = 5 you also will get undefined. It happens that your example and my did not return anything.

Automatically Scrolling a webpage with animating div

I am making a web app. I have created 25 divs.
I have Used jquery fadeIn() by which divs are gradually made and displayed one after another on screen.
But problem is that when 25 divs have been created, scroll is created due to which first 4 divs can be seen but the remaining can't be seen until user scroll the page.
I want that as one by one div is created, the page should automatically scroll to the div recently created and so on this process should be continued until the last div is created.
You can use
$('html,body').scrollTop($(".answer.visible:last").offset().top);
$(function() {
$(".answer").hide();
$('#demo').click(function(e) {
var _div = $('.answer[style*="display: none"]:first');
if (_div.length) {
_div.fadeIn();
$('html,body').animate({
scrollTop: _div.offset().top
},
'slow');
} else {
$(this).text('Done..!');
}
});
});
#demo {
position: fixed;
bottom: 0px;
left: 0px;
}
.answer {
width: 100%;
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>
I think this looks pretty cool when we use slideDown+scrollTop. Check fiddle
Documentations
To get the coordinates
http://api.jquery.com/offset/
Set vertical position of the scroll bar
https://api.jquery.com/scrollTop/
Set horizontal position of the scroll bar
https://api.jquery.com/scrollleft/
I found this link here
smooth auto scroll by using javascript
Using this you could create something like this here:
http://jsfiddle.net/mrc0sp5j/
The main point is, that you create a scrolling-function using
window.scrollBy or window.scrollTo
http://www.w3schools.com/jsref/met_win_scrollto.asp
With jQuery .last or .eq you can specify which element you want to scroll to
$(".mydivobjects").eq(x).position().top
Hope this helps
cheers

Toggle div on div click horizontally

I made a div which has a background image of a face, I have designed div which contains a paragraph, 2 buttons and an input box.
I know this question has been asked quite often however my situation is different, I'd like for my div with the background image of a face to be clickable so that the div containing everything else slides out from the left.
What is the best method to do this?
HTML
<div id="image"></div>
<div id="container">
<p>I like nutella and croissants</p>
<input id="message" placeholder="type...." required="required" autofocus>
<button type="button" id="send">Send</button>
<button type="button" id="close">Close</button>
</div>
CSS
div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }
JQUERY
$(document).ready(function(){
$( "#image" ).click(function() {
jQuery(this).find("#container").toggle();
});
});
Using the article link posted by Raimov (which I actually came across in a Google search before realize he posted it as well ;), we can use jQuery to animate the width when the toggling element is clicked. Remember that a background does not add size to an element, so the toggle with the background image must have a height attribute set. Also, if you have long lines of text in the form, you'll have to wrap them yourself or use another method from the article.
http://jsfiddle.net/iansan5653/wp23wrem/ is a demo, and here is the code:
$(document).ready(function () {
$("#image").click(function () {
$("#container").animate({width: 'toggle'});
});
});
and this CSS is necessary:
div#image {
background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
height: 36px;
/*height needed to actually show the div (default width is 100%)*/
}
#container {
white-space: nowrap;
overflow: hidden;
}
I created a jsFiddle for you, where after clicking on img, the form hides to the left.
$("#image").click(function() {
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() : 0
});
The resource was taken from:
Tutorial how to slide elements in different directions.

Hidden div is moving when it's shown

+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?

Scrollable Content With Javascript in a Div with overflow:hidden

I have a need to display a lot of image thumnails in a small space.
My idea is to have 3 columns of thumbnails with an undetermined amount of rows. I planned to put this content in a and then put that inside a viewport div. Like so:
<div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
<div id="content" style="width: 300px; height: 100000px;">
Rows of thumbnails go here
</div>
</div>
Previous
Next
Autotrader's image control is exactly what I am going for if an example helps illustrate my point.
I think what I need to do is change the topMargin of 'content' over a period of time with javascript for a scroll effect when one of the buttons is clicked.
I don't mess with javascript much and I'm not sure where to start. Can someone point me in the right direction?
So I finally took 30 seconds out of my day and learned what jQuery is and how to use it.
=0
This is a simple example doing the movement I was looking for.
You have to download jQuery to make it work. http://jquery.com/
I'll leave the question up in case anyone else needs something like this.
<script src="../jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#next").toggle(function() {
$("#content").animate({ marginLeft: '0px'}, 'slow');
}, function() {
$("#content").animate({ marginLeft: '-100px' }, 'slow');
});
});
</script>
<div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
<div id="content" style="width: 300px; height: 100000px;">
Rows of thumbnails go here
</div>
</div>
<a id="next" href="">Previous</a>
<a id="prev" href="">Next</a>
If there is a better way, let me know....

Categories