How can I auto-scroll as content is added to a div? - javascript

I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?

You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/

I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.

Related

How to know if an element has finished displaying on the screen (finished rendering) - Javascript

Let's see if someone comes up with something. I have the following problem:
I need to know, with javascript or jquery, when an element has finished displaying on the screen.
It is a table that is displayed on the screen as a modal popup window. It has a main container div with the size of the entire viwport, with a z-index of 10000 and display flex so that the div that acts as a popup window is centered. What I need to know is the clientWidth and offsetWidth properties of the body of the table to determine the width of the scroll bar which is equal to offsetWidth - clientWidth, and apply this width to the right margin of another div.
When the table is finished filling in a javascript function, the d-flex class is added to the main container so that the popup modal window is displayed.
The problem is that until the popup is not physically seen on the screen it gives me that both properties are the same, that is, there is no scroll bar visible. Only when popup appears on the screen is that they are different because there is a scroll bar. The scroll bar only appears when the popup has been physically displayed on the screen.
If I ask for any visibility properties they tell me that everything is visible but it hasn't really been shown on the screen yet.
I've even tried with a jQuery extension of the show function, but it doesn't give me the results I need either.
Thank you very much for your collaboration.
Greetings
You could do a work around IF you never desire the two property values to be the same. You could implement a setInterval to keep checking the property values:
let x = setInterval(function(){
if (propertyValue1 !== propertyValue2){
clearInterval(x);
//do or trigger any code that you need to here
}
},100)

Perfect scrollbar continues to be displayed even after content is reduced

I am trying perfect scrollbar. The scrollbar works fine... it starts display of the scrollbar when content exceeds.
...BUT!
When content is deleted to be less than the div's height, I would expect the scrollbar to go away. It does not. It goes only after the dragger is moved up or the rail above the dragger is clicked on.
To let the scrollbar go right away after the content is deleted, does this require use of the eventhandlers and be done programmatically in Javascript? I would have expected this to be a default behaviour. There is nothing much to show in code but here is how I initialize it:
const ps = new PerfectScrollbar('#editDiv', {
maxScrollbarLength: 60,
minScrollbarLength: 30
});
I had initially changed the CSS to alter the width of the scrollbar and change colors. Just to be sure, I reinstalled the CSS with zero changes just to check this behavior. And its still the same.
EDIT: Try with the browser's default scrollbar. The scrollbar goes as soon as the content is deleted to be less than div's height.
Use ps.update() if the content changes.

Vertically Scrolling in Window 8 store app

I am developing a windows 8 store app using HTML5 and Javascript. And I want to scroll some div content vertically. I am using following inline css to do so
<div style="height:100%;overflow-y:scroll;">
//Content
</div>
But Its only showing scrolling bar and i am not able to scroll the content.
This is how i am getting my scrolling bar, as you can see last input box is showing half and i cant scroll it.
I think i found a quick solution for this problem. Instead of giving height as 100%. Just give height in pixels that will cover your current window till bottom.
For example:
If your screen height is 780px, and you have 80px height covered by header. So if you want to use scrolling in remaining 700px. Use following code :-
<div style="height:700px;overflow-y:scroll;">
//Content
</div>
Hope it ll work for you as well. But Stil looking for alternate solution , if there is any.
In general, this is not a Windows Universal App problem, but simply an HTML/javascript one. By default, browsers scroll the body content that exceeds the browser window, but in the UWP JS app, no scrolling is provided by default. So, to make the content scrollable, you do need to provide a height, but the height may be dynamic. Using javascript, you can set the height more appropriately based on the user's screen size.
Basically, in the main javascript file, you can set the height of the scrollable region.
body {
overflow-y: scroll;
}
function setElementToRemainingWindowHeight(selector, usedHeight) {
$(selector).height($(window).innerHeight() - usedHeight);
}
function calculateUsedHeight() {
return $('.header').innerHeight() + $('footer').innerHeight();
}
$(function(){
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
window.resize(function() {
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
});
});
You can move the code to respond to whatever event in your app that would cause the scrollable area to change (maybe things are entering and exiting the surrounding layout, or whatever).
Depending on when the items in the list are added, and how that adding occurs, your requirements may change. See this post (which I wrote) about how to do this more dynamically...

Title text placement off after scroll

My problem is that after scrolling in the #leftnav the #leftnavHover does not position itself according to the new top css value. I need the #leftnavHover div to follow in the same way the native title text for the browser does.
Here's a fiddle http://jsfiddle.net/fauverism/b4rwb/6/
Here's a step by step of what I'm describing...
Visit the link and hover over Sabers in the nav
Scroll inside the nav div
Hover over Sabers again and you'll notice that the placement of the Sabers text inside of the #leftnavHover is in the same place. The div placement does not insert the new topAfterScroll array. The array is only present once and it then gets removed with the original value.
Here are some details...
I can't seem to store the array that is retrieved after the scroll from topAfterScroll into a new var
This only has to work in Chrome :)
Yes I know that this does seem strange to do since browsers handle this functionality just fine. It's a Chromium issue.
Just subtract the scrolled pixels using jQuerys scrollTop (API) on #leftnav like this:
$('#leftnavHover').text(this.title).css('top', this.offsetTop - $('#leftnav').scrollTop());
http://jsfiddle.net/b4rwb/7/

Resizing a div to fill the browser

I have a page with many divs and style, with my div buried somewhere inside.
I am trying to have a button that automatically makes my div, that includes a video player, resize and capture the whole browser.
In order to do that I am trying to get the current position of the div and then position it relatively so that it'll get to the top-left corner so I could then use document.body.clientHeight/clientWidth.
Can't get this to work.
I tried the approach of moving my div to the first div and then resizing however this messes up the flash player.
Any ideas? any different approaches?
Thanks,
Guy
Use one of the lightbox clones that can handle DIVs. They usually copy the DIV in question into their own view DIV, which helps with positioning issues and you don't have to do anything to the buried div.
I find Multi-Faceted lightbox to be very easy for customizations:
http://www.gregphoto.net/lightbox/
but there are lots of others around as well.
Why relative?
You should rather use fixed instead of relative. Then set positon to 0,0 and width and height to 100%.
Simple js can do this.
On click, just set the div's style to 'fixed', and position 0,0. Like:
var theDiv = document.getElementById('yourDivsId');
theDiv.style.position = 'fixed';
theDiv.style.top = 0;
theDiv.style.left = 0;
This should do the trick:
<div style="position:absolute;top:0;left:0;width:100%;height:100%">
some content here
</div>

Categories