Change css value on fullscreen

Question

I manage the positioning of my main div by changing its css top value according to the height of a slideshow div that displays above it.

Since the height of that last div depends on the screen width, I use a script to do so :

$(window).load(function() {
     $('.subslide').css('top', $('.slides').height() + 132 + 'px');
});
$(window).resize(function() {
     $('.subslide').css('top', $('.slides').height() + 132 + 'px');
});

Problem occurs when entering fullscreen : the resize function doesn't work properly and the main div overlays the slideshow div. Any ideas how to fix this ?

You can see the page here : http://www.centredelafontaine.be/psychologie.html

Answer 1

This is a bit hacky, which always leaves a bad taste in my mouth, but I'm guessing that the slideshow needs a bit of time to make adjustments when the window resizes, so you need to let that occur first before you do anything that uses it. Try this...

$(window).resize(function() {
    setTimeout(function() {
        $('.subslide').css('top', $('.slides').height() + 132 + 'px');
    }, 250);
});

It works when I run it on the linked page in the console.