Prevent full page scrolling up on load() - javascript

I am using .load() to refresh the contents of a div every 5 seconds.
When the div updates, the whole page will scroll back up to the top. Is there any way to prevent this from happening?
<body>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<div main-title>Title</div>
<paper-button class="custom white" raised>Log Out</paper-button>
</app-toolbar>
</app-header>
<div id="loadcards"></div>
</body>
$("#loadcards").load("getGraph.php");
$(document).ready(function(){
setInterval(function(){
$("#loadcards").load("getGraph.php");
},5000);
});

Your page scrolls back to the top when you reload because your browser very briefly does not have any content for your div. This causes the content of your page to become too small to require a scrollbar, but when the content is reapplied it might grow large enough to require a scrollbar yet again.
Option 1
You could set the Y offset to the top of your page everytime before the reload is called, then scroll back to that offset whenever the page finishes reloading (or at least as far down as possible if the page is smaller than before).
You can obtain the current offset from the top of the window with the following code:
var offsetY = $(window).scrollTop();
If you want to scroll back to where you were before, you can do so by calling the following:
$('html, body').animate({
scrollTop: $(this).offset().top
}, 300);
This will gradually scroll, but you can set 300 to 0 if you want it to scroll instantly.
Depending on the efficiency with which your page loads, you'll probably still see a jump in the page contents.
Option 2
You can alternatively put your entire DIV inside a container with a fixed height, and reload the contents inside. You should set at least a min-height on the container div.
<div style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
Set SOME_VALUE to whatever comes closest to your actual page size. This should prevent the page jump as well, but will cause your page to have a minimal height even when the actual contents are smaller.
Option 3
The most advanced solution would be to use a container DIV and set the height to whatever the LoadPage height is just before you reload. This way it will only reset AFTER you reload your page.
<div id="cardscontainer" style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
With the following changes to your JS:
setInterval(function(){
$("#loadcards").load("getGraph.php");
$('#cardscontainer').height($('#loadcards').height());
},5000);
EDIT: I swapped the 2 functions inside the SetInterval callback function because it would result in weird behaviour if the LoadCards DIV would be smaller than before.

Related

Why is my scrolltop function scrolling to different parts of the page depending on my position, only on mobile?

I have a function that scrolls to an element when a button is clicked. The problem is this does not work correctly on mobile. Only when at the top of the page and clicking the button, it scrolls to the correct position. But if I scroll to any other position, the function somehow gets affected and the page scrolls to a different position than the element. Why? On desktop it works fine.
My jquery:
$('.stelsamenknop').click(function(e){
$('html, body').animate({
scrollTop: $("#aantalenformaat").offset().top - 20
}, 1000);
});
How can I make sure it always scrolls to the element aantalenformaat no matter what position the user is scrolled to on the page?
The button html:
<a class="stelsamenknop" href="javascript:void(0);"><i class="pr-1 icon-cart"></i> Stel je product samen</a>
And the element further down the page:
<form id="aantalenformaat" method="post">
Targeting an element specifically or even a fixed offset isn't going to work for all screen sizes. Unless you're accepting of the "close enough" approach. Take into account the changes in element height adapting to the screen size plus any changes to the margins/padding that are present.

One page navigation blocking my content

I tried to do a minimal version of the problem i am having. In short i am doing header with navigation that always sticks to the top of page when scrolling.
Now the problem is if you try and click on a section in the navigation, when you get scrolled to the section the navigation blocks half the content at the top by getting in the way.
This means the user has to scroll back up a little to see the content properly. I am using lorem ipsum as content replacement there.
How would i adjust where my browser position lands when the user clicks the navigation button so i can position the window correctly?
https://jsbin.com/hopiqe/edit?html,css
Eli-
Using HTML/CSS only, you'd have to do a hack like Kommodore suggests to get this working properly. Your really need JS to do this right.
You can do this with jQuery and a little foresight:
// Button 1 is what you click to start the interaction
$(".button1").click(function() {
// Using jQuery Animate and ScrollTop...
$('html, body').animate({
// We point user to div1
// We have an offset from the top of the window minus 50px
// `-50` should match the height of your header
scrollTop: $("#div1").offset().top-50
// 500 is milliseconds to do the `Animate` interaction
}, 500);
});
You could also use a combination of jQuery plugins called ScrollTo and LocalScroll.
I wired up a working CodePen that builds off the code you provided. The JS probably needs more tightening but you should get the idea.
The easiest way should be adding another div as a placeholder with height: 140px in front of each div (which then has to be called instead of the div) or using margin-top: 140px for each div.

Javascript scroll to bottom doesn't always scroll to bottom

