CODEWITHSUNDEEP
javascriptjquerycssdom
Damon
Damon

Reputation: 10809

javascript Stylesheet reload delay affecting DOM?

function switchTemplate(stylePath){
    var ns = $('<link>', {
            href: stylePath,
            id: 'themeStyle',
            type: 'text/css', 
            rel: 'stylesheet'
        });
    $('#themeStyle').replaceWith(ns);
    resetPops();
    positionElements();
    $('#video-overlay').show();
}

The stylesheets are loading properly, and showing after a brief delay, but the positionElements function (which positions #video-overlay over a video element using offset()) does not fire correctly. I'm guessing it doesn't have the new DOM positions yet?

I have positionElements(); tied to window resize as well and when I call that right after switching the stylesheet, everything goes to the right place.

I guess I could build in a timer delay, but that doesn't seem particularly reliable. Is there some other event I can tie the positionElements() function to to make sure it's up to date?

Upvotes: 1

Views: 213

Answers (1)

Adrian
Adrian

Reputation: 2923

The answer to this SO question shows how you can determine if your stylesheet is fully loaded (SO Question). From that you would move any functions that need to occur after it is loaded into this custom event.

Upvotes: 2

Related Questions