mFancyTitle

the jQuery plugin that animates your document <title> & favicon!

by musings.it

Why?

Bored to see always the same title in your browser tabs?

Your document title is too long to be correctly displayed?

Want to have some extra-fancy effect to regain users' attention when they leave your page and open another tab in the browser?


mFancyTitle is for you!

mFancyTitle is the jQuery plugin that lets you animate your document <title> & favicon easily with style.

Download mFancyTitle

Version log

How to use it

Files to include

You will have to include jQuery library and mFancyTitle file. I suggest that you include them at the end of your <head> section.

<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.mFancyTitle-0.4.1.min.js"></script>

mFancyTitle initialization

Here's the code for a basic initialization that only changes your document <title> and favicon(s) on document visibility change.

$.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': 'path-to/apple-touch-icon-152x152.png',
		'icon': 'path-to/favicon-32x32.png',
		'shortcut icon': 'path-to/favicon.ico'
	} // new favicons: they will be visible when the user leaves your page and open another tab in the browser
});

Configurable parameters

1. "miss you" parameters

mftMissYou (boolean)

Boolean that defines if <title> and favicon(s) have to be changed when the user leaves your page to open a new tab in the browser.

Accepted values: true, false.
Default value: true. How to set:

$.mFancyTitle({
	mftMissYou: true, // document title and favicon(s) will change when the user leaves your page and open another tab in the browser
});

mftMissYouTitle (string)

It is the string that substitutes your original document <title> when the user leaves your page to open a new tab in the browser, if mftMissYou is set to true.
Default: "Hey! I miss you!". If not set and mftMissYou is set to true uses default value. How to set:

$.mFancyTitle({
	mftMissYouTitle: 'Come back to my page!', // new document title: it will appear when the user leaves your page and open another tab in the browser
});

Example:

Miss you title

mftMissYouFavicon (js Object)

It is the js Object with the files that substitute your original document favicon(s) when the user leaves your page to open a new tab in the browser. The new files will substitute those normally set in the <head> section of your page like this: 

<link rel="apple-touch-icon-precomposed" sizes="152x152" href="path-to/apple-touch-icon-152x152.png"> // General use iOS/Android icon, auto-downscaled by devices
<link rel="icon" type="image/png" href="path-to/favicon-32x32.png" sizes="32x32"> // Icon for any desktop browser except IE
<link rel="shortcut icon" href="path-to/favicon.ico"> // Default required by IE. Chrome and Safari may pick ico over png

Default: {'apple-touch-icon-precomposed': '','icon': '','shortcut icon': ''}. If not set and mftMissYou is set to true uses default value. How to set:

$.mFancyTitle({
	mftMissYouFavicon: {
		'apple-touch-icon-precomposed': 'path-to/apple-touch-icon-152x152.png',
		'icon': 'path-to/favicon-32x32.png',
		'shortcut icon': 'path-to/favicon.ico'
	} // new favicons: will substitute your original favicons when the user leaves your page and open another tab in the browser
});

Example:

Miss you favicon

2. Animation parameters

mftTitleBlink (array of booleans)

Array of booleans that defines if <title> has to blink in visible and hidden state respectively. If both mftTitleMarquee and mftTitleBlink (see next) are set to true, mftTitleMarquee will prevail.

Accepted values: true, false for each array value. Short notation as string for both values (ex. true) is accepted.
Default value: [false, false]. How to set: 

$.mFancyTitle({
	mftTitleBlink: [true, false] // document title will blink in visible state and NOT in hidden state
});

mftTitleBlinkInterval (array of integers)

Array of integers that defines the blinking interval (in msec) in visible and hidden state respectively.

Accepted values: integer numbers for each array value. Short notation as number for both values (ex. 1000) is accepted.
Default value: [1000, 1000]. How to set: 

$.mFancyTitle({
	mftTitleBlinkInterval: [500, 1000] // document title will blink every 500 msec in visible state and every 1 sec in hidden state
});

mftTitleAltText (array of strings)

Array of strings that contains the alternate text to show if mftTitleBlink is true in visible and hidden state respectively.

Accepted values: strings for each array value. Short notation as string for both values (ex. 'blinking text') is accepted.
Default value: ['', '']. How to set: 

$.mFancyTitle({
	mftTitleAltText: ['blinking text visible', ''] // document title will have an alternative text in visible state and no text in hidden state (real blinking)
});

Example for visible state:

title blink

mftFaviconBlink (array of booleans)

Array of booleans that defines if the favicon(s) have to blink in visible and hidden state respectively.

Accepted values: true, false for each array value. Short notation as string for both values (ex. true) is accepted.
Default value: [false, false]. How to set: 

$.mFancyTitle({
	mftFaviconBlink: [true, false] // favicon will blink in visible state and NOT in hidden state
});

