I write a simple rss reader in JavaScript.
After loading new news items I want to scroll the view down so you can
read the new items.
var new_element = document.createElement('DIV');
new_element.innerHTML = loaded_feed_item_text;
parent.appendChild(new_element);
parent.scrollTop = parent.scrollTopMax;
Problem:
Some news items may contain pictures or other elements of unknown size.
And the elements load at unpredictable times.
So I load new items, scroll down to show them and then pictures load and
the items' height get adjusted and the view is no more scrolled down.
Desired result:
Elements load their subelements and the parent element is scrolled all
the way down to bottom to show the new elements.
I would consider putting a delay on this, as if you're just loading more and more content randomly and then scrolling the user to the bottom every time, they will not be able to read or view the content they want.
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); // Scroll to the bottom of the page
Also consider adding a button instead that says something like, "View Latest Posts" and then attach the preceding code to a function and call that.
Related
I am using chat scrolling in VUE JS. I want to have message scroll at the bottom of the page at every time when new message come or page load. I am trying to have a page scroll code in a function which works little bit surprisingly.
var container = this.$el.querySelector(".messages");
container.scrollTop = container.scrollHeight;
It is working but it cannot fully scroll down to the full bottom. With this, scroll remains at some position between top and bottom. When i trigger this one more time then it takes scroll to the full bottom. I want to have scroll on the bottom on first click not on two clicks. Please help me.
Are you sure your 'container' is full-filled on body or root element?
your code looks just fine...
You may better check:
1) URL bar height issue (on mobile)
2) HTML hierarchy and its css
3) CSS box model and default css values of html.
But still probs are following, If I were you,
I'll add a MAGIC PIXEL NUMBER (which bigger than the margin) like a boss!
Bigger (than its document height) value of scrollTop isn't throw any error. (but watch its cumulation..)
I am working on a page that has two states: edit mode and normal mode. The user switches between these states by clicking on a toggle button. Triggering edit mode adds more elements to the page (buttons, etc) and thus forces the body element to increase its height.
My issue arises when a user has scrolled down the page and then triggers edit mode - since the page's height has now increased, their current scroll position is lost. I have been trying to find a way through which I can calculate what the new scrollTop should be, but have not been successful.
I've got a jsFiddle as an example of my issue. It automatically scrolls to the third "entry", to simulate a user having scrolled down that far. Clicking the "trigger change" button in the top right hand corner will add more elements to the page, and the scroll position of having the third entry at the top of the page is lost.
I am aware that I could just redo $('body').scrollTop($('.entry:nth-child(3)').offset().top); after the new contents have been added, but I want the scroll position to be remembered for no matter where the user has scrolled to on the page.
http://jsfiddle.net/Jn8wq/2/
Any help is greatly appreciated!
Check this fiddle.
http://jsfiddle.net/Jn8wq/4/
I added this
var tempScrollTop = $(window).scrollTop();
//your append logic
$(window).scrollTop(tempScrollTop+9);
You would notice that I added '9' to the scroll position. It suits your requirement in the given fiddle. But when you implement this on your actual site, you would have to calculate the height of new appended divs dynamically and add that height instead of '9'.
To keep an element where it is in the window after something changes above it, try this:
var tmp = $('#element').offset().top - $(document).scrollTop();
// add stuff
$(document).scrollTop($('#element').offset().top - tmp);
I have gone through all related questions. But didn't find any answer.
My question is i have scrollable div tag, a chat window, in which images can be dropped as well. I have span tag at the end of every message so using this code the div tag scrolls properly to the bottom.
var EndChat = $(myid);
var chat_target = EndChat.find('span').last();
EndChat.scrollTo(chat_target, 1000);
But When i append Image after resizing it, It doesn't get to the bottom. It stop at 1/4th of the image.
And when the chat loads in the beginning, if there are many images, the scrolling stops even more far from the bottom. Please Help
Why don't you scroll to the bottom of the chat using:
EndChat.scrollTop(EndChat[0].scrollHeight);
It works: http://jsfiddle.net/shawn31313/mb6JA/
In order to make sure the images have loaded before scrolling, attach an event to the load, something like this:
$('.chat img').on('load', function() {
var chat_target = EndChat.find('span').last();
EndChat.scrollTo(chat_target, 1000);
});
If I'm not mistaken, whenever an image in .chat is loaded, it'll trigger the scroll to the footer. You could modify it as necessary :)
I'm building something where I show users items that they haven't seen.
Each item is in a <div>, so when the user scrolls past a div, or views the div, I want that item to be marked as having been seen.
Google reader does this, if you scroll past an item in your feed there it automatically marks it as read.
How can this be tracked? Advice please.
Note: It shouldn't be restricted to using the mouse to scroll, hitting page down/up, using arrow keys, etc should also be counted. The main criteria is that the user has seen a div.
You need jQuery's scrollTop.
Something like:
$(window).scrollTop() > $('#mydiv').offset().top;
for when it first comes into view, or add $('#mydiv').height() to the top offset if you want it to be marked when it's fully in view.
You could use a solution like this, http://www.appelsiini.net/projects/viewport, which I used in the past.
Or see this for other solutions: Detecting divs as rendered in the window to implement Google-Reader-like auto-mark-as-read?
Have a look at $("#divid").scrollTop().
I think you'll need something like this...
$(window).scroll(function(){
var scroll = $(this).scrollTop();
var vieweditems = $('div').filter(function(){
return scroll> $(this).offset().top;
//compare the div's offset top with the window scroll position
// this returns the collection of viewed divs
})// this object is colleection of viewd divs
.removeClass('hilight')
//Remove the class which distinguishes the unread and read items
.map(function(){
return this.id.split('_')[1];
}).get();
//This is the collection of ids of viewd divs
//vieweditems now holds the ids of viewed divs
});
I have a pagination system like this:
[content]
1 2 3 Next >
when you click on 1/2/3/next the [content] element gets replaced trough ajax.
the problem is that the screen focus moves up if the new height of the [content] is larger than the previous one.
can I force the screen to stay focused where where the pagination links are?
You need to find the position of the element and scroll to that position each time the height changes. Something like:
var p = $(".links").position();
$(window).scrollTop(p.top);
To make the page transparently appear to stay in the same place, you'll need to find out where the links are before you load in the new content.
var before = $(".links").offset().top;
Then after the new content is loaded, get the link's new height.
var after = $(".links").offset().top;
Then do the math to find out how much it's moved.
var difference = after - before
And update your window's scroll location accordingly
$(window).scrollTop( $(window).scrollTop() + difference )
You can probably fix this without jQuery or javascript... Just create a named anchor where you want the top of the page to be after the user clicks the navigation links, put the name of the anchor in the fragment identifier of the nav links, and don't cancel the event so the page navigates to the anchor.
<a name="contentTop"></a>
[content]
Next