I'm working on this question/answers type of chatbox and found many questions/solutions related to having auto scroll to the bottom of div. As I understand, this line of code here would do just that.
var scrollingChat = document.querySelector('#chat')
scrollingChat.scrollTop = scrollingChat.scrollHeight
However, since there can be multiple answers to the questions, they can be longer than what viewable screen can display. With the code above, it's automatically scrolling down to the bottom of the chatbox. What I want is to have scrolling to stay at the current position and it's up to user to scroll down to see additional answers displayed, especially since the first answer should be the most relevant.
Is it possible to do so? I tried to comment those lines of codes but it doesn't do anything. Any help or recommendation on how I can do that is greatly appreciated.
UPDATED - maybe I can better explain here. In my chatbox, I have these dynamic div elements:
<div>... something... </div>
<div class="from-user" id="questionDiv_1"</div>
<div class="from-system" id="answerDiv_1_0"</div>
<div class="from-system" id="answerDiv_1_1"</div>
<div class="from-system" id="answerDiv_1_2"</div>
</div>
So in this case, as soon as the user type in the question, there will be multiple answers coming from the backend system. Can I have the scroll to stay at the questionDiv_1 element and not automatically scroll down to the bottom of my chat div? How do I do that?
Related
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
What is the best way to approach this problem?:
I have a list that has names which you can click on. When you click on the name, the list disappears and information about that name appears. However, that list is often longer than the information, so if you click on a name toward the bottom of the list... the list is replaced with the information (so the page gets shorter). However, Chrome (on OS X 10.8) keeps the current scroll position even though the scrollbar has shrunk... so a user will see just a gray screen (because the page no longer goes that far down).
Any help would be greatly appreciated! I can clarify the question if needed :)
Edit: I had previously tried what AwokeKnowing suggested, but it's not a great option because if the added content is already in the viewport scrolling to the top has a "jerky" feeling to it. You can already see it being added, so why adjust the scroll in that case? There needs to be a way to test if the content is visible in the viewport or not.
$("button").click(function(){
alert($("div").scrollTop());
});
Also, AwokeKnowing also suggested this may simply be a browser bug. If that's the case, is there a work around?
Edit 2: More specifics, the names are a list of links (<a href="#">) in a bootstrap tab-pane and clicking on them creates a new tab-pane and switches to it. The issue is that the newly created pane is significantly shorter than the one with the list on it. Switching to the shorter pane creates the unwanted behavior.
with jquery you can scroll to any element, so just scroll top your div when you handle the click
$("button").click(function(){
alert($("div").scrollTop());
});
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?
I've had a look for the answer but with no luck so far.
At the moment the scrollbar and arrows are postioned inside the same
div as the scrollable content - which in most cases makes sense. I
want to know if there is a way to place the scrollbar and arrows
outside of this div in a different location in the html page? Is there
a way to specify the place they should go?
Example:
<div id="content">
Lorem ipsum....
</div>
Gets turned into:
<div id="content">
<div class="scrollpane">
Lorem ipsum....
</div>
<div class="scroll-bar">
### scroll bar and arrows here ###
</div>
</div>
But I want to get this:
<div id="content">
<div class="scrollpane">
Lorem ipsum....
</div>
</div>
[other html other html and content other html]
<div id="scrollbar-here">
### scroll bar and arrows here ###
</div>
Any help much appreciated, or a link to the answer that I've missed
would be equally helpful. I'm using jquery1.4.3 and jScrollPane -
v2.0.0beta6
I just answered this question where you had posed it to the google group:
http://groups.google.com/group/jscrollpane/browse_thread/thread/ff2e10b8d784fed6
Here is the answer for other searchers:
Unfortunately that isn't currently supported. There are a few of ways you could attempt to achieve it:
Use absolute positioning on the jspVerticalBar and/or jspHorizontalBar and try to move them so that they appear elsewhere in your document.
If you are only interested in the arrows then you could easily hook some different buttons up to the API so that they called scrollBy to do the scrolling [see http://jscrollpane.kelvinluck.com/scroll_to.html ]. Additionally you can hook up to the jsp-scroll-x/y events to mark your homemade arrows as disabled when relevant [see http://jscrollpane.kelvinluck.com/events.html ]. And you would use CSS to hide the "real" scroll bar and arrows.
You could try using javascript to move the elements (e.g. something like $('#myDiv').append($('.jspVerticalBar')); ) - no guarantees this won't have some strange side effects though!
Hope it gives you some ideas. If you want to add this as a feature request on the github issues list then I'll try to look at it in the future (it'll won't be soon though - I'm really busy with client work at the moment).
For some reason I can't comment on vitch's answer but I just wanted to document for anyone coming to this page that option 3 and some simple CSS adjustments (the main one being switching position:absolute to position:relative on .jspContainer) worked for me.
I have a DIV that has plenty of child DIVs inside of it. What I want is similar to Firefox's tabs, when you have too many tabs open or the main DIV width is too small, the interface will detect overflow and show a button on the right side to list all hidden tabs. The problem is that I have no idea where to even start looking for help.
Is you main DIV set to overflow:hidden?
If so, you can test its need to overflow by incrementing the scrollLeft property and then querying it to see if it's changed:
function containsTooMuch(el) {
var original = el.scrollLeft++;
return el.scrollLeft-- > original;
}
Googling turns up this:
http://knitinr.blogspot.com/2008/08/javascript-warn-if-overflow.html
looks nice and framework independent.
But maybe somebody comes up with a solution that works with less code.
Oh and guess which popular coding community site screws up the Googe results for
javascript detect overflow
:)
My approach would be to work from how new DIVs get added. Whatever event causes this to happen, I would add a handler to the document that runs a script which checks the size of the various DIVs to ensure that they meet your requirements. If they are too large (or too many), then you hide some of them and add your button with it's display logic.