CODEWITHSUNDEEP
javascriptcsshtml
tsujp
tsujp

Reputation: 1096

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:

  1. The link isn't an anchor to another div. E.g. url#div -> url#div2
  2. 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:

  1. This is strictly intra-site.
  2. I don't care about IE.
  3. 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.

Upvotes: 0

Views: 2319

Answers (1)

Shaun Molloy
Shaun Molloy

Reputation: 70

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/

Upvotes: 1

Related Questions