Question

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?

Answer 1

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.