mftFaviconBlinkInterval (array of integers)

Array of integers that defines the blinking interval (in msec) in visible and hidden state respectively.

Accepted values: integer numbers for each array value. Short notation as number for both values (ex. 1000) is accepted.
Default value: [1000, 1000]. How to set: 

$.mFancyTitle({
	mftFaviconBlinkInterval: [500, 1000] // document favicon will blink every 500 msec in visible state and every 1 sec in hidden state
});

mftFaviconAltIcon (js Object of Objects)

Object of js Objects that contains the alternate icons to be shown if mftFaviconBlink is true in visible and hidden state respectively.

Accepted values: js Object for each array value.
Default value: { 'visible': {'apple-touch-icon-precomposed': '','icon': '','shortcut icon': ''}, 'hidden': {'apple-touch-icon-precomposed': '','icon': '','shortcut icon': ''} }. How to set: 

$.mFancyTitle({
	mftFaviconAltIcon: {
		'visible': {
			'apple-touch-icon-precomposed': 'path-to/apple-touch-icon-152x152.png', // path to alternative icon(s) for visible state
			'icon': 'path-to/favicon-32x32.png',
			'shortcut icon': 'path-to/favicon.ico'
		},
		'hidden': {
			'apple-touch-icon-precomposed': '', // path to alternative icon(s) for hidden state
			'icon': '', // if left blank there will be no alternative icon (real blinking)
			'shortcut icon': ''
		}
	}
});

Example for visible state:

favicon blink

mftTitleMarquee (array of booleans)

Array of booleans that defines if <title> has scroll as if in a <marquee> element in visible and hidden state respectively. If both mftTitleMarquee and mftTitleBlink are set to true, mftTitleMarquee will prevail.

Accepted values: true, false for each array value. Short notation as string for both values (ex. true) is accepted.
Default value: [false, false]. How to set: 

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

mftTitleMarqueeDir (array of strings)

Array of strings that defines in which direction the <title> text has to scroll if mftTitleMarquee is true in visible and hidden state respectively.

Accepted values: strings for each array value. Short notation as string for both values (ex. 'right') is accepted.
Default value: ['left', 'left']. How to set: 

$.mFancyTitle({
	mftTitleMarqueeDir: ['right', 'left'] // document title will scroll right in visible state and left in hidden state
});

mftTitleMarqueeDelay (array of integers)

Array of integers that defines the <title> text scrolling delay (in msec) after every movement in visible and hidden state respectively.

Accepted values: integer numbers for each array value. Short notation as number for both values (ex. 300) is accepted.
Default value: [200, 1000]. How to set: 

$.mFancyTitle({
	mftTitleMarqueeDelay: [500, 1000] // the document title will wait 500 msec after every movement in visible state and 1 sec in hidden state
});

Example for visible state:

title marquee

Help & contacts

Please feel free to contact us if you have questions about mFancyTitle or if you would like to talk about your next web project with us!

We are available for freelance work :-)

Share the love!

Did you like mFancyTitle? We are happy to hear it :-)

Please take one moment to share it on social media and consider offering us a coffee! It will help us to maintain and enhance the code and to keep mFancyTitle free for all. Thank you!



Are you interested in other plugins by musings.it?

Check them out here!

Notes

Note on favicons

As I discovered during the development of mFancyTitle, the favicon world is various and complex. I wanted mFancyTitle to be quite general and useful in most of the typical environments, thus at this moment it takes into consideration (and applies to) only the favicons linked in these three tags: 

<link rel="apple-touch-icon-precomposed" sizes="152x152" href="path-to/apple-touch-icon-152x152.png"> // General use iOS/Android icon, auto-downscaled by devices
<link rel="icon" type="image/png" href="path-to/favicon-32x32.png" sizes="32x32"> // Icon for any desktop browser except IE
<link rel="shortcut icon" href="path-to/favicon.ico"> // Default required by IE. Chrome and Safari may pick ico over png

You can read and learn more about the favicon world in the suggested resources at the end of this page in the section "Useful information about the favicon world".

Useful information about the favicon world

I've learnt a lot about favicons and their fancy world from these resources:

Note on setting intervals

Intervals in hidden state can be somewhat "slower" than set (or than expected) because browsers "freeze" the content in tabs that are not in focus. Please beware of this when intervals for hidden state animations. The same applies for marquee animation delay that has to be slowed down in hidden state.

You can find more infos about this here:

mFancyTitle was developed using the old setInterval function because using the new requestAnimationFrame function some browsers (Chrome and Opera for instance) did not start animations in hidden state. But we developed also a mFancyTitle version using requestAnimationFrame if you are interested just drop us an email!

Credits

Thank you to Bahlaouane Hamza for his "I Miss You" jQuery plugin that gave us the inspiration to write mFancyTitle.