javascript site welcome loader with an HTML5 element

Question

I have an odd problem. the question is not so much about specifics of the code, more to the general approach.

scenario: a website has a "welcome screen". The welcome element is an HTML5 EDGE animation (its not a small file ;) ) Using client side detection, we will check if cookies are enabled. if cookies are enabled, we check for a cookie['loader_shown']. if we dont see this cookie, we want to use JS to show a full screen overlay div half opaque. inside this div, we then want to use AJAX to load in the loading element html - at the moment this is defined in a seperate file, and of course refences other files in the EDGE file package...

Any suggestions on how best to approach this. it is important the HTML5 EDGE element is only loaded from the server once the welcome detection has oipened the first overlay div....

oh, the EDGE element must remain transparent!

Use jQuery for most of this. Check for a cookie. http://stackoverflow.com/questions/2824021/check-if-cookie-exists-if-not-create-it to get you started. — Phillip Whisenhunt, Jul 02 '12 at 19:37
WTF is an "HTML EDGE" animation? It's helpful when asking questions to show any code you've written, steps you've taken to resolve the issue or things you've look into already so we don't go down paths you've already deemed unsuccessful. Posing a general question like this isn't a good use of the Q&A type format this forum provides. — tkone, Jul 02 '12 at 19:37
@tkone sorry.. EDGE example here: http://s404416203.domenaklienta.pl/html5_intro/005/ — Nick, Jul 02 '12 at 20:24
Oh an Adobe product. Well, um, you'll need to learn how to set/read cookies. [The MDN Page on it](https://developer.mozilla.org/en/DOM/document.cookie) is pretty good. Then based on the cookie you should launch your animation by calling the function provided by that Adobe software. — tkone, Jul 02 '12 at 20:34
yes, we have figured out the approach now. I will add the answer.... — Nick, Jul 02 '12 at 20:42

score 0 · Answer 1 · answered Jul 02 '12 at 20:45

solved. the best approach is to dynamically load the js files once the cookies have been checked:

sources in comments

    <!DOCTYPE HTML>

<html lang="en">

<head>

<script type="text/javascript">

    var cookiesEnabled = are_cookies_enabled();

    function are_cookies_enabled()                                                                  // http://sveinbjorn.org/cookiecheck
    {
        var cookieEnabled = (navigator.cookieEnabled) ? true : false;

        if (typeof navigator.cookieEnabled == "undefined" && !cookieEnabled)
        { 
            document.cookie="testcookie";

            cookieEnabled = (document.cookie.indexOf("testcookie") != -1) ? true : false;
        }
        return (cookieEnabled);
    }

    // http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

    if(cookiesEnabled == true)
    {
        var headID = document.getElementsByTagName("head")[0];         

        var newScript = document.createElement('script');

        newScript.type = 'text/javascript';

        newScript.charset = 'utf-8';

        //newScript.onload=scriptLoaded; // If you're loading an external javascript and you need to know when the script has loaded you can simply use .onload=yourfunction; to set up the onload handler. Here's an example. 

        newScript.src = '_loader/head3_C_213_no_preloader_edgePreload.js';

        headID.appendChild(newScript);
    }

</script>

<style>

    .edgeLoad-EDGE-614773 { 
        display:none;  
    }

</style>

</head>

<body style="margin:0;padding:0;">  

<h1>test</h1>
    <div id="Stage" class="EDGE-614773">
    </div>
</body>

</html>

never really thought about JS loading itself from script like that...... Oh the possibilities!

javascript site welcome loader with an HTML5 element

1 Answers1