How to change page title and icon on Page leave with jQuery

To get back the user attention back to your site you can animate the site page title and icon when the user leaves your site or open an another tab.

In this tutorial, I am using two jQuery plugins – iMissYou and mFancyTitle for customization.

I will also show how you can do this with just jQuery.

How to change page title and icon on Page leave with jQuery


Contents

  1. I Miss You
  2. mFancyTitle
  3. Without plugin
  4. Conclusion

 

1. I Miss You

A light jQuery plugin which simply changes your web page title and icon when the user is not viewing your site.

Download & include

  • Download plugin from GitHub.
  • Include scripts.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="I-Miss-You-master/jquery.iMissYou.js"></script>

Initialize

Call iMissYou() method and define title and favicon option.

  • title – Enter your title which you want to show when site tab is inactive.
  • favicon – This has two more options enabled and src. Set your icon in src and set enabled: true to also change the icon in the inactive state.
jQuery(document).ready(function($){
 $.iMissYou({
  title: "I Miss you !",
  favicon: {
   enabled: true,
   src:'I-Miss-You-master/iMissYouFavicon.ico'
  }
 });
});

 

2. mFancyTitle

mFancyTitle is another jQuery plugin which does same work as iMissYou but it is more customizable e.g. Blinking the page title and icons, set marquee on the title, alter icons according to the state, etc.

This is also a light jQuery plugin which you can download from their Official website.

Include

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="jquery.mfancytitle-0.4.1.min.js"></script>

Initialize

Call mFancyTitle() method within it specify the following options –

  • mftMissYou – This takes boolean (true or false) value. If it set to false then the web page title and icon wouldn’t change when the user leaves the site.
  • mftMissYouTitle – Specify your new page title and if you don’t want to modify the title then don’t define this option or leave it blank.
  • mftMissYouFavicon – Specify you icons.

Example

jQuery(document).ready(function($){
 $.mFancyTitle({
  mftMissYou: true,
  mftMissYouTitle: 'Hey! I miss you!', // new document title: it will appear when the user leaves your page and open another tab in the browser
  mftMissYouFavicon: {
   'apple-touch-icon-precomposed': 'sitelogo-180x180.png',
   'icon': 'sitelogo-32x32.png',
   'shortcut icon': 'sitelogo-32x32.png'
  } // new favicons: they will be visible when the user leaves your page and open another tab in the browser
 });
});

Blink title

Specify mftTitleBlink option which takes Array of boolean values [false,true].

  • The Array first index position denotes active state of site tab and
  • another index position denotes inactive state.

Set it to true to blink the title on a state (active/inactive).

Add marquee to title

Specify mftTitleMarquee option which also takes Array of boolean values [false,true].

  • The Array first index position denotes active state of site tab and
  • another index position denotes inactive state.

Set it to true to add marquee in the title on a state (active/inactive).

Example

jQuery(document).ready(function($){
 $.mFancyTitle({
  mftTitleBlink: [false, true],
  mftTitleMarquee: [false, true], // document title will NOT scroll in visible state but it will scroll in hidden state
 });
});

 

3. Without plugin

I am altering the title element and link icon attribute with jQuery.

Detect tab change

For detecting the active/inactive state of a tab I bind focus and blur event on the window.

// Get current title and icon
var title = $('title').text();
var favicon = $('link[rel=icon]').attr('href');
var newtitle = 'New page title';

// Active
window.addEventListener('focus', resetTitleicon);

// Inactive
window.addEventListener('blur', changeTitleicon);

Change Icon & title

When the blur event trigger change the title and icon of the web page.

// Change page title and icon
function changeTitleicon(){

 $("title").text( newtitle ); 
 $('link[rel=icon]').attr('href', 'i-Miss-You-master/favicon.ico');
 
}

And on focus rest the web page title and icon.

// Reset the page title and icon
function resetTitleicon(){
 $('title').text(title);
 $('link[rel=icon]').attr('href', favicon);
}

Completed Code

// Get current title and icon
var title = $('title').text();
var favicon = $('link[rel=icon]').attr('href');
var newtitle = 'Hey! I miss you!';

// Active
window.addEventListener('focus', resetTitleicon);

// Inactive
window.addEventListener('blur', changeTitleicon);

// Change page title and icon
function changeTitleicon(){
 $("title").text(newtitle); 
 $('link[rel=icon]').attr('href', 'i-Miss-You-master/favicon.ico');
}

// Reset the page title and icon
function resetTitleicon(){
 $('title').text(title);
 $('link[rel=icon]').attr('href', favicon);
}

 

4. Conclusion

The above-specified plugins change you site icon and title text when the user not viewing your website. You can also simply do this with jQuery only.

For more customization, you can use with mFancyTitle jQuery plugin which has more options than iMissYou plugin.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *