Wait for JQuery execution until whole page is loaded breaks execution

I have a JQuery script to load a newsletter subscription popup window after the users scrolls down a certain amount of pixels using the jQuery .scroll/.scrollTop function.

At the moment it's all encapsulated within

jQuery(document).ready(function($)

The problem is the usual caching and images issue and the subscription box pops up all over the place. I was reading about delaying jQuery using the .load function until the page is fully loaded. However when I replace

jQuery(document).ready

with

jQuery(window).load(function($){
  //your code here
});

the functionality breaks completely.

I want to note that I am using WordPress and have the script enqueued like this:


function enfold_child_custom_scripts(){

    // Register and Enqueue a Script
    // get_stylesheet_directory_uri will look up child theme location
    wp_register_script( 'custom-js', get_stylesheet_directory_uri() . '/custom.js', array('jquery'));
    wp_enqueue_script( 'custom-js' );

}

add_action('wp_enqueue_scripts', 'enfold_child_custom_scripts');

Here is my JS/jQuery code as it is right now.

jQuery(document).ready(function($) {

    jQuery("#nl-pop").hide(); //hide nl block initially
    var disableFade = "false";

    var startShowTop = jQuery("#newsletter-cta").offset().top - 3500;
    var startHide = jQuery("#newsletter-cta").offset().top - jQuery(window).height(); //Hide when the viewport is reached

    jQuery('#no-thanks').click(function(event) {
         event.preventDefault();
         jQuery('#nl-pop').fadeOut('slow');
         disableFade = "true";
    }); 
 jQuery(window).scroll(function() {
        if(jQuery(window).scrollTop() < (startShowTop) ) //when scrollposition is smaller than the first point
        {
             jQuery("#nl-pop").fadeOut(200); // Hide when in the upper part of the page
        }
        else //when reached the lower part of the page
        {
            if(jQuery(window).scrollTop() > startShowTop && $(window).scrollTop() < startHide && disableFade==="false") { //When reached the show position but not as far down as the hide position
                jQuery("#nl-pop").fadeIn(200); //show
            }

            else if(jQuery(window).scrollTop() > (startHide) ) { //scrolled down to the bottom newsletter box
                jQuery("#nl-pop").fadeOut(200); //hide
            }
        } 

    });   
});

Solutions

Move the calculation of startShowTop and startHide to be inside of .scroll() . That way their value won't suffer from unloaded elements. They will instead be dependent on the current state of the page (which will most likely be after entire page has loaded).

Similar questions

Adding new lines to .htaccess breaks the whole site
I have an issue that when I add a simple line to the .htaccess file it immediately gives me an internal server error. I have no idead what is wrong, the current content of the .htaccess file is the following: If I add a line and get the .htaccess file looking like below, it immediately breaks the site and gives me 500 Internal server error: Could y...
Wordpress: query_posts in a page that gets loaded into a div after the page is loaded
I just got jQuery to be able to load a page into a body div. Now I'm trying to get wordpress functionality into various pages that I can then load into that body div. Everything loads and I know the right pages are being accessed but I've run into a very unexpected problem. Fatal error: Call to undefined function wp_head() in /home/nighthav/public_...
What is causing such a long wait time on my blog page?
I have recently developed 4 websites in WordPress using the rtpanel theme framework. When I put the websites live, I noticed that a couple of them upon clicking through to the blog page, are taking up to 25 seconds to load. (see link) http://tools.pingdom.com/fpt/#!/brQN7J/www.exactabacussoftware.com/blog Can anyone tell me what is causing this lon...
How to add download wait countdown page in wordpress?
In my WordPress website I have a file to download. When user click the button the download start. But what I want is when a user click on button it opens a new page, show a countdown of 5 seconds and message "your download will start automatically if not click here." Can anyone help me with this matter. I have searched a lot on Internet for any plu...
Should I wait for some time to be verified by google to see Ads in my page?
Here is my code: I am using wordpress. So created test page and placed code inside of content and also tried to place code directly in php template file. But in 2 cases no success, iframe body is empty and nothing appears in the website. Should I wait for some time to be verified by google or it is another issue that I can't see Ads.
Website url with or without www to reduce wait time during page load
I have a Wordpress site. I see in pingdom tools test that if my site url has www and user types the URL without www, then he/she is forced to wait. And the wait time is affecting my page ranking. Can anyone help me with the following questions:

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy .