Develop Reference

Plugins and html on page load - Split second where elements are all over the place

I have been making sites for years and still havent found a way on how to do this releiably. When using plugins like for instance fullpage.js for a split second when a user visits the site the content is all over the place until the css has loaded and the plugins then everything reorders as it should be. for example the site http://thisisdk.com uses fullpage and has a very heavy page with lots of videos yet from the start it loads seamlessly. I get that they have a loader but something tells me theres a lot of other very smart stuff going on aside from cdns etc.. Interested to hear other devs tricks and tips on how they overcome this without the use of preloaders

I always recommend people to use load fullPage.js in the header contrary to the popular trend which adds JS files in the body.
Why?
Because I consider fullPage.js is essential for the correct visualization of your site. Without fullpage.js, your sections won't be of the correct size, they will be overlapping as you mention, slides content will be visible when it shouldn't...
Some of those things require of fullpage.js to run, detect dimensions of your content, set the slides to the right position etc.
You can check this in any of the demo pages provided by fullPage.js and you'll see there's no such blink.
If you still don't want to go for this solution to speed up the loading of your site., what I would recommend is to use the critical CSS technique to set the size of your sections as fast as possible (even when fullpage.js is not initialized yet) and without any HTTP request (to speed it up even more)
Use the following inline styling in the header of your site:
<style>
html,body {
margin: 0;
padding: 0;
overflow:hidden;
}
.section,
.slide,
.fp-tableCell{
height: 100vh;
}
</style>
This will solve the problem with the blinking sections.
Some of the possible problems
If you are using a conditional initialization of fullpage.js, this will still be applied even when you don't need it.
If you destroy fullpage.js dynamically, this will still be applied when you don't need it.
Sections with bigger content than the viewport won't have scroll bar until the plugin is loaded and initialized.
Slides will be accessible for the user even when you don't want it by using setAllowScrolling(false) in some slides.

Responsive site, header and footer width issues on mobile / tablet

I have been working on a modified wordpress site (heavily modified theme), and have run into a css / responsive related issue.
When the body has an unusually large-width item, or a dynamic item (dynamic in terms of width, like a jQuery DataTable) whose width goes beyond the body, the sites header and footer do not properly expand to occupy the full width of the body.
for a live example visit this link (however you will need to use a user-agent modifier or use chrome emulator, either of which set to iPad or iPhone, for example).
image example:
http://vicariauction.com/cars-coffee/
(notice how the header and footer dont expand to the width of the "map" image in the body)
-- here is a link to a screen shot of the above page, showing the exact issue:
i.imgur.com/BUjzLAK.jpg
jQuery dataTables example:
http://vicariauction.com/future-auctions/?ahcode=NOLA%202015
(notice how the header and footer dont expand to the width of the jquery datatable below)
-- here is a link to a screen shot of the above page, showing the exact issue:
i.imgur.com/4nx2M5v.jpg
Both examples, header and footer's widths scale properly if using anything but a mobile or tablet device (or user-agent).
I realize the answer may not be a simple explanation, but can anyone maybe at least point me in the general direction that i should be looking towards for a solution?
thanks!

Instead of making the header wider, why not make the image narrower? Mobile users shouldn't have to scroll horizontally anyway.
To make the image fit the width of the screen, use the following CSS style on the image:
max-width: 100%;
height: auto;
I realize this only answers part of your question, but it's definitely what I would do with the image.
On an unrelated note, I noticed that in future-auctions/styleau.css, line 18, you have the following line:
*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
Prefixed CSS rules should always come first, so the correct way to write that line is:
*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

Masonry plug-in not working in Chrome

