Member Avatar for Designer_101

Hi

I have this login box that drops down once clicked. I would like it so if the user doesnt click one of the fields within lets say 8 seconds then the box minimizes automatically. Here is what I have:

<script language="javascript">
	function makevisible() {
	document.getElementById("dropform").style.display="block";
	
	setTimeout("minimize()",4000);
}
	function minimize() {
	document.getElementById("dropform").style.display="none";
	
}
</script>
<body>

<ul id="top-navigation">
				<li><a <?php if(!isset ($_SESSION['logedin']) || $_SESSION['logedin'] == false) { 
		
	echo " id='tn_login' onclick='makevisible()' href='#'>Login"; 
	} else { 
	echo " id='tn_logout' href='logout.php'><i>Logout</i>"; 
	}; 
	?></a></li>
				<li><a href="newuser.php" id="tn_signup">Sign-Up</a></li>
				
			
			</ul>
            
<div id="dropform" style="float:left;">
			<form action="process.php" method="POST">
				<label for="username" style="font-size:10px;">Username</label>
				<input type="text" name="user" maxlength="30">
				<label for="password" style="font-size:10px;">Password</label>
				<input type="password" name="pass" maxlength="30"><br>
                <input type="checkbox" name="remember" <?php if($form->value("remember") != ""){ echo "checked"; }; ?>>
<b style="font-size:9px; color:#FFFFFF;">Remember Me </b>   
<input type="hidden" name="sublogin" value="1">
				<div></div>
				<input type="image" class="button" src="images/but_login.gif" value="Login" />
			</form>

		</div>
	<?php
            if($form->num_errors > 0){
            echo "<font size=\"2\" color=\"white\">".$form->num_errors." error(s) found</font>";
			};
			echo $form->error("user");
			echo $form->error("pass");
			?>

As you can see I have set a delay once the form is maximized and then go down after 4000. However how do I make it so that the form minimizes if there is no interactivity on the input boxes.

Thanks for any help

  • 2 Contributors
  • 5 Replies
  • 120 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by Designer_101

Dani AI

Generated

The inline fix you landed on (clearing the timeout from an input click) will work, but it is brittle: it misses keyboard focus, touch events, and any activity that is not a mouse click. Starting the timer on window.onload (as suggested) is also the wrong place — that schedules a hide before the panel is even shown. A more reliable pattern is: start the inactivity timer when the panel is opened, cancel it on any meaningful activity inside the panel (focus, input, pointer/touch, keypress), and restart it only after the user has stopped interacting.

Example (attach to the visible panel rather than each input so you can handle all activity types in one place):

const panel = document.getElementById('dropform');
let inactivityTimer = null;
const TIMEOUT_MS = 8000;

function startInactivity() {
  clearInactivity();
  inactivityTimer = window.setTimeout(closePanel, TIMEOUT_MS);
}

function clearInactivity() {
  if (inactivityTimer !== null) {
    window.clearTimeout(inactivityTimer);
    inactivityTimer = null;
  }
}

function openPanel() {
  panel.style.display = 'block';
  startInactivity();
}

function closePanel() {
  clearInactivity();
  panel.style.display = 'none';
}

/* keep the timer alive while user interacts */
panel.addEventListener('focusin', clearInactivity);
panel.addEventListener('pointerdown', clearInactivity);
panel.addEventListener('input', clearInactivity);
/* when the user leaves the panel, restart the timer */
panel.addEventListener('focusout', () => setTimeout(startInactivity, 0));

Troubleshooting notes: declare the timer variable in a scope shared by open/close (to avoid accidental duplicate timers), clear the timer on form submit so it does not hide while posting, include touchstart or use pointer events for mobile, and prefer function references to string arguments to setTimeout. This keeps behavior predictable and avoids the race conditions that come from starting timers on page load or relying only on inline onclick handlers.

Recommended Answers

All 5 Replies

Member Avatar for essential

From the makevisible() function, add this: [b]stop[/b] = setTimeout("minimize()", 4000); .
Then in the minimize() function add this clearTimeout([b]stop[/b]); as the first statement &#8212; the rest of your code is as follows.

Member Avatar for Designer_101

I added the code you suggested but it doesnt do anything about stoping the timeout only when the user is interactive with my form.

You put "the rest of your code is as follows". Were you meant to type more?

Thanks for the reply though

Member Avatar for essential

Sorry if i've missed something there!
Here's the solution for the stated issue, just add a few lines of this:

// Assuming the form is dropped
window.onload = function() {
stop = setTimeout("minimize()", 4000); }

hope it helps...

Member Avatar for Designer_101

Hi thanks for the reply.

Im not sure if the code will work though, this is my form:

<div id="dropform" style="float:left;">
			<form action="process.php" method="POST">
				<label for="username" style="font-size:10px;">Username</label>
				<input type="text" name="user" maxlength="30" value=" <?php 
				echo $form->error("user");  ?> ">
				<label for="password" style="font-size:10px;">Password</label>
				<input type="password" name="pass" maxlength="30" value= " <?php 
				echo $form->error("pass"); ?> "></b><br>
                <input type="checkbox" name="remember">
<b style="font-size:9px; color:#FFFFFF;">Remember Me   
<input type="hidden" name="sublogin" value="1">
				<div></div>
				<input type="image" class="button" src="images/but_login.gif" value="Login" />
			</form>

		</div>

And all I am doing in javascript is using a standard html a href that when clicked changes the css of the div. (display=hidden)

Should I not use the forms onChange or onClick to activate a javascript function that then stops the delay?

The only reason Im unsure is because your code sais, window.onLoad. The form is loaded in when the page loads however is only visible once a link is clicked.

Thanks

Member Avatar for Designer_101 
<input type="password" name="pass" maxlength="30" onClick="clearTimeout(stop);">

Hi, figured the rest out but thankyou for your help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.