Develop Reference

Make a div stick to the left when scrolling

So I am trying to create a left-sided nav bar, but after scrolling I can't get it to correctly stay to the left.
I have tried using:
position: fixed;
and
position: absolute;
However it cuts the width of the DIV down completely.
To get a view of what I'm working with go to: http://198.50.242.77/YouBB/
I'd prefer to use strictly CSS only but if I must use JS I'll use it.
Thanks!

position: fixed is what you want. This causes the element to be removed from the flow entirely and stay in the same position even after scrolling the page.
position: absolute is similar, but it only removes an element from the flow. Scrolling a containing div (or in this case, the whole page) will still cause it to move.
I opened up your web page in Chrome, and changed the styles for #navigation to:
background: white;
height: 100%;
text-align: center;
position: fixed;
width: 18.72%;
This does what you want. You will just need to position the rest of the content to the right.

How to Show Div During Load with Pace.JS

I'm using Pace.JS to display a loader anytime I make AJAX calls to a REST service. Pace is working perfectly here except, the page is still interactive while the loader is spinning. I really don't want the page to be interactive while I'm trying to load data.
To fix this, I want to SHOW a div (white with a high opacity to simulate a modal) with a Z-Index of 1999 covering the entire page (width/height = 100%) while the Pace.JS loading animation is active (at Z-Index 2000 so it's sitting on top of the modal), and hide the div when the Pace.JS loading animation is complete to limit what a user can interact with while I'm loading data.
I've seen the events (start, restart, hide) on the Pace.JS hubspot homepage (http://github.hubspot.com/pace/) but there are no examples of actually using it and everything I've tried hasn't worked.
Can someone post an example of how to do what I'm looking for? It would really, really help me. Thanks!

You can achieve your goal with the following:
CSS:
div.paceDiv {
position: absolute;
width: 100%;
height: 100%;
...
display: none;
}
JS:
Pace.on("start", function(){
$("div.paceDiv").show();
});
Pace.on("done", function(){
$("div.paceDiv").hide();
});
Hope it's no too late though!

This is a old post, but i've fixed this just with css
pace-running::after {
position: absolute;
background-color: #ffffff;
opacity: 0.1;
top:0;
left: 0;
right: 0;
width: 100%;
height: 100%;
content: ' ',
z-index: 9998;}

How to only show a gif while website loads

so I've been researching for a bit to get a loading screen on my website.
I finally found one that (somewhat) works. This is the code:
<script type="text/javascript">
/* display loader only if JavaScript is enabled, no JS-lib loaded at this point */
document.write('<div id="loader" style="display:table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: #fff;">'
+ '<div style="display:table-cell; vertical-align:middle; text-align: center;">'
+ 'loading…<br /><img src="img/loading.gif" />'
+ '</div></div>');
</script>
That's put into the header, and this code is put at the very bottom of the HTML (just before the closing body tag)
<script type="text/javascript">
/* hide the loading-message */
$(window).load(function(){
$('#loader').fadeOut(500);
});
</script>
</body>
This works, but I realized that you can just scroll down while the loading screen is up and see the website in it's ugly, generating form. How can I make it so that you cannot view the rest of the website, and only see the loading gif?

You can add an overflow: hidden; to either the html or body tag to prevent scrolling of the page. This could be in your stylesheet (and activated with a loading class) or inline. Be sure to remove it on load as this prevents the page from scrolling.
To be absolutely sure your loading div stays within the viewport, you could also use position: fixed; instead of absolute.

Make div with id loader position fixed instead of absolute.
position:fixed;

You can use jQuery load method
You can look here:
http://jqueryfordesigners.com/image-loading/
This is one implementation of solution

You could make your content hidden by adding style attribute visibility:hidden; and when the page is loaded set it to visibility:visible; that will hide your content while loading.

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