Multiple Instances On Same Page? [Solved]

[stevenp]

[solved due to user error.]

 

Greetings,

As a JS newbie, I don't know what I don't know. Apologies in advance for my lack of knowledge.

I want to use two different JS animations on a page. Either of them work fine by themselves, but will not work together. I notice in the demos (from where I copied the JS syntax), a comment:
 

//we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one.

That sounds like my problem, but I don't know what to do.

Here is my script:
 

    <script>
    window.onload = function(){
        var logo = document.getElementById("logo");
        TweenLite.from(logo, 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    }
    </script>

    <script>
    window.onload = function(){
        var tagline = document.getElementById("tagline");
        TweenLite.from(tagline, 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    }
    </script>

In the above, only the second script "works". When the second is removed, the first works. Can anyone show me where I can learn what I am not doing correctly? I have not found a practical explanation on multiple items.

I tried:

    <script>
    $(window).load(function(){
        var logo = document.getElementById("logo");
        TweenLite.from(document.getElementById("logo"), 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    });
    </script>

    <script>
    window.onload = function(){
        var tagline = document.getElementById("tagline");
        TweenLite.from(tagline, 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    }
    </script>

Again, the second works fine, but the first does nothing. the image loads and does not move as expected.

Thank you in advance,

Steve

[stevenp]

    <script>
    $(window).load(function(){
        var logo = document.getElementById("logo");
        TweenLite.from(document.getElementById("logo"), 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    });
    </script>

    <script>
    window.onload = function(){
        var tagline = document.getElementById("tagline");
        TweenLite.from(tagline, 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    }
    </script>

Yeah, that works just fine when one calls jquery in the header:

<script type="text/javascript" src="/js/jquery-1.10.2.js"></script>

Ouch. I didn't know that jquery was not js. I don't know what I don't know.

 

That is embarrassing.

 

[jamiejefferson]

Glad you figured it out. I'll just mention, if you have jQuery on your page then you are probably best not swapping between $(window).load() and window.onload. The functions you pass to $(window).load() are added to a queue, so if necessary you could load 100 different files that all bound functions to $(window).load() and they would all get called (in the order that they were loaded). As another plus, if you try to bind another function with $(window).load() after the window load event, it will just get called immediately.

 

The jQuery folk thought of everything...

 

Also, (window).load() is very useful when you need to wait for all assets on the page to have loaded (images etc), but if your animation isn't affected by those assets, you can trigger them on $(document).ready() instead and your animations can start even sooner. (essentially, document.ready occurs once the html has been parsed to </body>, meaning that your entire HTML structure can now be rendered and manipulated as much as you like. window.onload occurs after all of the assets (e.g. <img>) referenced in the HTML have been loaded completely/)