CODEWITHSUNDEEP
javascriptjquery
Matt Hutch
Matt Hutch

Reputation: 463

.delay() not working on my .show() JQuery

I'm trying to make my footer disappear when on a mobile device and only when the keyboard is open. Which I have working perfectly, however the issue is that the footer reappears before the keyboard has time to close. Which is because I'm using the event from the textbox having focus not the keyboard being open. So I thought the best way to resolve this is with a .delay() however, this isn't working at all. Anyone have any ideas here? 

<script>
    var isMobileView = false; //global variable

    $(document).ready(function () {

        function setScreenWidthFlag() {
            var newWindowWidth = $(window).width();
            if ( $(window).width() > 600) {   
                isMobileView = false;
            }
            else {
                isMobileView = true;
            }
        }

        $(".tbinputArea").focus(function() {
            if(isMobileView)
                $("#footer").hide();
        });

        $(".tbinputArea").focusout(function() {
            if(isMobileView)
                $("#footer").delay(500).show();
        });

        setScreenWidthFlag();

        $(window).on("resize", function (e) {
            setScreenWidthFlag();
        });
    }); 
</script>

Upvotes: 0

Views: 75

Answers (2)

suyesh
suyesh

Reputation: 659

$("#footer").delay(500).show(0);

Try this.

Upvotes: 2

iSensical
iSensical

Reputation: 757

refer this explanation precisely explained the reasons for it http://www.mattlunn.me.uk/blog/2012/06/jquery-delay-not-working-for-you/

Delay is just for queue delay not any event delay so try to add some events within like fadeIn or similar.

Upvotes: 0

Related Questions