jQuery Title Change with array elements

Question

I'm trying to get this code to change the page title based on array elements. But there is something wrong with this code. I need the page title show the entire array only when the browser tab is inactive. When the browser tab is active show the real page title. This is the code that I got so far

Here is a fiddle: https://jsfiddle.net/hgmvqasn/2/

/*
*
Title Change Plugin, adapted
*
*/

window.onload = function() {
  var pageTitle = document.title;
  var appeal = ["Hello! ♥","Welcome Back!", "Are you sure?"];
  var blinkEvent = null;
   document.addEventListener('visibilitychange', function(e){
     var isPageActive = document.visibilityState;
     console.log(isPageActive);
     if (isPageActive == "hidden") {
       blinkEvent;
     } else {
       document.title = pageTitle;
       clearInterval(blinkEvent); 
     }
   })
  blinkEvent = setInterval(function() {
  function blink(){
      for (i = 0; i < appeal.length; i++){
              document.title = appeal[i];
              console.log(appeal[i]);
        }
        // To make instant page title change (no wait the interval)
      document.title = appeal[1];
    }
  }, 1900);
};

The code above does not display all items in the array or displays them in wrong way. In addition the interval is not interrupted when the tab becomes active again.Can someone help me?

The for loop is starting multiple timers, and they all run at about the same time. Each one replaces the title with a different one, and all you see is the change from the last one. — Barmar
– Barmar, Commented Apr 29, 2021 at 23:04
You just need one interval timer, not one for each array element. The timer should increment i (wrapping around when it reaches the end) and show that title. — Barmar
– Barmar, Commented Apr 29, 2021 at 23:05
Also blinkEvent only contains the last timer. So clearInterval(blinkEvent) only stops one of the timers, not all of them. — Barmar
– Barmar, Commented Apr 29, 2021 at 23:06
document.hidden is obsolete. The property you want is visibilityState, which can have values visible or hidden. See developer.mozilla.org/en-US/docs/Web/API/Document/…. Also see the note there about Safari using the pagehide event instead of visibilitychange. — Barmar
– Barmar, Commented Apr 30, 2021 at 14:40

Barmar · Accepted Answer · 2021-04-30 18:04:24Z

1

You shouldn't have the for loop. You just want one timer, not a timer for each string in the appeal array. That timer should increment the index and display the next title.

window.onload = function() {
  var pageTitle = document.title;
  var appeal = ["Hello! ♥", "Welcome Back!", "Are you sure?"];
  var appeal_index = 0;
  var blinkEvent = null;
  document.addEventListener('visibilitychange', function(e) {
    var isPageActive = document.visibilityState;
    console.log(isPageActive);
    if (isPageActive == "hidden") {
      start_timer();
    } else {
      document.title = pageTitle;
      clearInterval(blinkEvent);
    }
  })

  function blink() {
    document.title = appeal[appeal_index];
    console.log(appeal[appeal_index]);
    appeal_index++;
    if (appeal_index >= appeal.length) { // wrap around to beginning
      appeal_index = 0;
    }
  }

  function start_timer() {
    blink();
    blinkEvent = setInterval(blink, 1900);
  }
};

edited Apr 30, 2021 at 18:04

answered Apr 30, 2021 at 17:58

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

V.Salles Over a year ago

Thanks so much! I just replaced the startTimer () variable with start_timer (). Worked perfectly

Collectives™ on Stack Overflow

jQuery Title Change with array elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related