I want that when the user opens that chat or writes any message, the scroll bar to go down to see the latest messages. I have found the following answer that I want to use in order to accomplish the task.
https://stackoverflow.com/a/21067431/12051965
The problem is that it does not have any effect on the scroll bar, it is still at the top of the chatbox, and I would appreciate if someone could tell me what am I doing wrong.
let chat = document.getElementById("chat-messages-main-div-id");
window.onload = toBottom;
function toBottom() {
const isScrolledToBottom = chat.scrollHeight - chat.clientHeight <= chat.scrollTop + 1;
if (isScrolledToBottom) {
chat.scrollTop = chat.scrollHeight - chat.clientHeight;
}
}
.chat-messages-main-div {
width: 100%;
height: inherit;
overflow: overlay;
overflow-y: scroll;
display: flex;
flex-direction: column;
padding-left: 2%;
padding-right: 2%;
box-sizing: border-box;
padding-bottom: 15px;
}
<div id="chat-messages-main-div-id" class="chat-messages-main-div" onload="toBottom">
....
</div>
There is two issues with your code snippet the first one comes from the height: inherit, which make your div grow with parent element, so the scroll bar you are seeing is a parent node (the first fixed height parent if any or the window object) scrollbar and not the chat one, the div or its parent have to be limited in height for it to work, also your comparaison in the toBottom function should be a >= instead of <= (The scrollTop property is the number of pixel scrolled from the top), but i recommend you something easier (you dont need to check or calculate the position if its given that all you need to is to go to the upmost bottom of the scroll) :
function toBottom() {
chat.scroll(0, chat.scrollHeight)
}
Related
I have a function to determine the height of the page, so that the page always stays at the maximum size regardless of the device, without scrolling.
I first take the maximum height of let s = $ (document) .height and then the height of all other elements, such as the header, main footer and footer. I subtract the value of all items by the variable s, which contains the height total. I assign the result to the main height value, so the page is the way I want it.
However, when I change the device to chrome inspection feature, or I leave it in landscape, the page is irregular. So be sure to reload, try using windows.resize by calling a function, but it doesn't adjust, just reloads. I don't know what to do.
I call the function like this:
$("document").ready(function() {
changesize();
$(window).resize(function() {
changesize();
});
};
Any reason you couldn't use css to accomplish this? height: 100vh will keep an element at the viewport height even when resized, and using flex or grid you could stretch and scale the main layout elements however you need them.
body {
margin: 0;
text-align: center;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header, footer {
background: aliceblue;
flex: 0 0 auto;
}
.content {
flex: 1 1 auto;
background: lightblue;
}
<section class="container">
<header><h1>header</h1></header>
<div class="content">content</div>
<footer>Footer</footer>
</section>
I'm creating a chat app which when messages load (From Firebase), the div containing the messages scrolls to the bottom to display the most recent appended message div. scrollTop does somewhat work but it won't scroll all the way to the bottom, no matter what values I use for scrollTop. I've tried both the JS and the jQuery versions of scrollTop, but neither can get it to scroll to the bottom. Here's some of my code:
HTML
<div id="msgContainer">
<div id="msgFeed">
//Messages load here from a database
</div>
</div>
CSS
#msgContainer {
height: 165px;
overflow-x: hidden;
overflow-y: visible;
}
#msgFeed {
display: block;
background-color: white;
position: relative;
margin: 0;
overflow: hidden;
}
JS
function scrollToBottom (id) {
var div = document.getElementById(id);
div.scrollTop = div.scrollHeight - div.clientHeight;
}
or...
$('#scroll').scrollTop(1000000);
Doesn't seem to matter which version or what values I use, it just refuses to scroll that last approximately 5% of the way to the bottom. Any ideas what I might be doing wrong??
I dealt with a similar issue. I was receiving a value from a web socket to put into a chat box. Whenever I used scrollTop/Height, it always scrolled to the NEXT to last message (off just a bit). Even if I put in the max or a very high value, it would not scroll all the way.
This occurs b/c the dimensions of the container (with the added item) are not yet what we expect. A simple timeout will solve this problem:
setTimeout(() => {
el.scrollTop = el.scrollHeight;
}, 500);
If you're using Vue.js (probably something analagous in other reactive frameworks), you can also do the following ('this' is the Vue instance):
this.$nextTick(
() => (this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight)
);
'nextTick' seems optimal, but not everyone will be using Vue. Hope this all helps someone solve this simple yet not so evident problem.
EDIT: nextTick doesn't always seem to work. setTimeout should always work.
I don't know what element you were referring to with #scroll since I don't see it in your html, but try this and let me know if it still falls ~5% short.
$(document).ready(function(){
function scrollToBottom (id) {
var div = document.getElementById(id);
/*TRY*/
div.scrollTop = div.scrollHeight - div.clientHeight;
/*OR*/
$('#'+id).scrollTop(div.scrollHeight - div.clientHeight);
}
scrollToBottom('msgContainer');
});
#msgContainer {
height: 165px;
overflow-x: hidden;
overflow-y: visible;
border: 3px solid red
}
#msgFeed {
display: block;
background-color: white;
position: relative;
margin: 0;
overflow: hidden;
border: 1px solid blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msgContainer">
<div id="msgFeed">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
//Messages load here from a database
</div>
</div>
I have a header, in which i put my h1 and h2 headings at top. The problem is that header scrolls along the scroll bar which is of course normal but i want to fixed it at some point when all the headings on header scroll away. At this point I want header to stop and stays fixed.
I already tried fixed position but of course it fixed heading as well which exactly I don't want.
I also tried this JavaScript but no luck.
JavaScript
$(window).scroll(function() {
var _height = 120 - (120 * $(this).scrollTop() / $('body').height());
if (_height >= 80) {
$('.header_container').height(_height);
}
});
and here qre my HTML and CSS codes respectively.
HTML
<div class="header_container" id="header_container">
<div id="header_titles">
<h1 class="homepage-heading">Browse</h1>
<h2 class="homepage-heading-subtle">GENRES & MOODS</h2>
</div>
</div>
CSS
#header_container {
background-color: black;
width: 100%;
height: 120px;
top: 0;
left: 0;
right: 0;
}
#header_titles {
position: absolute;
width: 100%;
font-size: 35px;
text-align: center;
padding-top: 10px;
}
So, let me see if I get this...you want your header to be scrolled normally with the page until a certain point where it becomes fixed?
EDIT
Ok, well, you could determine the element on the page that you want the position to be triggered at. Like, the top of a certain paragraph, and use that position in your condition.
var condition = $(element).offset().top;
if($(window).scrollTop > condition) { //add a fixedClassName } else { remove the fixedClassName }
and have header.fixedClassName have those proprieties ( with position fix, top 0 and width: 100% to your header etc). Be sure to add and remove a class on the body that gives it padding-top with the height of your displaced header.
Used some similar effect here http://goodmen.se/ after a point the logo shows up in the header, then there's a background change. You do something similar with your position.
EDIT 2
Here's an example fiddle http://jsfiddle.net/Corsico/vpskd8hd/
So you want a sticky header?
In your javascript create a code:
var $header_container = $('#header_container');
var header_height = $header_container.outerHeight(true);
if($(window).scrollTop() < header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
$(window).on('scroll', function(){
if($(window).scrollTop()< header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
});
This will add a sticky class to your header, and then you can set the header to be fixed:
.sticky{
position:fixed;
top:0;
left:0;
width:100%;
display:block;
}
This should do it. When you scroll pass the height of the header, you'll get the 'sticky' class, if not, you'll remove the sticky class...
I wonder how I can achieve a borderless print.
At the moment my output looks like this:
I'd like to have the image start at the very top left corner. Is this possible? I already tried to set a negative margin to my print-style box, but the image will get cut then.
I know that maybe not all printers are capable of printing the area of the border, but in my use-case the picture will be white in these areas. (The mountain-image is just for demo purposes)
Can I specify the document border somehow via printTask?
See my current setup:
HTML:
<div id="pdf-render-output"></div>
CSS:
body > #pdf-render-output {
display: none;
}
#media print {
body > * {
display:none;
max-width: 100%;
}
html {
max-width: 100%;
border-top: 0;
}
body > #pdf-render-output {
display: block;
border: none;
max-width: 100%;
width: 100%;
height: 100%;
position: relative;
margin: 0; /* I tried to set negative margin/padding eg. here */
padding: 0;
}
}
JS:
$('#pdf-render-output').append("<img src="..." style=\"width: 100%\" />");
I played around with all possible margins/paddings and stuff, but the image will get cut and the white border stays 'over' it.
I hope that there might be a printTask-option I missed browsing the msdn?
Update:
I tried to set all margin/padding/border values with !important. No change.
Here is a screenshot from the simulator, displaying only the print-css-style:
I got to the point thinking it's an issue with the printTask itself. Are there any options regarding to this problem?
If the margin values of DocumentSource is set to 0, gaps will decrease very much. However, compared with PrintTask by C#+XAML, a top margin(Probably header/footer area) is made a little.
var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
var src = MSApp.getHtmlPrintDocumentSource(document);
src.rightMargin = 0;
src.leftMargin = 0;
src.topMargin = 0;
src.bottomMargin = 0;
src.shrinkToFit = false;
args.setSource(src);
}
In my environment, when this CSS was used, it has removed the margin without the necessity for src.rightMargin, etc.
#page {
margin:0cm;
}
I'm trying to replicate the effect on this website in the portfolio section where it slides a panel in the full size of the viewport and then slides it out when you click close.
Example here: http://alwayscreative.net/#portfolio
Here's my current markup:
<section class="panel" id="portfolio">
<section class="content">
<h1>What are you <strong>interested</strong> in?</h1>
<a class="btn-portfolio" id="btn-commercial" href="#">Commercial</a>
<a class="btn-portfolio" id="btn-residential" href="#">Residential</a>
</section>
</section>
The .panel section is 100% height and width of the viewport and I'd like 2 different panels to be able to slide in — one for #btn-commercial and one for #btn-residential.
Any ideas how to make this happen?
If it helps any, here's my site so far: http://www.freshbrand.ca/testlink/top40/#portfolio
Here's how you would do it with JQuery but clearly you can do it in normal javascript if you prefer. Set up the panels with position absolute in your css:
.panel {
position: absolute;
top: 0;
height: 100%;
border-width: 0;
margin: 0;
}
.panel inactive{
display: none;
}
.panel active {
display: block;
left: 0;
width: 100%;
height: 100%;
}
in your javascript (after the dom has loaded) get the screen dimensions and set the positions of the inactive elements to just off the right hand edge of the screen:
$('.panel').css('width', screen.innerWidth);
var setup = function() {
$('.portfolio-panel.inactive').css('left', window.innerWidth);
$('.portfolio-panel.active').css('left', 0);
}
setup();
When you wish to slide a panel in from the right, pass its id to the following function:
var slideIn = function(panelId) {
$('#' + panelId).animate({
left: 0
}, 400, function () { // animates the #left property from the screen width down to zero (i.e. slide it in from the right hand edge of the screen)
// tidy up
$('.portfolio-panel.active').removeClass('active').addClass('inactive');
$('#'+panelId).removeClass('inactive').addClass('active');
setup();
});
};
EDIT: The event handler would look something like this:
$('.btn-portfolio').click(function() {
slideIn($(this).attr('id').substr(4)); // extract the panel name from the id and pass it into slideIn
});
The only remaining issue is to eliminate the horizontal scroll bar you will probably see during the animation. Just add overflow-x: hidden; to the element to which the scroll bar belongs (probably body, but it depends on how you've structured and styled the rest of your site)
This is basically a single page website, a lot of jQuery plugins are available for the same.
I personally prefer
http://joelb.me/scrollpath/
Check out it's demo and download the code from github's link
https://github.com/JoelBesada/scrollpath
Hope this helps