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
  • 112 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by Designer_101
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.