CODEWITHSUNDEEP
javascripthtmlonblur
C . X . Kuhns
C . X . Kuhns

Reputation: 21

onblur not working but onclick is

I'm trying to use onblur to make a home button appear when a particular link is scrolled away from.
This is the code in the body.

<div id="lynx">
      <a href="#resume" onblur="btnDisplay()"><h3>Resume</h3></a>
      <a href="#projects"><h3>Projects</h3></a>
      <a href="#connect"><h3>Connect</h3></a>
 </div>

This is the function, which works when called via onclick.

<script type = "text/javascript">
    function btnDisplay() {
            document.getElementById("homeBtn").style.display = "block";
    }
</script>

Is there some trick to using onblur that I'm not getting?

Upvotes: 1

Views: 700

Answers (1)

Ibu
Ibu

Reputation: 43820

The event you are looking for is probably onmouseup. Onblur is available on text boxes. When you deselect them the blur function is called.

For anchor tags, you can use click, mousedown, or mouseup.

If you want something to happen when the window is scrolled away, you have to track the onscroll event, which is available on the window object.

Here is a naive implementation:

window.onscroll = function() {
   var position = window.scrollY;
   if (position > positionofObject){
       // do work.
   }
}

Upvotes: 3

Related Questions