I have a page which has like many panels or boxes inside it. left side navigation, world map in the center, 3 small charts below it. When this page is loaded, it loads the data inside the containers in a very haphazard manner, the center world map moves down and up and then loads the map and similarly the 3 charts below. when I click a particular location on the map again the 3 charts below are updated as they should be but thier containers move around up and down when refreshed with new data.
I am using Grails for front end pages and html, with js, jquery with ajax calls on clicks. there are divs with classes used inside html tables to for the containers.
the locations of all components and containers is finally proper, but when anything is refereshed or page is loaded the containers juggle around a lot until the data is loaded..
making the page load animation very distorted.
How do I make all the containers fixed in position even when there is any refresh to a part of the page..
Regards
Priyank
There are 2 ways you might tackle this problem, which you could use in combination:
1) use css to give all the containers a fixed width and height. This way the layout won't jump around as the content loads.
2) hide the contents of the containers, and only show them after everything has loaded. You could have each ajax call set a flag when it completes and then check to see if all the other flags are set. If so, unhide all the content.
Related
Hey guys I have a fixed background attachment for scrolling uptill two pages of the content after that i want the second page to be fixed and make the third page with a different background to come up covering the second page. How can I make the content of the second page fixed when it comes at the top? So that scroll effect can be appliedm
You have to use Javascript Intersection Observer API. Create an instance of it and set it to observe your 3rd page. On threshold crossing apply the styles you need (like setting position: relative; to both of your pages and then adjusting them via z-index).
Just don't unobserve() on collision so you can roll back changes on, well, scrolling up on your page.
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 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.
I have a few different Google Charts that i want to put inside the sections of a jQuery accordion. The problem is that all the charts that are not inside the first part of the accordion are smaller for some reason. Something about the accordion is shrinking these charts. I do not want them to shrink. Does anyone know what I can do to keep them from shrinking?
See this example which illustrates the problem: http://jsfiddle.net/dN3LL/
Thanks!
EDIT
So from the answer provided by brandwaffle, I considered that the graphics should render before the divs are collapsed into accordion form, so I simply put the $('#accordion').accordion(); line right after the graphs are finished rendering, and it works! See the fiddle: http://jsfiddle.net/dN3LL/4/
I've had this happen to me with various different pieces of content in the past. I think the problem happens because the content is rendered in a collapsed container, so it defaults to the smallest possible size (I've seen this with content in flexible-width divs inside of the accordion as well). The best solution I can offer for an across-the-board resolution is to hook whatever google chart generation (or other content display) to the accordionchange event that jQueryUI's Accordion offers: http://jqueryui.com/demos/accordion/
If you use the accordionchange event, the Google Chart will render itself after the accordion has switched to the correct section, which should eliminate any problems you're having as a result of the chart trying to render into a squished (i.e. unopened) container. There may be a better CSS fix for this, but I haven't found one yet.
one workaround is, load chart first and then run accordion code once chart load complete or run accordion code after 1-2 sec (setTimeout)
I am using this tutorial http://css-tricks.com/seamless-responsive-photo-grid/ to create a grid with lazyload as you can see here in action http://jsfiddle.net/gaz2A/
The problem is that the images are loaded like
1|3|5|7
2|4|6|8
instead of
1|2|3|4
5|6|7|8
and leaves the start screen blank at the most part.
How can I change this ?
*I tried masonry plugin with infinite scroll, however I do not want to rely on static pages, so masonry is not a choice for me.
Images will load in the order they are presented in the DOM.
Either change the DOM representation so that the images are appended into DOM in the correct order (eg. side by side first), or use some JS based preloading to preload the images in the order you want.