Develop Reference

Vertical Chat scrolling is not working in VueJs

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..)

Basic "manga reader"-like carousel of images

I have several pages of a manga in .png format, around 300, and I would like to set up a section on my website so that users can read the manga, browsing through the pages using two arrows ("next page" and "previous page"). I don't care about animations between pages. The perfect example of what I want to achieve is MangaFox (not the whole website, just the window where you can read the manga).
The basic setting is: a 300px wide menu with the chapters list on the left, and manga pages appearing to the right. Either in the menu or below where the manga page img, two arrows let you go to the previous or next page.
I thought about using iframes: links to HTML pages containing each manga page would target the iframe and appear in it. However, this requires me to ceate an HTML page for each page, and set the links to the previous and next page manually. I would have 300 html pages, so this would be too heavy and time consuming.
I also tried linking the chapters list directly to the .png files, but the images are not styled as I would like (at least in Chrome, they don't appear in the center of the page, but rather in the upper left corner) and I would still have to set the previous and next arrows link manually.
Whai I dream of is:
- there's a list of the .png files, that sets a fixed order for the pages;
- a dropdown list in the left menu can point directly to a certain page in the list;
- the previous and next arrows recognize which image is being shown, and a click on the arrows skips to the next or previous item on the list. If there's no page before the current one, the "previous" arrow disappears; same for the "next" arrow in case the item is the last on the list.
Maybe there's a way simpler way to do it I didn't think of, but I can't find it.
Thank you in advance for your help!
(P.S.: I'm not using WordPress, just plain HTML, CSS and PHP)

Here's the simplest way I can think of doing this:
Left arrow
<a id="leftArrow" href="#{n-1}"></a>
Right arrow
<a id="rightArrow" href="#{n+1}"></a>
Set up onhashchange function that reads location.hash and sets the src attribute of the img element utilizing an array of pages you've defined somewhere:
window.onhashchange = function(){
var img = document.query('img');
var left = document.query('#leftArrow');
var right = document.query('#rightArrow');
var pageNumber = parseInt(location.hash);
//put some error handling here for edge cases, then...
img.src = imagesArray[pageNumber];
left.href = '#' + (pageNumber - 1);
right.href = '#' + (pageNumber + 1);
};
The page links in your side menu would have href="#{page number}" and would trigger the onhashchange function when clicked, updating the image and the arrows.
Hope this helps.

Maintaining scroll position after height of body is changed

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);

how to get mouse offset when I've scrolled down the page in IE, using JavaScript?

OK...here goes. I am working on a bespoke intranet system which has a holiday calendar.
This page is quite long and requires scrolling. This is where the problem comes in.
If I scroll down the page in IE(company policy) then click a day(this is a table cell)...a pop-up(div) should show up where I clicked. Now it shows up, but at the top of the page. Ideally its supposed to display where I click...
Any help is greatly appreciated as I'm a JavaScript & Jquery novice
Thanks

http://api.jquery.com/scrollTop/
Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements.
I guess you need:
var offset = $(window).scrollTop()
Another approach would be reading your jQuery Event:
$("a").click( function( jQueryEvent )
{
var offset = jQueryEvent.pageY;
})

Setting HTML page vertical position with JavaScript

I have a HTML page that scrolls up and down (not a lot, but it does scroll). How can I set the scroll position in the page after executing some JavaScript?
I'm using jQuery to inject some additional HTML at the bottom of the page and I'd like to programmatically scroll to the position of that new content after it's added.

Try using window.scroll.
Example:
// put the 100th vertical pixel at the top of the window
<button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>

Another way to do this, so that you have the option:
In the HTML you are adding to the bottom of the page, you can insert a named anchor tag and then change the URL so that the page moves there (FYI: it will not refresh the page).
// add HTML like this, dynamically:
// <a name="moveHere" />
// the javascript to make the page go to that location:
window.location.hash = "moveHere";
Depending on what you are doing, this may or may not be a useful solution.