Flash the title bar

Question

I am try to get the title bar to flash, using very basic HTML. I've given it a shot, but the code below doesn't seem to work, and I have no idea why. Also, is there a way to make the title bar flash text, but only if the user is not viewing the current browser page?

My attempt:

function Flash() {
            window.setTimeout(function() {
            alert(document.title);
                document.title = (document.title == "Company" ? "Company - flash text" : "Company");
            }, 1000);

            this.stop = function() { 
                document.title = "Company";
                clearTimeout(this.timer);
            }
        }

mplungjan · Answer 1 · 2019-02-10T07:36:03.187

10

Duplicate of this one make my browser blink as indicator

But since I wrote this script now anyway:

https://plungjan.name/SO/flashtitle.html

<script>
var timer="";
var isBlurred=false;
window.onblur=function() {
  isBlurred = true;
  timer=window.setInterval(function() {
    document.title = document.title == "Company" ? "Company - flash text" : "Company";
  }, 1000);
}
window.onfocus=function() { 
  isBlurred = false;
  document.title = "Company";
  clearInterval(timer);
}
</script>

jQuery version is not really much different (but not tested)

var timer="";
var isBlurred=false;
$(window).on("blur",function() {
  isBlurred = true;
  timer=window.setInterval(function() {
    document.title = document.title == "Company" ? "Company - flash text" : "Company";
  }, 1000);
}).on("focus",function() { 
  isBlurred = false;
  document.title = "Company";
  clearInterval(timer);
});

edited Feb 10 '19 at 07:36

answered Mar 09 '11 at 17:32

mplungjan

169,008
28
173
236

Thanks. Is there a way to know if the window is out of focus (ie. "isBlur == true"), as I don't need to flash the window every time focus is lost, but only some of the times. – Margaret Zakowski Mar 09 '11 at 17:35
is there a jquery version of this? – relipse Apr 26 '13 at 12:06
only difference between this and a jQuery version is `$(window).on("blur",function() {...}).on("focus",function() {...});` – mplungjan Apr 26 '13 at 12:11

score 1 · Answer 2 · edited Feb 10 '19 at 05:23

You ask about flashing (blinking) document.title bar when visitor is not viewing the current browser page (window hide, blur). So we have to set up two functions. First we need to detect if a browser window is not currently active - visibilityChange(actionFunction). And second we need to start get flashing document.title bar - comeBackAlerts(). Here you are - The solution works for me fine, hopefully, and for you.

/* Set event leaving the page to execute actionFunction */

function visibilityChange(actionFunction) {

  window.focus(); /* window.onfocus = infoIn;  */

  var hidden = "hidden";

  /* Standards: */
  if (hidden in document) {
    document.addEventListener("visibilitychange", actionFunction);
  } else if ((hidden = "mozHidden") in document) {
    document.addEventListener("mozvisibilitychange", actionFunction);
  } else if ((hidden = "webkitHidden") in document) {
    document.addEventListener("webkitvisibilitychange", actionFunction);
  } else if ((hidden = "msHidden") in document) {
    document.addEventListener("msvisibilitychange", actionFunction);
  }
  /* IE 9 and lower: */
  else if ("onfocusin" in document) {
    document.onfocusin = document.onfocusout = actionFunction;
  }
  /* All others: */
  else {
    window.onpageshow = window.onpagehide = window.onfocus = window.onblur = actionFunction;
  }
}


/* Function to make browser window blink in task bar */

var comeBackAlerts = (function() {
  var oldTitle = document.getElementsByTagName('h1')[0].innerText; /* document.title; */
  var msg = "Arbir.ru";
  var intervalId;
  var blink = function() {
    intervalId = setInterval(function() {
      /* document.title = document.title == msg ? ' ' : msg; */
      if (document.title == msg) {
        document.title = oldTitle;
      } else {
        document.title = msg;
      }
    }, 1000);
  };
  var clear = function() {
    clearInterval(intervalId);
    document.title = oldTitle;
    window.onmousemove = null;
    window.onmouseout = null;
    intervalId = null;
  };
  return function() {
    if (!intervalId) {
      blink();
      window.onmousemove = clear;
    }
  };
}());

/* Running the functions */

visibilityChange(comeBackAlerts);

Flash the title bar

2 Answers2

Linked