Fancybox appears too low on a page with dynamic height - javascript

My page consists of multiple divs in which the page's content is displayed. Exactly one of these divs is visible at any given time (chosen by select box and hidden/shown in javascript). One of these divs is much taller than the others and it is not the one that appears by default.
Usually the fancybox appears in the center of the page as intended. However, when the tall div is the one currently displayed, a fancybox appears near the bottom of the page. The problem gets worse as the tall div gets taller.
I have tried $.fancybox.center(true); but it had no effect.
I would like to have the fancybox appear in the center of the screen in all cases, but fancybox does not seem to properly interpret the changing height of the page.
Thanks in advance.

Related

Content Layout Shift When Page Loads

I have an issue where my left menu container is filling the entire width of the screen until after a specific point in the loading process, and then the menu shrinks to the correct size and the body shifts up the page to fill the newly available space left by the shrinking menu.
I've tried addressing this through editing the css but have had no luck
The site uses bootstrap and I think that the problem is related to bootstrap, but haven't been able to pinpoint the exact issue,
One of the .js files (main.js) seems to be associated with the issue, when I disable this .js file in chrome dev tools, the menu stays the full width at the top of the page (full width is not desired) and then when I re-enable main.js and reload the page the menu eventually does shrink to the correct size, but again has the unwanted effect of the menu filling the page, and a second later shrinking to the desired size.
As a result my page is failing the Content Layout Shift (CLS) test, so now I am looking at work arounds that might hide the page or prevent paint until after the point where the content layout shift happens.
Any suggestions? I'm really scratching my head at this point

Scrolling to a target after a div is hidden

I have a page of divs that display thumbnail images. Each is set so that when it's clicked on, a larger version appears in a larger pair of divs, centered in the window. One is a frame, the inner div is the image. Those divs are initially hidden and become visible via a javascript:
document.getElementById('frame').style.visibility="visible".
document.getElementById('print').style.visibility="visible".
They're sized and centered just right by the javascript but in the background it scrolls to the top of the page of thumbnails, so when closed, the user has to scroll down the page again to get back to where they were.
I've tried inserting the two divs in every conceivable place of the page, inside and outside the main page divs, top and bottom of the page... I've also tried relative, absolute and even sticky positioning without luck.
So I pursued scrolling the page when the divs are closed (hidden again) but that too is failing whether I use anchors or scrolling. In the script below, if the the alert is active, it shows the page scrolled to the correct position in the background. As soon as the alert is closed, it jumps back to the top of the page. 'pid' is the id of the targeted thumbnail.
function hideprint() {
document.getElementById('print').style.visibility="hidden";
document.getElementById('frame').style.visibility="hidden";
document.getElementById(pid).scrollIntoView();
// alert(pid);
}
I've also tried 'display' instead of 'visibility' with the same results.
How can I display these divs then get the page to stay or return to where it's been scrolled to when they're closed?

Navigation menu

When I take mouse over the Navigation menu links (About Us..), the page moves to left. Is that due to javascript?
link text
It's because of the scrollbar that appears at the browser window's right side. It seems to me that there is a design error causing the content to be much larger with the menu hovered ...
if you hover the menu, the page gets so long that scrollbars occur - and that causes the page to "move to left" (it stays in the center of your viewport, which is what it should do). to fix this, find out whats causing this overflow (the page isn't looking that long, i don't know where the scrollbars come from) or set overflow-y:scroll for your body, so there's always a scrollbar (which would be the bad "i don't know what else to do to fix this"-solution)
Try moving the UL dropdown elements away from the bottom of the page or set them to display:none until after you've absolutely positioned them at the top of the page. visibility:hidden does not take the elemtens out of the flow of the document but just hides them.
A better bet though would be to make them children of the <a> tags you already have, so they only need to be displayed rather than displayed and moved.

Make a div fall off the page

So I have been playing with jQuery for a good time now and I'm trying to get an effect to work properly. I have a main square div in the middle of the page and when someone clicks a link I want the box to look like its falling off the page and disappear, revealing a new page behind it. I'v been playing with the easing plugin but I can seem to get what I want to work. Basically I have the div's top margin or just top distance increased to a large number. However, this just makes the div fall but it also expands my page and its just much lower on the page. I basically want the div to fall out of site and not change the dimensions of the site. Anyone know how to do that?
Thanks!
Danny
To prevent your page from redimensionning upon clicking on your link, add overflow:hidden to your div container 's css properties.
also, make sure you hide the div when the animation ends.
$('a').click(function(){
$('#thediv').parent().css('overflow','hidden');
$('#thediv').animate({'top': '+=500px', opacity: 0},function(){
$(this).hide();
});
});

Site loads on the right, then shifts to its actual position

There is a link at the bottom. Pretty much what happens, is when the page gets opened, it loads entirely on the right side of the screen. Then when it finishes loading every single element, it moves to the center which is it's actual position.
I believe the problem is caused by javascript, since the site works perfectly fine without it. It doesn't seem to matter what javascript is included, if I leave just 1 of them, the whole thing comes back.
Could really use the help. Also the site right now is about 500 pages big, so I'm really hoping for a solution which can fix this with just a few steps.
Thanks.
Here is the link to the page so you can get css/code: http://bit.ly/3EyoWu
Its definitely javascript. I think the banners on your site are loaded at the very end, which leaves the browser making incorrect guesses about the dimensions of the content until the page is loaded.
Try enclosing your javascript code inside fixed width (and height) divs or tables. You can easily determine the width (and height) required by javascript generated code by inspecting your page after its loaded. If its the banners, they are almost always predefined size.
Edit 1 ----
I got it. The specified cell widths for your table are narrower, the browser therefore is unable to calculate the page layout until the page is rendered completely. A column with width 110px has a banner having width = 120px.
Edit 2 ----
Try specifying widths for all-but-one column. That is, if you have three columns in the suspect table, specify the width for two, and let the browser decide the width for the third. Furthermore, the banners seem to occupy a width of 125px instead of 120px, probably because of unnecessary white space around them. I suggest that you revise the column widths appropriately (and parent table's width if necessary).
This might almost qualify as a 'flash of unstyled content' (FOUC) except that the browser doesn't first render a page in an unstyled format.
Instead, you see styled content before the Javascript is able to add the finishing touches.
You might get some further hints by searching for 'flash of unstyled content'.

Categories

Resources