Tab Title For web page change

How to Change the Tab Title For Web Pages for better usability

The tabs at the top of your browser indicates what the content lies below, it’s an indicator to help you navigate them easier, but sometimes us web designers in our titles, we like to use the company name which isn’t always an indication of what the page contains or describes the content below…..so how do we fix it!!!!

 

 

EASY…

Just use the Page Visibilty API

In your footer scripts put this code

<script>
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}

// If the page is hidden, change the title;
// if the page is shown, change the title again!
function handleVisibilityChange() {
    if (document[hidden]) {

        // Write here what you wish the Tab to change to when the page is hidden
        document.title = "COME BACK !";

    } else {

        //Write here what you wish the Tab to be when it is in view and active
       document.title = "Gecko Grafix"; } }
 document.addEventListener("visibilitychange", handleVisibilityChange, false); 
</script> 

I hope this helps, its just a small snippets but sometimes it’s the small things in life that matter

If you would like any help with this then just….

Get in Touch