How to make a page preloader similar to Apple's Mac page - javascript

If you have a look at Apple's Mac page on their website. http://www.apple.com/mac/
Their "body" displays an image in the center while the page is loading. After the page is fully loaded, their content fades in. If you use Chrome or Safari and open the Element Inspector, you'll see their body gets the class="loaded revealed" when the page is loaded. And that triggers the content to fade in. If you remove the classes, the content will fade out.
I'm looking for something similar to this for my website. I don't want the whole entire content to not display, I still want to display the header and footer. So basically I want the div#content_area to slide down on document ready... The only problem is, they don't use any kind of display:none; for their body. They're a bit more careful about that, because if the JS file fails, the content will still display.
How can I make this? They way they do it must be lightweight because anybody can write something like
$(document).ready(function() {
$('div#content_area').attr(class, loaded revealed);
});
All I need to do is add the .slide() function and hide the content until the page loads.

Setup your DIV of content right where you want it... setup the image you want to be a placeholder right over the top (with absolute if possible/necessary).
In CSS use the z-index property to keep the image above the other.
What you do then is make the IMG a display:none; property, and then as they page is loading you can turn it on with jQuery... so with JS the placeholder shows and sits above... without JS, the image placeholder is invisible, and the user simply sees the content DIV as it loads.
That make sense?

Have found out that Apple has all it's elements opacity set to 0. And on the body load, it adds the classes to the body and uses some basic CSS like this
div{
opacity:0;
}
body.loaded div {
opacity:1;
transition:etc.etc.;
}
Here's my version, http://jsfiddle.net/dqUaX/1/
What's great about it is:
Opacity is considered a CSS3 attribute so if a browser is outdated the content won't hide.
I am actually using jQuery to set the opacity to 0 so even if the user has a css3 browser, but has JavaScript disabled, the content will still display.
Since you'll need CSS3 to hide the div, I used a giant DATA URI for the background image so it doesn't have to load.
Pretty awesome no?
You must put the script before the end of the <body> closing tag...

Related

Recaptcha popup is overflowing the users screen, how to reposition?

This is a problem which only started today with zero code changes to the pages CSS, so i have a suspicion that Recaptcha changed its code, but i cant see anyone else being affected by this.
When i click on the "I'm not a robot" for a recaptcha thing on my website, the popup that gives the "Select all images with x" response is being positioned on the wrong side of the captcha box and this is causing half of it to be hidden because it goes over the screen on low resolutions.
The other problem i found, is that if you scroll the webpage down, and click on a recaptcha element that requires you to scroll, the popup no longer appears next to the element.
So my question is, can i force a style onto this popup? it has no class or element ID.
Also is anyone else having this problem, or experienced it before?
The reCaptcha uses an iframe to load. Google doesn't give much for customization of their module. Try adding the data-size="compact" attribute to the loading div. It is the only other option they offer. Trying to enforce styles on the module gets really messy, really fast.
<div class="g-recaptcha" data-size="compact" data-sitekey="your_key"></div>
There is another option, use the css transform to scale the iframe.
https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
<style>#media screen and (max-height: 575px){
#rc-imageselect, .grecaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;-webkit-transform-origin:0 0;}
</style>
Target the entire iframe of popup with css (However the recaptcha does not assign any id or class to the iframe parent div so it will only work if you have only 1 frame in the page)
div iframe{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}

Page "Splash Screen Div" on outgoing and loading pages

I already know how to do a "Splash Screen Div" for a loading page, just wait til everything is loaded and then hide the div or move it off screen.
E.g.
index.html
<div id="loading-Div">
<div id="bear-Logo">
<div id="target">
<div id="target2">
<div id="bearloop"></div>
</div>
</div>
</div>
</div>
loading.css
Just a class called 'fallback' to move the absolute-ly positioned div offscreen.
loading.js
$(window).load(function(){
$( '#loading-Div' ).addClass( 'fallback' );
});
The above is a rather crude example of a "loading Splash Screen Div", I don't know what else to call this, and the .css is imported in the <head> with the .js just before the end of the <body> tag.
This works fine if you click a link and want to show the div while the page loads, but I would like the div to be shown the second the link is clicked, until the destination page is loaded.
Workflow:
http://i.imgur.com/dIOZSMS.jpg
Key Points:
I have a feeling this is only possible with a browser plugin because:
The link isn't an anchor to another div. E.g. url#div -> url#div2
Based on the above, given that the link is to another .html page the content currently displayed would... stop based on how pages are displayed in nature.
Note that:
This is strictly intra-site.
I don't care about IE.
This isn't homework, nor for a client. I am learning web development and thought this would be a cool page transition, per se, and cannot figure out how to do it nicely.
I would prefer not do have an animation and callback for outgoing links to display the div, and then incoming links to display the div as a faked-coherent animation mainly because it wouldn't be coherent unless the download of the second page was instantaneous and because, even if the former was the case, far too much code and therefore file size would go into a coherent animation of whatever the div was to display.
Any ideas guys? I am very stumped on this.
Since your Javascript is at the bottom, it'll load asynchronously, after the page.
index.html
I don't understand why you nested the DIVs that way. Will the page load inside the logo element?
loading.css
With moving the div off the screen, is it part of your animation?
$(".fallback").animate({top: "+=400px", opacity: 0}, 1000);
loading.js
If you want to show an element after the link is clicked, just do it without the window.load function.
http://jsfiddle.net/Etd2D/

divs not displaying with js disabled

My website all seems to work fine when I have javascript enabled but as soon as I disable it, the main page background renders fine but the actual content doesn't display at all. I thought I had designed it in a gracefully degrading manner. Can anyone shed some light on why the content does not display with JS disabled?
Website link
Your CSS on #main_content (and other elements) have display:none; set which hides the content by default.
You then use javascript to display it. Without javascript, it stays hidden.

Loading splash page while HTML styles and scripts get rendered?

I have all my JavaScript files linked on the bottom of my page. This way, the HTML can get rendered before loading any of the scripts. The only problem is that the HTML shows to the user before the scripts finish "decorating" the HTML elements. Is there an elegant way to show the user a splash page to your app before the scripts and styles kick in?
You can create a div with position: fixed and a high z-index covering the whole screen as first element in body. A loading animation or text can be shown inside.
The very last line of the body then is a JavaScript which sets display: none to that div.
In your HTML you can write you splash page and overwrite this with real content (which is hidden by default) by using javascript once it is loaded.
However there is a huge drawback to this solution: what if somebody has JS disabled?
Demo: http://jsfiddle.net/FDcNx/

Is it possible to place a loader image inside an iframe while its loading its content?

I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.

Categories