I recently took an interest in building websites and am still very inexperienced, so my apologies if this is easily answered.
I was asked by a friend to build her a simple portfolio website for fashion designs. As such, the website mainly has image galleries. The images come in various sizes and rather than ordering them manually to make it look better, I found the Masonry plugin. I implemented masonry.pkgd.min.js into my code (initialized through the HTML) and ran into two issues:
The main issue that might make question 2 moot entirely… It looks fine in IE and Firefox, but the images come up overlapping in Chrome and it looks horrible. I cleared my cache several times and tried implementing the imagesLoaded plug-in, which did absolutely nothing. I am very new to Javascript and as such have to rely on copy/pasting this sort of plug-in whereas someone else might be able to delve in and tweak it, but at the same time I had no issues getting tabbed content and this does work in two browsers. Any idea why it doesn’t work in Chrome and what I can do to fix it?
After the plug-in, I don’t seem to have any control over automatically centering the image columns in the gallery/container and they are aligned left by nature. I more or less fixed this by manually setting a margin-left that puts everything in the right place, but would like to know if there is a better solution.
Please let me know if I need to include screenshots or specific code.

Issue One:
Try adding imagesLoaded. Chrome in particular has an issue if you don't use it with masonry. I suggest trying the solution in the third box first, it's the easiest and fastest loading. This code will go in your .js file if you have one, or in your script tags if you don't.
If the "why" interests you, it's because your containers load before your pictures and don't know how tall they should be.
Issue Two:
You're right on with this one. You can't center the whole masonry container itself (you can get close, but at certain browser widths there will be a small gutter on the right), but you can center the images within their containers by adding a margin like you did or using:
position: relative;
margin-right: auto;
margin-left: auto;

A "div" which never exceed the browser

I'm working with Visual Studio, ASP.net, HTML, CSS, C# (for the code behind), ADO.net and Javascript/Jquery.
I'm trying to make a web page with some div block and I want that the block never exceed the browser. Do you know : how to add a height size for div even if I change the resolution of my window?
PS: I'm French so, please, don't be matter about my mistake.

Without further clarification of your senario, one method is to do the following:
HTML
<div id="test">
My div
</div>
CSS
html, body {height:100%;margin:0;padding:0}
#test {width:100%; height: 100%;position:absolute;}

Setting height to 100% usually works. NOTE: Sometimes padding may push you beyond the browser.

I've encountered screen resolution problem before and this solved my problem.
If you want your website to dynamically changing whenever your screen resolution change you can use % in your css to all your page, containers, wrappers etc. so that it will adjust on any screen resolution. (problem: This destroys your web design whenever the screen resolution is big)
The best solution I find so far and I think other professional websites also is doing is to make your width static or fixed and just let your page get on the center. This will preserve the design you made on your page and everything will stay and looks as it is.
In your CSS just add this line on your page ,containers, wrappers etc. margin:0 auto;
and your site will be centered to any screen resolution. For more examples and to read more about it check this reference How to Center a Website With CSS. If you want to test different screen resolutions without changing your actual screen resolution you could try it here. Hope this helps :)

CSS margin-left is breaking in Chrome Extension

My situation is extremely confusing, and I haven't the slightest clue what's going on. I made a Firefox add-on to redesign a website using jQuery and CSS. When I tried to migrate the addon to Chrome (that part was simple, because the features I am using in each SDK are very similar), everything worked except one of the main design elements:
I have a menu with position: fixed; aligned to the left of the page, and margin-left: 150px; on the main container element. The problem is that the margin is completely disappearing when I open it in Chrome. It works fine in Firefox.
So then I copied all of the HTML, CSS, and JavaScript into a jsFiddle, and the margin worked fine. Everything was completely identical, so I can't figure out why it would work in jsFiddle but not on the website.
Using left: 150px works, but then the page spills 150px to the right, and those dreaded horizontal scrollbars appear.
Links:
Extension File (CRX): https://docs.google.com/open?id=0B3k3BjZD2YfiTWNzTlhsa0t5STg
Demo Website: http://demo.flvs.net (Username: demo, Password: demo)
jsFiddle (Some images don't load, but the code is identical): http://jsfiddle.net/CjSXA/

I just removed the margin-left from #page_cont and added it to #content-cont.
That made the content stop hiding under the menu, though the footer is still partially covered by it.