I am using an Iframe which reloads itself every 5 seconds. It makes use of javascript to automaticly scroll to the bottom because it has too much content to display in one go, but sometimes after a refresh the scroll bar doesn't go down all the way. Leaving me scrolling it down myself.
I really don't know what it is. Maybe one of you has a better peice of Javascript suited for this.
Javascript:
<script>
var objDiv = document.getElementById("chat");
objDiv.scrollTop = objDiv.scrollHeight;
</script>
The HTML div:
<div id="chat" class="scroll">
*Content going on for 150 lines...*
</div>
Thanks in advance.
You could conceivably create a placeholder div at the bottom of your page, and use this answer to scroll to the bottom of it. This would ensure that you always scroll to that div, rather than what the query perceives as the bottom of the page.

why document.ready not always work?

I have this very simple function to resize a div according to an element on the page.
Because of the static navigation bar on top of the page, I need to control the empty space underneath it, for the first div with content to appear on the right place (below the navigation bar), specially because when the screen is smaller, the navigation bar gets larger (height is bigger).
My question is: why does it not always work? It works fine most of the times, but sometimes I need to refresh the page for it to work.
Here is the dummy HTML:
<div id="menu-fixed-top"></div>
<div id="empty-space"></div>
<div id="content"></div>
where the #empty-space is the div I want to control the height.
I used the document.ready and the window.resize to control it.
The JQuery function is:
$(document).ready(function() {
var height = $("#menu-fixed-top").innerHeight();
$("#empty-space").height( height );
$(window).resize(function() {
$("#empty-space").height( height );
});
});
Is there any way to get it working 100% of the time? Or the only way is to be sure is to use media queries?
Thanks
document.ready will trigger when the whole DOM has loaded and is ready for javascript to execute. This is to avoid any problems with javascript being ready to go but the whole DOM hasn't finished loading.
http://learn.jquery.com/using-jquery-core/document-ready/
I would first check to see that the DOM has finished loading without document.ready being triggered before drawing the conclusion that jquery isn't kicking it off.
You may also want to look at window.load if you're wanting to calculate heights and such as the DOM != the fully rendered page

Maintain page position while page length changes

Let's say I have a situation like this:
The page is 4000 pixels long.
The user has scrolled down the page, so 1000 pixels of content are hidden above the viewport.
Then, the user clicks a button, and content of arbitrary length is loaded via AJAX at the top of the page, pushing the button (and the content the user was looking at) below the viewport.
I've tried writing a Javascript callback to scroll down to the content the user was looking at before they clicked the button, but the experience is not seamless (a scroll "up" when new content is inserted, followed by a scroll back "down").
Is there any way to keep the viewport fixed on the content the user was looking at?
This is a simplified example, but should get the point across.
<div style="height: 1000px; width:1000px;" id="top-div">some content above the fold</div>
<button id="button">Click Me</button>
<img src="img.jpg" alt="Some image the user was looking at when they clicked the button." />
<script>
$("button").click(function() {
$.get('/new/content', function(response) {
$("#top-div").before(response);
});
});
</script>
Delay displaying the new content
The closest to an elegant solution that comes to mind is to delay displaying the new content until it's within or below the viewport. In other words, don't change the height of any major layout elements that are above the viewport; change them when they are within or below the viewport, when it won't do any harm. Display them when it's safe to do so.
For example, the user scrolls to the bottom third of a very tall page. While they're down there, some Ajax content of a new or different size is loaded near the top of the page, but it's not displayed yet. The user scrolls back up through the page, and once all of the affected layout area scrolls into view, the new content is displayed, as if it was loaded just then.
Basically, when Ajax content is loaded, retrieve the scroll position of the layout element, and either display the content or add it to a queue, based on the current scroll position of the page. Anytime the user scrolls the page or clicks on an anchor tag (or any action that changes the scroll position of the page), check the queue to see if there's any content that still needs to be displayed, and determine if it can now be safely displayed.
Make the content collapsible
Another option is to have the Ajax content appear in a collapsible format. It could be displayed initially in a small size that doesn't affect the page layout (if the layout element is above the viewport). The user can then click on the content to toggle between the collapsed format and the full version or, in a variation of the previous idea, it could automatically expand when the layout element is scrolled into view.
Check out this fiddle:
http://jsfiddle.net/FYEYB/
Here's the important code:
$("button").click(function() {
//cache the org height
var orgHeight = $("#content").height();
//run your ajax request.
mockAjax(function() {
//in the callback ajust the height
$(window).scrollTop($(window).scrollTop() + $("#content").height() - orgHeight);
});
});
Basically in the callback of your ajax request, add the difference in the height of the container to what it was before. You will probably need to add a check to make sure the new content was indeed added above the viewport, but I'll leave you to figure that out.

Categories