Warning: This website by nature is experimental, please upgrade your browser or you will be punished.

tblank for jQuery

How links are treated on websites is usually dictated by the nature of the link (e.g. external links are traditionally opened in a new window) This can often cause confusion for users as they are suddenly faced with a new tab containing unfamiliar content. We wanted to try and improve this process, and so came about ‘tBlank’.

The tBlank plugin is essentially very simple. When a user clicks on a link, a quick check is done to determine whether it’s an internal or external link. If it’s an external link a popup is then shown giving information about the link itself and also the option to either open the link in a new window, or the one they’re currently in. Their decision is then saved in a cookie and remembered throughout the rest of the website.

Take a look to the right for examples and below for instructions to get this working on your next project!

Instructions:

.01 Link it up

Add this HTML to your web page in the header

Show HTML

<link rel="stylesheet" type="text/css" href="engage.tblank.css" />
<script type="text/javascript" src="engage.tblank-min.js"></script>

.02 Well, that's it really...

The HTML and CSS for the popup is extremely generic so any styling you've applied to your website already should make the popup fit in quite nicely. That said, we love imagination, so make it look as awesome as you want!

There are a few options for the javascript though if you're feeling like you need some more control. See the next step for more information.

.03 Set your options

We've built in a few options for you to customise the plugin. If you want to take it further you'll have to delve into the javascript. These should be fine for most people though! If you open up engage.tblank.js (or the minified version) right at the top the plugin is activated. Place your options here.

internal:Add this class to a link and it will always open in the same window. Default is internal.
external:Add this class to a link and it will always open in a new window. Default is external.
cookie:Use a cookie to store the decision. Default is true
cookieName:What brand is your cookie? Give it a name. Default is engage.tblank.
useBy:The cookies use by date. Default is 365.
popupText:This is simple HTML that you can customise to explain what's happening! See the js for the default.
onOpen: This callback fires just before the popup opens.
onSame: This is called when the user chooses to open in the same window.
onNew: This one fires when they choose a new window.
onCancel: And if they cancel this one is called.
devMode: Set this to true if you want to enable a couple of buttons that allow you to delete the cookie. For testing purposes.

Take a look at the code below for an example of how to use the options.

Show Javascript

$('body').tblank({
	internal:	'samewindow',
	cookie:		true,
	cookieName:	'windowOptions',
	onOpen:		function(){
		alert('opened!');
	},
	devMode:	true
});

Show cookie Delete cookie

Remeber to delete the cookie or you'll only see the popup once!