Caelan Grgurovic Caelan Grgurovic - 1 year ago 63
HTML Question

hide sign in form after 10s if cookie not set and no inputs are selected

I'm developing a little function for my site where a sign in form is automatically shown in the navbar when the site is opened up, but only if a certain cookie has not been set. Then, after 10 seconds has passed, the form will disappear.

It is also supposed to stay open if the user has selected one of the form inputs OR if one of the inputs contain contents. (


Most of it is working the way it is supposed to, however, even when one of the inputs is selected or contains contents, once 10 seconds has passed, the form will disappear from the page.

The following is the JavaScript (and jQuery) code that I am using (updated).

// 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
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>

I'm still very new to JavaScript, so any pointers and fixes will be greatly appreciated.

EDIT: please check my above updated code.

Even when on of the inputs are focused, the interval will still continue, rather than stopping.


Answer Source

If I understand your goal correctly, you also want to hide the form 10 seconds after the inputs lose focus. In that case it's easier to bind to the focusin/focusout events to restart the timeout, otherwise when leaving an input just before the interval fires it is hidden much earlier than the timeout.

var inputs = $('#user-pest, #pass-pest'),
    checkFocus = function(){
        var hide = !':focus');
            hideTimeout = setTimeout(hideFormSet, 10000);
            hideTimeout = clearTimeout(hideTimeout);


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

example Fiddle

Sidenote2, the (re)binding will occur twice because one input loses focus before the next one gains focus. This is not a problem in itself, but if the form only contains those 2 inputs, using event bubbling to check focus on the form itself might be one little step further optimized: inputs.parent().focusin(checkFocus).focusout(checkFocus);

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download