I am trying to link to a page at an anchor point, i.e.:
About
<div id="content">…</div>
The normal browser behavior is to render the page, then jump to the anchor/ID. Is there a way to position the page at the anchor position before the page renders?
I've tried using
$(document).scrollTop( $('#content').offset().top );
thinking it might move to position quick enough to prevent a flash of the full page load but it doesn't work until DOM ready, so it's not quick enough.
I can cobble together a work-around by selectively hiding elements, moving to position, then showing them, but I'm wondering if there's an approach I'm not aware of.
I don't think there is any other direct way of doing it. You can only guarantee faster link to a particular div making the div available as soon as possible in the DOM.
You can do this by loading the required div to be linked statically while loading the contents of other div dynamically. Again while doing this you have to make sure that the page is always scrolled to this div, by executing the code
$(document).scrollTop( $('#content').offset().top );
periodically, as when the other contents of the page are getting loaded dynamically page size may tend to increase and we would want to keep the scroll position always on the content div.
Related
Setup:
So, I have a narrow but long table (width:200px, height:2000px ish). This table is wrapped inside another div with fix height (300px) and overflow-y:scroll, giving a fixed height visible area. In the table, there is a lot of cells that are stacked vertically (see image and markup is simple regular table wrapped in a div).
Problem:
Each cell contains images, so if there are lots of cells that the page has to fetch including the images and data before loading the site then it will slow down the site significantly.
Solution Approach:
I am thinking of two approaches.
Apply lazy-load to images only. In this case (for example, from the image above). all three sections (section 1, 2 and 3) will be fully loaded except images that are not visible yet. Although it will minimize the delay if it has to fetch lots of data (for example 100+ cells), then I am not sure if it is the best approach.
Another approach is little bit more complicated but will minimize the delay as much as possible and is really ideal. So, when the page is first loaded, only the section-1 will be visible but section-2 will be also loaded (either with images or lazy-loaded images. Howeversection-3will not be loaded at this point.
When the user scrolls to thesection-2then thesection-3will be automatically loaded but not visible until user scrolls down. Ifsection-3is in the viewpoint, thensection-4` will be loaded but not visible. You get the point.
Any thoughts on it and how-to?
Thanks.
Do both. Make sure your images are always being lazy loaded, and only get the data for the next section when the user is scrolling and gets close to (or at) the bottom.
I use a lazyload image system where I specify my images like this:
<div class="lazyimg" data-src="path/to/image">
</div>
I give .lazyimg a width and height and then, when it scrolls into view, I load data-src and set background-image on the .lazyimg element.
This only works if you can specify a size independent of the actual image size, background-size: cover|contain are your friends here.
EDIT
Alternatively I guess you could load the image and then pop it in the DOM as an img tag, but changing the dimensions of the element could affect any sibling layout which could appear somewhat jarring, even if smoothly animated.
How to do it: onscroll callback.
I am moving a DIV (from a hidden iFrame) to the top of a page with jQuery, like so:
$(document).ready(function($) {
$('#precontainer').clone().insertBefore(parent.document.querySelectorAll(".maincontainer"));});
Whenever I reload that page, I very briefly see the original page jumping down to make room for the DIV I am inserting. Can this behavior be prevented?
What I'm doing now is give the "maincontainer" a large margin at the top with CSS that is roughly as high as the "precontainer" DIV that is inserted above it, and after that DIV is inserted, I use jQuery to remove the top margin from "maincontainer", so the jumping or flashing effect is less severe. But there has to be a better way right?
I should mention that I only have access to the iFrame that I am using to manipulate the DOM of its parent (which holds "maincontainer". I can not modify the parent, so I have to do everything through the iFrame.
Instead of giving a top-margin to parent page, you can place a "placeholder" div and insert your "precontainer" to this div. This way you shouldn't see a flickering/jumping effect.
Is there a way that I can insert content at the beginning of a webpage without causing the page to give the impression of scrolling up.
I'm trying to implement something kind of like infinite scrolling but I need to be able to scroll up infinitely as well as down (I'm also unloading content on the other end so that the scroll bar doesn't become infinitesimal and the app doesn't take up too much memory).
I'm happy to use javascript, I'd rather not use a library (I'm trying to stay lighter weight than that).
Any ideas?
Before executing the code to create your element, simply do something like this:
var scrollY = window.scrollY;
window.onscroll = function(){
window.scrollTo(0, scrollY);
window.onscroll = null;
};
Keep in mind that, if you already have an onscroll function, you will need to reassign the function after this...
In my case layout was something like this:
<div class='container'>
<div class='list'>
product cards...
</div>
<button>Load more</button>
</div>
By clicking on button I want fetch data from server, dynamically create product cards with that data and add this cards to .list
Problem was that when dynamically cards added to the DOM, screen automaticaly scroll and I see only last added cards, but not first added.
I think its default behavior for all browsers (I may be wrong) - if content added in DOM above the focused element browser scroll page in order to focused element was on screen. If content added below the focused element scroll not happened and the focused element also on the screen.
To solve this problem I just add something like document.activeElement.blur() before add cards to the DOM and all was fine.
You can use window.scrollBy(x, y) to scroll down when you add content (you have to calculate the height of what you add).
One possible idea is to bypass the scroll mechanism completely and do your own.
Basically, position every element with display: fixed. You can then load elements above the screen using negative positions.
You'll have to sync the height of the document (just by adding white space) so the document scrollbars are correct. Then, you trap the scroll event and adjust the fixed positioning of all the elements within your page.
I'm not sure how smooth it will be, but I'm fairly certain you could get the effect you're looking for.
I solved it by saving the first element of the container in a variable and then after inserting I called "scrollIntoView" on it. Looks smooth to me.
I have a page where the following occurs:
some stuff is rendered. static content, and content meant to be enhanced with javascript.
some of the divs are instrumented for enhancement via jquery in $()
some of these 3rd party scripts measure the divs they are putting content into so they know how to render it.
in the meantime, as other divs are enhanced, sometimes the page gets long enough that a scroll bar appears. that means the page just got thinner and the measurements that the plugins made are now incorrect.
some divs get enhanced with the wrong width.
ugliness!
If I resize the browser, everything "snaps" into place where it should be.
I can see 2 solutions which I don't like.
somehow force the browser to re-layout everything after every enhancement.
force a vertical scrollbar. http://ryanfait.com/resources/forcing-vertical-scrollbars/
This has to be a fairly common issue. Are there other tricks or suggestions?
KISS method : force the vertical scrollbar to be there.
Forgot to mention, you can also simply use this :
html {overflow-y: scroll;}
You could force the scrollbar to always appear in CSS, or you could set your jQuery code to execute when the page has fully loaded instead of when the DOM is ready, example below:
$(window).bind("load", function() {
// code here
});
This may result in 'jerkiness' as content gets rendered, then is shuffled around as the script configures it for the viewport size.
Personally, I'd just force the scrollbar. Most visitors wouldn't even notice it was there all the time anyway.
I have a bunch of divs that i am removing from the document using javascript. When this is done, the length of the page is often shortened significantly, and if the user had scrolled down the page, it gets abruptly recentered because the entire page now fits on the window.
This causes the user to no longer have their mouse over the same buttons on the page. I'd like to prevent this auto scrolling, but it seems like it may be difficult. I admit that it doesn't make much sense to allow a page to be scrolled off of its contents. Seems like the best I could do is to leave dummy divs as placeholders. Once the user scrolls back up, then clean them up to shrink the page.
Are there other, cleaner solutions?
You could just set the divs to be removed to visibility: hidden (add a class or similar) so they still take up room in the document. At a suitable time you actually remove them and allow the document to reflow.