CODEWITHSUNDEEP
javascriptjquery
john
john

Reputation: 11

How to Browser tab title set it to scrolling/moving?

I have this code

$(function() {
  var message = 'Dont forget us';
  var original;
  var txt1 = ' - ';

  $(window).focus(function() {
    if (original) {
      document.title = original;
    }
  }).blur(function() {
    var title = $('title').text();
    if (title != message) {
      original = title;
    }
    document.title = message + txt1 + original;
  });
});

Which actaully changes Browser tab title to message = 'Dont forget us' when you open new browser tab, and when you come back then again it shows titles page.

But I dont know how to make scrolling or moving from left to right browser title ?

So when someone opens the new tab, it will display: Dont forget us

but i want that this is moving.

please help

Thank you

Upvotes: 1

Views: 2989

Answers (2)

BenK
BenK

Reputation: 121

Going off what Marius / Mitko did I noticed title spaces were getting added into weird places. Here is my solution to keep the title spacing correct.

setTimeout(rotateTitle, 250);

function rotateTitle(prependSpace = false) {
    const firstChar = document.title.substring(0, 1);
    const nextCharIsSpace = document.title.substring(1, 2) === " ";
    const space = prependSpace === true ? " " : "";

    const newTitle = document.title.substring(1) + space + firstChar;
    document.title = newTitle;

    setTimeout(() => rotateTitle(nextCharIsSpace), 250);
}

Upvotes: 1

Márius Rak
Márius Rak

Reputation: 1472

You need to use timer setTimeout() and every, say, 500ms remove first letter of title string and append it to the end of the string.

Update: As website title is trimmed it loses the spaces when they get to 1st position. To save them log the title in a variable.

var blurPageTitle = document.title+' ';
changeTitle = function(){
   var letter = document.title[0];
   blurPageTitle = blurPageTitle.substr(1) + letter;
   document.title = blurPageTitle;
   changeTitleTimer = setTimeout(changeTitle, 500);
};
stopChangingTitle = function(){
    clearTimeout(changeTitleTimer);
}

Then just call the functions when you want to start or stop it.

Upvotes: 2

Related Questions