JavaScript to delay execution of functions after page is loaded

Question

I wrote this javascript to make an animation. It is working fine in the home page. I wrote a alert message in the last.

If I go other then home page, this alert message has to come, but I am getting alert message, if I remove the function, alert message working on all pages, any thing wrong in my code?

window.onload = function(){

    var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');
    var signUp = document.getElementById('signup-link');

        if (yellows != 'undefined' && signUp != undefined){
            function animeYellowBar(num){
                setTimeout(function(){
                    yellows[num].style.left = "0";
                    if(num == yellows.length-1){
                        setTimeout(function(){
                            signUp.style.webkitTransform = "scale(1)";
                        },num*250);
                    }

                }, num * 500);
            }
            for (var i = 0; i < yellows.length; i++){
                animeYellowBar(i);
            }
        }

    alert('hi');

}

Your Javascript is probably throwing an error on the other pages, Look in Firebug — Rafal
– Rafal, Commented Feb 25, 2011 at 14:39
i am work with comodo editor, just i am writing there and pasting to here, i know that this is wrong. and i tried using code element even though i can't make proper formating, can you help me with simple way? — 3gwebtrain
– 3gwebtrain, Commented Feb 25, 2011 at 14:40
yes, it say : var yellows = document.getElementById(...-brief').getElementsByTagName('h2'); then how to solve it? — 3gwebtrain
– 3gwebtrain, Commented Feb 25, 2011 at 14:43
It's not really "wrong", but defining a function in an "if" statement block like that is pretty unorthodox, and it's not necessary. — Pointy
– Pointy, Commented Feb 25, 2011 at 14:43

Luca Filosofi · Accepted Answer · 2011-02-25 17:27:44Z

2

DEMO: http://jsbin.com/enaqu5/2

var yellows,signUp;
window.onload = function() {
    yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');
    signUp = document.getElementById('signup-link');
    if (yellows !== undefined && signUp !== undefined) {
        for (var i = 0; i < yellows.length; i++) {
            animeYellowBar(i);
        }
    }
  alert('hi')
}
function animeYellowBar(num) {
    setTimeout(function() {
        yellows[num].style.left = "0";
        if (num == yellows.length - 1) {
            setTimeout(function() {
                signUp.style.webkitTransform = "scale(1)";
            },
            num * 250);
        }
    },
    num * 500);
}

DEMO 2: http://jsbin.com/utixi4 (just for sake)

$(function() {
    $("#magazine-brief h2").each(function(i,item) {
          $(this).delay(i+'00').animate({'marginLeft': 0 }, 500 ,function(){
           if ( i === ( $('#magazine-brief h2').length - 1 ) )
             $('#signup-link')[0].style.webkitTransform = "rotate(-2deg)";
          });
    });
});

edited Feb 25, 2011 at 17:27

answered Feb 25, 2011 at 14:41

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Luca Filosofi Over a year ago

@3gwebtrain: see the updated version. i missed to declare the global. try it now it work.

3gwebtrain Over a year ago

till this is not work. firebug show the error on second page like this:

Luca Filosofi Over a year ago

@3gwebtrain: i have personally tested it in FF and it work fine.

VulgarBinary Over a year ago

@aSeptik: He's pasting this into HIS html, which is obviously worse than his javascript was. Btw... Don't appreciate the ninja after I answered with corrected JS and you fix your initial broken js by hijacking mine.

Luca Filosofi Over a year ago

i have not hijacked your code, maybe i can't edit my own post? i have just switched from declaring two times the same vars to global scope that's all, it's just a matter of think quickly, write quickly, miss something.. but you know this.

VulgarBinary · Accepted Answer · 2015-05-11 22:09:46Z

1

For starters you are not clearing your SetTimeout and what are you truly after here? You have 2 anonymous methods that one triggers after half a second and the other triggers a quarter of a second later.

So this is just 2 delayed function calls with horribly broken syntax.

Edited Two possibilities, one fixes your current code... the latter shows you how to do it using JQuery which I would recomend:

var yellows, signUp;

window.onload = function(){
    yellows = document.getElementById('magazine-brief');
    if(yellows != null){
        yellows = yellows.getElementsByTagName('h2');
    }else{
        yellows = null;
    }
    signUp = document.getElementById('signup-link');

    if (yellows != null && signUp != null && yellows.length > 0)
    {
        for(var i = 0; i < yellows.length; i++)
        {
            animeYellowBar(i);
        }
    }
    alert('hi');
}

function animeYellowBar(num)
{
    setTimeout(function(){
        yellows[num].style.left = "0";
        if(num == yellows.length-1){
            setTimeout(function(){
                signUp.style.webkitTransform = "scale(1)";
            },num*250);
        }
    }, num * 500);
}

The below approach is a SUMMARY of how to use JQuery, if you want to use JQuery I'll actually test it out:

//Or using JQuery
//Onload equivelent
$(function(){
    var     iterCount = 0,
        maxIter = $("#magazine-brief").filter("h2").length;
    $("#magazine-brief").filter("h2").each(function(){
        setTimeout(function(){
            $(this).css({left: 0});
            if(iterCount == (maxIter-1))
            {
                setTimeout(function(){  
                    signUp.style.webkitTransform = "scale(1)";
                    },iterCount*250);
            }
        }, iterCount++ * num );
    });
});

edited May 11, 2015 at 22:09

answered Feb 25, 2011 at 14:55

VulgarBinary

3,6094 gold badges22 silver badges55 bronze badges

7 Comments

3gwebtrain Over a year ago

i tried the first methos, firebug through an error like : 1first line : document.getElementById("magazine-brief") is null, second line : yellows = document.getElementById(...-brief').getElementsByTagName('h2');

VulgarBinary Over a year ago

@3gwebtrain: Seriously? It means that your getElementById returned null so the further search failed. So... I've updated my solution to handle that... make sure unless your going to include JQuery to NOT include anything after the //Or using JQuery!!!!

Luca Filosofi Over a year ago

@VulgarBinary: also just if you want learn the way of ninja your jquery code should look like this: jsbin.com/utixi4 ;)

VulgarBinary Over a year ago

@aSeptik: I admit defeat, coding jQuery to a solution (that the asker won't even use) while taking a 3 minute breather at work doesn't leave time to write the actual example and refine. ;-) Was just a off the cuff example. Props. Yours is better.

Luca Filosofi Over a year ago

@VulgarBinary: hey bro, i know that, it's the same for me! ;) this is why i posted that code! btw... +1 for the time you spent on writing your code. ;)

|

Collectives™ on Stack Overflow

JavaScript to delay execution of functions after page is loaded

2 Answers 2

5 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related