Develop Reference

Load a div before other page content in WordPress

As the title says, I want to load a div in WordPress before any other content on the site. I'll explain it better: when a user loads the page, I want to show an animated intro, and then let him see the site after. How can I do that?

You'll want to create a fixed div that covers the screen to act as an overlay. Say you have a div: <div class="overlay">.
Now, in your CSS, you want to make that div take up the whole screen:
.overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
You also need to make sure your parent containers (html and body, most likely) have width/height of 100%. You might want to give your div another color so you can see it.
Also, reference this question.

CSS animations are buggy until all page content loads

I am working on a relatively ad heavy website that takes between 3 - 7 seconds to fully load (Depending on the number of ads on a page and the speed of the connection) and I want to add a CSS loading animation over the top of everything until the page has fully loaded.
The only problem is, the animation is very glitchy UNTIL the page has fully loaded rendering it almost irrelevant.
An example of what I mean (Not my site) is here http://smallenvelop.com/display-loading-icon-page-loads-completely/ the animations are all quite buggy until the page has loaded, at which time they start animating smoothly.
Is there any way to counter this?

You could let jQuery wait until the page is loaded, fade out of wait x milliseconds.
Place this div into your html
<div class="loader"></div>
Then right at the last line of all your js:
$(window).load(function() {
$(".loader").fadeOut(5000);
});
In your css:
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../myloadinganimation.gif) center no-repeat #fff;

Slowly removing blur on background image after page loads

So, using html, css, javascript, I am looking for a way to have it so that my page will load with the background image blurred. Then, after the whole page loads, the image slowly goes from being fully blurred to being not blurred at all. Not an instant blur to crisp, but I nice transformation.
Not sure if I would have to have a blurred picture and one thats not and just somehow switch the pictures slowly? Any tips would help.

Blurring sounds like a nice job for Canvas.
Maybe have a look at http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
You can put your canvas page-wide on your screen with something like:
canvas{
position: absolute;
top: 0px;
z-index: 0px;
}
Then draw your background-picture blurry (have a look at the hyperlink) on it, and use setInterval or something like that in order to unblur it gradually.

I managed to be able to blur the background-image using a CSS hack. Usually, I would just set the opacity property of a container, but that would effect everything in the container. What I did instead was use the :before pseudoclass to toggle only the background-image.
#myContainer {
height: 400px;
width: 400px;
position: relative;
overflow: hidden;
}
#myContainer:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCFyJhwDi5ud74pENDaCIuggegz89q6Odhke5IEo7vEKwjewDxsQ);
}
h1 {
color: blue;
}
http://jsfiddle.net/59zutyLd/1/
https://css-tricks.com/snippets/css/transparent-background-images/
To remove the blur, you could use the jQuery animate property for something like this
$("#myContainer:before").animate({opacity: "1.0"}, 2000)
Unfortunately, pseudoclasses are not part of the DOM, so they can't be used in jQuery.

Keep the background_div with position:relative
Create a overlay div inside that and keep it as position:absolute, opacity:0.5, full width, full height.
Apply fadeout effect on overlay div
I hope it will the expected output.
Try the demo here:
[1] https://jsfiddle.net/fnwL8ozg/3/

Correct me if I'm wrong but what you are looking for is "Blur Up" technique described here: https://css-tricks.com/the-blur-up-technique-for-loading-background-images/
TLDR:
You create very small size copy of original picture
You load that first and add Gaussian blur overlay so it doesn't seem bad
On download complete with basic JavaScript you change pic with original
Add transition to blur none and profit

Off-canvas / viewport navigation slide in with jQuery

I am trying to make an off-canvas navigation that slides in from the left to take up 20% of the page while the content slides to the left ( some of it will be off canvas ) taking up 80% of the page.
This has been seen in Google's mobile site and Facebook's mobile app.
Here is a version using CSS3 Transitions: http://codepen.io/chriscoyier/pen/umEgv
Except, I am trying to make one that relies only on JQuery / Javascript and not CSS Transitions at all.
Below is a link to what I have so far.
I don't understand why it is not working. The width of the #main-nav should be toggled every time .menu-button is clicked; thus creating a sliding tot he right effect.
Can someone please help me fix this and / or help me with that I am trying to achieve.
Here is what I have so far: http://pastebin.com/0X7uT7tC

Changed width to 20% in css and then hide this on load.
HERE IS FIDDLE
jQuery
$('#main-nav').hide();
$('.menu-button').click(function () {
$('#main-nav').animate({
width: 'toggle'
});
});
CSS
.main-nav {
position: fixed;
top: 0;
width: 20%;
height: 100%;
background: #3B3B3B;
overflow: hidden;
}

Loading page full width and height of screen (or window) with jQuery?

I don't know if this is possible and I already tried searching for a solution, however no luck at all.
I am trying a full page loading screen with an animated gif (loader-bar.gif), while the background is slightly transparent (or blurred). I guess this would be possible with jQuery, but I really do not understand how to achieve this?
I already tried several things myself, but always results in the same or similar problem; or the animated gif does not show animated while the page is loading and / or the the loader page is not covering the whole area, especially when extra content is shown (not even with height:100%; the only 'fix' for this is by using height:300%; but that is of course no solution).
So I decided to redo the full screen / window loader page, probably jQuery can get this job done correctly, right?

I would possibly solve it like this: try demo
The advantage is, that the content of the overlay is centered and you are not stuck to a background image. So you can place any content into the overlay, for example a text "stand by" plus an animated gif.
CSS
body, html {
margin: 0;
padding: 0;
}
div.overlay {
display: table;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.overlay > div {
display: table-cell;
width: 100%;
height: 100%;
background: #ccc;
text-align: center;
vertical-align: middle;
}
HTML
<div class="overlay"><div>CENTERED ICON</div></div>
JavaScript
// on load finished
$(window).load(function() {
// select element and fade it out
$('.overlay').fadeOut();
});
Note that you should use $(window).load() as this fires, when everything is loaded completey, so images too.

Try something like this -> http://jsfiddle.net/3wU6C/5

try to define an element - or append it via js - as first node in the body, e.g.
<div id="load">Please wait</div>
with this style
html, body, #load { height: 100%; width: 100%; }
#load {
position : fixed;
z-index : 1; /* or higher if necessary */
top : 0;
left : 0;
overflow : hidden;
text-indent : 100%;
font-size : 0;
background : url(some-animated-loader.gif) center no-repeat;
}
then remove (or hide) that div when load or DomReady events occur