Develop Reference

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

Link not working on a Div on Ipad only - any other device/browsers works 100%

sorry if asking this question in wrong place.
I have a web page (asp.net / vb) and each section of the web page is built in divs inside a bootstrap grid.
Using the code behind, I am adding onclick events to each bunch of div's to do certain things. Every single div/onclick works on the page apart from just one that will only work if I set the div to something like 100 pixels deep.
I am in safari.
I have tried allsorts - binding with jquery click/tap etc but nothing apart from making the div really large.
I dont understand how only this one div could cause problems.
This text box wont let me paste html in to show.
If anyone could suggest anything I would be really grateful!
C

You are likely facing an issue where you've got one element covering up another. Check to make sure that you don't have any other div's that are too wide and happen to be covering your link on the iPad. This would explain why when you move it to 100 pixels deep it works.

How to synchronize the scrolling between two columns

I'd need an advice about how to create the code related to the sidebar contained into my homepage.
My homepage is composed of: header, left sidebar, main column (that is at the right of the sidebar) and footer.
What I need is a bit specific, indeed I tried to search for it, searched again and again through Google, through Stackoverflow and many other web sites but unfortunately I didn't get nothing that is right for me. I found several useful advices, several pratical examples and many starting points and I tried and tried again to mix each others the parts of these codes, but without getting what I really need about. All of this because I think my request is a bit specific and I'll try to explain it by hoping to be as clear as possible.
In my case I don't have just to fix a column, because I found meny examples about that as already told above. In my case I need to "synchronize" the left sidebar scrolling with the main column scrolling.
Something similar is present in Facebook, if you go into your profile page you can find something similar to what I need. By the way, I try to explain it here below by hoping to be as clear as possible:
at the time that I scroll the page DOWN I need that BOTH the left sidebar and the main column scroll down together, until the left sidebar will show the LAST visible element contained into it. At this point the scrolling should continue to scroll down ONLY the main column
vice versa, at the time that I scroll the page UP I need that BOTH the left sidebar and the main column scroll up together, until the left sidebar will show the FIRST visible element contained into it. At this point the scrolling should continue to scroll up ONLY the main column
Further note: the main column (NOT the left sidebar, but just the main column) is dynamic, in other words it shows the feeds dynamically, increasing its height instantly.
Hoping to having explained well the matter, I thank you all of you for your help!

Here is a jQuery plugin that seems to do what you want:
http://leafo.net/sticky-kit/

Splitting screen horizontally on a flexible images layout

I'm looking for directions rather than any specific code (wich I wouldn't spit on neither ;))
I have to code a portfolio for a friend, something like the first following picture (Sorry I only had Paint on the computer I'm asking with) :
The images should either be disposed and able to stay proportional whatever the screen size is or get arranged based on the screen size. So that the screen is always full and no need to scroll in any direction.
Then, as on the second picture of the linked album...
When clicking on a picture on the start screen, I'd like to open the screen in half and display the rest of the project. The rectangle you see up the second screen is supposed to be the same as in the center of the first one, supposed again to be the name of the portfolio. Of course I should be able to close it to get back to the page showcasing all the projects.
The effect I'm looking for is something similar to the about section here, but the other way :
http://www.b--i--g.com/about/
To sum up,
How to dynamically layout images full screen(s).
How to split in half the main screen and display other things in it.
I'm guessing here there is some keys javascripts doing all the magic so, again, any leads on wich scripts to use you know of or wich html/css structure is the best suited to do that kind of things.
I just don't have, this time, the time to start over multiples times (again) and scratch all over my code trying to make a victorian chimney blow white steam.

can you create a http://jsfiddle.net/ or http://plnkr.co/ to start with.
if you have an example webpage then you can just look at its source.
To sum up,
How to dynamically layout images full screen(s). - not clear what that means but, absolute positioning + javascript
How to split in half the main screen and display other things in it. - there are many ways to achieve that effect. in the link you sent, they are being overlapped by the middle content. image is rendered twice on either side and the middle content right half and left half of left and right image respectively.
please post a plunker to have other help you without creating the page from scratch.

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