Question

I have set a div to hide with fading effect on document click, It hides on clicking any where but the problem is it reappears on another click and then go to hide, it should not reappear on the any another click.

I have tried like this.

Javascript Code

    <script type="text/javascript">
var fired = false;
if(!fired){
document.onclick=function(){close_box_fadeOut()};
delete this.onclick;
}var fired = true;
function close_box(){
    document.getElementById("search-result").style.display="none";
}
function close_box_fadeOut(){
    setOpacity( 100 );
    document.getElementById("search-result").style.display="block";
    fadeOut();
    setTimeout(close_box, 800);
}
function setOpacity( value ) {
 document.getElementById("search-result").style.opacity = value / 10;
 document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeOut() {
 for( var i = 0 ; i <= 100 ; i++ ) 
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
</script>
enter code here

html Code

<div id="search-result"></div>

and Css Code

<style>
  #search-result{
width: 500px;
height: 25px;
background:#069;
border: 5px solid #000;
display: block;
   }
</style>

Please see and suggest any possible way to do this.

Thanks

Instant Search Codes

    function showResult(str)
{
if (str.length==0)
{
document.getElementById("search-result").innerHTML="";
document.getElementById("search-result").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("search-result").innerHTML=xmlhttp.responseText;
document.getElementById("search-result").style.border="1px solid #A5ACB2";
document.getElementById("search-result").autocomplete="off";
document.getElementById("search-result").style.display="block";
var fired  = false;
var fade = false;
document.onclick = function(){
close_box_fadeOut();
if(!fade){
document.getElementById("search-input").onmouseenter = function(){
show_box_fadeIn()
delete this.onmouseenter;};
  };
}
document.getElementById("search-input").onmouseleave = function(){
var fade = true;
if(fade){
document.getElementById("search-input").onmouseenter = function(){
show_box()};
 };
}
document.getElementById("search-input").onclick = function(e){
    if(!e) {
    e = window.event;
    }

    if(e.stopPropagation && e.preventDefault) {
    e.stopPropagation();
    e.preventDefault();
    } else {
    e.cancelBubble = true;
    e.returnValue = false;
    }show_box(); return true;
};
}
}
xmlhttp.open("GET","instant-search.php?keyword="+str,true);
xmlhttp.send();
}
function close_box(){
document.getElementById("search-result").style.display="none";
}

function close_box_fadeOut(){
if(fired ){
return;
}
fired = true;
setOpacity( 100 );
document.getElementById("search-result").style.display="block";
fadeOut();
setTimeout(close_box, 800);
}
function show_box(){
document.getElementById("search-result").style.display="block";
}
function show_box_fadeIn(){
setOpacity( 0 );
document.getElementById("search-result").style.display="block";
fadeIn()
}
function setOpacity( value ) {
document.getElementById("search-result").style.opacity = value / 10;
document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeIn() {
for( var i = 20 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (i / 5) + ')' , 5 * i );
}
function fadeOut() {
//for( var i = 20 ; i <= 100 ; i++ )
//setTimeout( 'setOpacity(' + (5 - i / 5) + ')' , 5 * i );
for( var i = 0 ; i <= 100 ; i++ ) 
setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}

Answer 1

The function registered with document.onclick is called whenever there is a click, regardless of whether or not fired is false. You need to check if fired is false inside of your close_box_fadeOut() function or somewhere else during that called click function.

For example:

function close_box_fadeOut(){
    if(fired){
        return;
    }
    setOpacity( 100 );
    document.getElementById("search-result").style.display="block";
    fadeOut();
    setTimeout(close_box, 800);
}

Edit: Here’s how I would change all of your code to work:

<script type="text/javascript">
var fired = false;

document.onclick=function(){close_box_fadeOut()};

function close_box(){
    document.getElementById("search-result").style.display="none";
}
function close_box_fadeOut(){
    if(fired){
        return;
    }
    fired = true;
    setOpacity( 100 );
    document.getElementById("search-result").style.display="block";
    fadeOut();
    setTimeout(close_box, 800);
}
function setOpacity( value ) {
 document.getElementById("search-result").style.opacity = value / 10;
 document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeOut() {
 for( var i = 0 ; i <= 100 ; i++ ) 
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
</script>

Edit 2: Here’s what your on click should look like.

document.onclick = function(){
    if(fade){
        return;
    }

    document.getElementById("search-input").onmouseenter = function(){
        show_box_fadeIn()
        delete this.onmouseenter;
    };
};