can yo make the webpage title change again and again

Question

suppose I have a webpage with a title "Hi I am a title" but 5 seconds after the page has been loaded it becomes "Hi I am another title" and then 5 seconds after that it becomes "I am also a title" and then this keeps happening again and again.Can someone please guide me how to make this happen. I took some online tutorials from w3schools.com. I really want to do this but I don't even know where to start.

you need to have a background process that calls title changing fn every 5 sec. store iterator number in a variable and all the possible titles in an array. new title to give would be `array[iterator%array.length]` — Mike B, Oct 22 '16 at 08:49

score 4 · Answer 1 · 2016-10-22T09:38:35.370

4

var i=0;
setInterval(function(){
    var titles=['Hi everyone', 'Salut tout le monde', 'Cao svima'];//add more titles if you want
    if(i===titles.length) {
        i=0;
    }
    document.title = titles[i];
    i++;
}, 5000);

edited Oct 22 '16 at 09:38

answered Oct 22 '16 at 08:51

synthet1c · Answer 2 · 2016-10-22T09:01:10.823

The most complicated part of this code is using modulo to get the current iteration based on the length of the titles array.

(ii++ % titles.length)

We are increasing the iterator ii++ then using modulo (division remainder) to figure out the current value of the iterator. This will allow you to use as many titles as you need.

const titles = [
  'Hi I am a title',
  'Hi I am another title',
  'I am also a title'
]

function changeTitles(titles){
  // save an iterator in a closure
  let ii = 0
  // update is run at the start
  return (function update() {
    // change the title
    document.querySelector('title').textContent = titles[(ii++ % titles.length)]
    // queue the function to be called in 5 seconds
    setTimeout(update, 5000)
  })()
}

changeTitles(titles)

Rupesh babu Shrestha · Answer 3 · 2016-10-22T09:59:17.930

<!DOCTYPE html>
<html>
<head>
    <title>hello</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<script>
$(document).ready(function(){
    var titles = ['title1', 'title 2', 'title 3'];

    var timeInterval = 5000; /** interval between each titles **/

    exec();

    setInterval(function(){
        exec();
    }, timeInterval * titles.length);

    function exec(){
        $.each(titles, function(k, v){
            setTimeout(function(){
                $('title').html(v);
            }, timeInterval * (k + 1));
        });
    }

});
</script>
</body>
</html>

score 0 · Answer 4 · edited May 23 '17 at 10:32

You can use something like setInterval(), combined with setting the document.title.

To change the title dynamically, create an array of string messages (see Arrays). Inside the function you'll write for setInterval(), get a random integer everytime it runs. You can use that to index into the array of strings you've made. Set that value to document.title.

Or, here's some quick demo code to get you going:

<html>
    <script type="text/javascript">
        messages = [ "one", "two", "three" ]

        function rotateTitle() {
            index = 0

            setInterval(function() {
                if (messages.length == index) {
                    index = 0
                }

                document.title = messages[index]

                index++
            }, 5000)
        }
    </script>
<body onLoad="rotateTitle()">
</body>
</html>

thankyou Jameson but can yo show be example. I am not very good at DOM but i am learning — Usman Sikander, Oct 22 '16 at 08:50

score 0 · Answer 5 · answered Oct 22 '16 at 08:56

Something like this will work for you.

The Demo on Jsfiddle

The HTML (reload div for looks :P)

<div id="page_title"></div>
<br>
<span id="text-reload">Reload</span>

The JS

// custom jquery plugin loadText()
    $.fn.loadText = function( textArray, interval ) {
        return this.each( function() {
            var obj = $(this);
            obj.fadeOut( 'slow', function() {
                var elem = textArray[0];
                obj.empty().html( elem );
                textArray.shift();
                textArray.push(elem);
                obj.fadeIn( 'fast' );
            });
            timeOut = setTimeout( function(){ obj.loadText( textArray, interval )}, interval );
            $("#text-reload").click( function(){ 
                if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( textArray, interval );} // animation check prevents "too much recursion" error in jQuery 
            });
        });
    };

    $(document).ready(function() {
        var helloArray = ["Hi I am a title", "Hi I am another title", "I am also a title", "more", "and more", "and even more", "aloha", "see ya!"];
        $('#page_title').loadText( helloArray, 5000 ); // ( array, interval )
        document.title = $('#page_title').text();
    });

score 0 · Answer 6 · answered Oct 22 '16 at 08:59

0

try this

<script>
        var titleArray = ["TITLE-1","TITLE-2","TITLE-3","TITLE-4"];
        var N = titleArray.length;
        var i = 0;
        setInterval(func,5000);
        function func(){
            if (i == 4) {
                i = 0;
            }
            document.title = titleArray[i];
            i++;
        }

</script>

answered Oct 22 '16 at 08:59

Rehan Shikkalgar

1,029
8
16

thank you this works just fine but just one problem it takes 5 seconds for the first title to appear until then it is like file///C:User.................... – Usman Sikander Oct 22 '16 at 09:11
1

I just figured it out I simply added TITLE-1 above your script and it worked!!! Thank you rehan may Allah bless you – Usman Sikander Oct 22 '16 at 09:16

can yo make the webpage title change again and again

6 Answers6