CODEWITHSUNDEEP
javascripthtml
Tarsem Singh
Tarsem Singh

Reputation: 21

onblur() is not working while onclick() is working fine

I need to make the notification list appear on the click which is working fine. But onblur() is not working at all. Here is the fiddle: http://jsfiddle.net/eX2zQ/

Code:

html:-

<div class="one" onclick="hidetwo();" onblur="remove_the_notification();">
    <div> 
        <ul class="dropdown" id="notification" >
            <li><a href="#">kjhlkjhkjhklhjklj</a></li>
            <li><a href="#">kjhlkjhkjhklhjklj</a></li>
            <li><a href="#">kjhlkjhkjhklhjklj</a></li>
            <li><a href="#">See_All</a></li>
        </ul>       
</div>
</div>

css:-

.one{
    overflow: visible; 
    width: 21px; 
    height: 21px; 
    background-color:black; 
}

js:-

var show=0;

    function hidetwo(){
    if (show==0){
    document.getElementById('notification').style.display="block";
    show=1;
    }
    else if (show==1){
    document.getElementById('notification').style.display="none";
    show=0;
    }
    }

function remove_the_notification(){
    alert('hide one');
    if (show==0){
    document.getElementById('notification').style.display="block";
    show=1;
    }
    else if (show==1){
    document.getElementById('notification').style.display="none";
    show=0;
    }
}

Upvotes: 0

Views: 242

Answers (4)

Andrew D.
Andrew D.

Reputation: 8230

To make onblur event worked on DIV element you need to add tabindex attribute for DIV. For example:

<div class="one" onclick="hidetwo();"
     tabindex="0" onblur="remove_the_notification();">
  ...
</div>

Upvotes: 1

Karthick Kumar
Karthick Kumar

Reputation: 2361

onBlur() event will work with input element like text,file . it will not working on div,so please try onmouseLeave(),onmouseout()

<div class="one" onclick="hidetwo();" onmouseout="remove_the_notification();">

Upvotes: 1

KoalaBear
KoalaBear

Reputation: 2948

Use onmouseout for this. This will trigger when the mouse is going outside the div.

W3Schools onmouseout

Upvotes: 1

George
George

Reputation: 36784

You have onLoad selected in the JSFiddle options. That means that your functions are hoisted after everything on the page is loaded, and so their references aren't available at the time that the handlers are attached. Also, AFAIK, without contenteditable your can't 'blur' a <div> - this event is usually for form elements like inputs. Perhaps you meant onmouseleave?

<div class="one" onclick="hidetwo();" onmouseleave="remove_the_notification();">

JSFiddle

Upvotes: 1

Related Questions