Window resize and document ready

417
November 23, 2016, at 7:31 PM

So I have this working code for an almost full height slideshow:

$(window).resize(function() {
    var winHeight = $(window).height(); 
    var headerHeight = $(".navbar").height(); 
    $('#slideshow-wrapper, #slideshow, #slideshow .overlay, #slideshow #slogan-wrapper, #slideshow .overlay').height(winHeight - 145);
});
$(window).trigger('resize');

The code works, you can check it out here:

http://leda.rewind9.com/

How can I wrap this code around a document ready function in order to avoid the initial flicker the browser does when its calculating the #slideshow height?

I've tried:

$(document).ready(function() {
    $(window).resize(function() {
        var winHeight = $(window).height(); 
        var headerHeight = $(".navbar").height(); 
        $('#slideshow-wrapper, #slideshow, #slideshow .overlay, #slideshow #slogan-wrapper, #slideshow .overlay').height(winHeight - 145);
    });
    $(window).trigger('resize');
});

But the flicker won't go away. In order to reproduce the problem, just reload the page and check how the slideshow text "hangs" before getting centered.

Any ideas?

Thanks!

Answer 1

Ok, quick and easy jQuery specific fix:

$(document).ready(function() {
 $('body').show();
});

Just make sure to add "display:none" to your body tag. It works, but keeps me wonder what happens if JS is disabled.

Rent Charter Buses Company
READ ALSO
JQuery POST only adding record to mysql once

JQuery POST only adding record to mysql once

I'm using JQuery to call a php script which will add a record to the mySQL database. .

353
How do I prevent “duplicate” events from firing in jQuery?

How do I prevent “duplicate” events from firing in jQuery?

I have an event handler wired to a variety of events to ensure that it gets fired under a variety of circumstances. .

338
How to instantiate a JS widget on all elements with a specific class upon their creation

How to instantiate a JS widget on all elements with a specific class upon their creation

I have a dynamically built page that brings in many elements via ajax. I would like to use the select2 plugin for a particular drop down, which is in a partial view and can be loaded into multiple diffrent areas of the page via ajax, specifically when a user clicks...

261
Firefox extension offsetParent()

Firefox extension offsetParent()

When calling offsetParent on a element in Firefox extension I get the following exception. This works fine in Chrome with no errors.

404