Hide the login form after 10 seconds if the cookie is not set and no inputs are selected

Question

I am developing a small function for my site where the shape of the sign is automatically displayed in the navigation bar when the site is opened, but only if a certain cookie is not set. Then, after 10 seconds, the form will disappear.

It should also remain open if the user has selected one of the inputs of the OR form, if one of the inputs contains content. ( #user-pest or #pass-pest ).

Most of them work as intended, however, even if one of the inputs is selected or contains content, after 10 seconds the form will disappear from the page.

Below is the JavaScript (and jQuery ) code I am using ( updated ).

 $(document).ready(function(){ // hide sign in form function hideForm(){ // function for updating elements $("#darknet-login-nav").css("display", "none"); $(".index-outer").css("height", "100px"); $(".index-inner").css("width", "438px"); $(".index-inner").css("top", "-10px"); $("#darknet-mast").css("font-size", "97px"); } function hideFormSet(){ // function used for updating elements and setting cookie hideForm(); document.cookie = "signinNav=set"; } var checkDisplayed = getCookie("signinNav"); // get cookie contents if(checkDisplayed == "set"){ hideForm(); // if cookie is set, hide the form } else { // if it isn't var hideInterval = setInterval(hideFormSet, 10000); // after 10 seconds, call hideFormSet function if($("#user-pest").is(':focus') || $("#pass-pest").is(':focus')){ clearInterval(hideInterval); // if one of the inputs are focused on, stop the interval } else { hideInterval; // if they aren't focused, start the interval } } }); 

and this is my simplified markup.

 <div class="darknet-nav-login-form" id="darknet-login-nav"> <form action="" method="post"> <input type="text" name="username" id="user-pest" placeholder="Username" autocomplete="off"><br> <input type="password" name="password" id="pass-pest" placeholder="Password" autocomplete="off"><br> </form> </div> 

I am still very new to JavaScript, so we will be grateful for any pointers and corrections.

EDIT: please check my updated code above.

Even if the inclusion of inputs is focused, the interval will continue, not stop.

thanks

Answer 1

If I understand your purpose correctly, you also want to hide the form 10 seconds after losing focus. In this case, it is easier to bind focusin / focusout events to restart the timeout, otherwise when you exit the input just before the interval is triggered, it will be hidden much earlier than the timeout.

 var inputs = $('#user-pest, #pass-pest'), hideTimeout, checkFocus = function(){ var hide = !inputs.is(':focus'); if(hide===!!hideTimeout)return; if(hide) hideTimeout = setTimeout(hideFormSet, 10000); else hideTimeout = clearTimeout(hideTimeout); }; inputs.focusin(checkFocus).focusout(checkFocus); checkFocus(); 

The Sidenote method, jQuery is checks if any of the elements in the jq array matches the selector, so instead of a separate one and / or you can do: $('#user-pest, #pass-pest').is(':focus')

Fiddle example

Sidenote2, binding (re) will happen twice because one input loses focus before the next gets focus. This is not a problem in itself, but if the form contains only these 2 inputs, using an event bubble to check the focus on the form itself can be another small optimized step: inputs.parent().focusin(checkFocus).focusout(checkFocus);

Answer 2

You need && on this line.

 if(!$("#user-pest").is(':focus') || !$("#pass-pest").is(':focus')){ 

What you had before was

 if( user-pest is not focused OR pass-pest is not focused) 

The user cannot focus both of them at the same time, so true and hide will always be evaluated, true will be set. Use the following:

 if(!$("#user-pest").is(':focus') && !$("#pass-pest").is(':focus')){ 

Alternatively, you can also use the following

 if($("#user-pest").is(':focus') || $("#pass-pest").is(':focus')){ var hide = false; } else { var hide = true; } 

As stated in your comment, there is another issue that I missed for the first time.

The hidden variable is set to load the page, which happens instantly, and you most likely did not have time to focus on any object. You have to move the code that checks to see if it focuses on the timeout callback.

See this jsFiddle for full working example code. Basically, your timeout should check if the inputs are focused on startup, and not on page loading, as shown in the following snippet.

 setTimeout(function() { if (!$("#user-pest").is(':focus') && !$("#pass-pest").is(':focus')) { $("#darknet-login-nav").css("display", "none"); $(".index-outer").css("height", "100px"); $(".index-inner").css("width", "438px"); $(".index-inner").css("top", "-10px"); $("#darknet-mast").css("font-size", "97px"); document.cookie = "signinNav=set"; // set the cookie so the form doesn't appear when they come back later } }, 2000); 

Answer 3

Here's a solution that ensures that the inputs appear empty and that they are not focused. Behavior outside the initial timeout of 10 s was not specified, so I left the interval active - the hiding behavior will be called at any time when the timeout expires, and the conditions for hiding the header are met.

If you want to make this a "one-time" timer, just clearInterval in the intervalHandler function.

 window.addEventListener('load', onDocLoaded, false); var intervalHandle; function onDocLoaded(evt) { intervalHandle = setInterval(intervalHandler, 2000); } function hideHeader() { document.getElementById('darknet-login-nav').classList.add('hidden'); } // returns true/false // true if the header should be hidden, false otherwise. // Things that will prevent the header from being hidden area // 0) content in the #user-pest input // 1) content in the #pass-pest input // 2) focus of either #user-pest or #pass-pest elements function shouldHideHeader() { if (document.getElementById('user-pest').value != '') return false; if (document.getElementById('pass-pest').value != '') return false; if (document.activeElement == document.getElementById('user-pest')) return false; if (document.activeElement == document.getElementById('pass-pest')) return false; return true; } function intervalHandler() { if (shouldHideHeader()) hideHeader(); } 

 .darknet-nav-login-form { height: 42px; } .hidden { height: 0px; overflow: hidden; transition: height 2s; } 

 <div class="darknet-nav-login-form" id="darknet-login-nav"> <form action="" method="post"> <input type="text" name="username" id="user-pest" placeholder="Username" autocomplete="off"/><br> <input type="password" name="password" id="pass-pest" placeholder="Password" autocomplete="off"/><br> </form> </div>