javascript Stylesheet reload delay affecting DOM?

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?

Community · Accepted Answer · 2017-05-23 12:04:27Z

2

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.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Sep 2, 2011 at 17:15

Adrian

2,9231 gold badge18 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

javascript Stylesheet reload delay affecting DOM?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related