JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<!-- V6 onwards with the timeoutstop -->
<div class='footerPromoBannerWrapper'></div>
<div class='stickyFooter'>
    <input id="emailsignup" type="text" />
</div>

CSS

div {
    height:200px;
    width:200px
}
div.footerPromoBannerWrapper {
    background-color:red;
    content:"promo";
}
div.stickyFooter {
    background-color:blue;
    content:"footer";
}

JavaScript

jQuery(document).ready(function () {
    
    // check if both divs are visible
    if ((jQuery('.footerPromoBannerWrapper').is(':visible')) && (jQuery('.stickyFooter').is(':visible'))) {
        
        // Local variable for cancel of fades
        var stickyTimeout;

        // Set sticky as display:none
        jQuery('.stickyFooter').hide();

        // Switch in
        window.switchIn = function () {
            jQuery('.footerPromoBannerWrapper').fadeToggle(function () {
                jQuery('.stickyFooter').fadeToggle(function () {
                    stickyTimeout = setTimeout(function () {
                        window.switchOut();
                    }, 3000);
                });
            });
        };

        // Switch out
        window.switchOut = function () {
            jQuery('.stickyFooter').fadeToggle(function () {
                jQuery('.footerPromoBannerWrapper').fadeToggle(function () {
                    stickyTimeout = setTimeout(function () {
                        window.switchIn();
                    }, 3000);
                });
            });
        };
        
        stickyTimeout = setTimeout(function () {
            window.switchIn();
        }, 5000);
        
        jQuery('#emailsignup').focus(function() {
            clearTimeout(stickyTimeout);
        });

    } // End if visible
});