rewdy

LeaveNotice jQuery Plugin

LeaveNotice is a plug in to easily notify your users that they are leaving your website. This was developed with “official” type websites in mind (Government, money-processing, etc). Because of the nature of the information those sites house, it can be important to make sure users know that they are being linked to a site not under “official” jurisdiction.

» See Examples | » Download (include docs, examples, and uncompressed and minified versions of the plugin)

A Few Highlights of LeaveNotice

• Easy to install with just a couple steps.
• Easy to style using only CSS.

Installation

To install LeaveNotices on your site, there are 2 steps.

1.) Link to jQuery, the plugin javascript file, and the CSS file.

(Note: In order to keep things easy to customize, all formatting is handled with the CSS file. The only “formatting” option that is handled with javascript, is setting the opacity for the “blackout” div. This can be disabled, too, if you prefer using only css.)

Example:

<script language="javascript" type="text/javascript" src="js/jquery.1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.leaveNotice.min.js"></script>

2.) Initiate the plugin with jQuery with the DOM is ready. This step determines for which links the dialog boxes should show.

At this point, the plugin is not smart enough to determine which links are to an outside domain and which are within your site. I suggest using target="_blank" on your link tags for outside links, then calling the function as shown in the example below to add the functionality to the desired links.

Example:

<script language="javascript" type="text/javascript">
$(function(){
$('a[target=_blank]').leaveNotice();
});
</script>

When calling the .leaveNotice() method, you can specify no options if you like. In the notice that is shown to the users, the site URL will be used instead of a site title (e.g. “You are leaving http://www.somewhere.com” as opposed to, “You are leaving Joe’s Good Website”).

While this is okay, I suggest for a minimal installation, specifying at least a site name. This will be a little bit more clear for those using your site.

Here’s an example of specifying a site name:

<script language="javascript" type="text/javascript">
$(function(){
$('a[target=_blank]').leaveNotice({
siteName: 'My Cool Site'
});
});
</script>

With the siteName option specified, a user would see, “You are leaving My Cool Site…” instead of seeing the URL.

Available Options

Option	Value	Example	Default Value
siteName Name of your site	string	“My Cool Site”	Your page URL
exitMessage message that is shown your visitors to let them know they are leaving	string (HTML)	“<p>You have requested to leave {SITENAME}</p>”	“<p><strong>You have requested a website outside of {SITENAME}.</strong></p> <p>Thank you for visiting.</p>”
preLinkMessage the text that comes before the link	string (HTML)	“<p>Off you go to {URL}!</p>”	“<div class=’setoff’><p>You will now be directed to:<br/>{URL}</p></div> “
timeOut the length of time the dialog is shown before the user is linked to the page they are trying to access	integer (number of milliseconds)	5725	4000 (4 seconds)
overlayId the ID given to the div that acts as a page blackout	string	“cloak”	“ln-blackout”
messageBoxId the ID given to the dialog box div that holds the message shown to users	string	“message”	“ln-messageBox”
messageHolderId the ID given to the div that holds the message box div	string	“bottle”	“ln-messageHolder”
overlayAlpha* the opacity of the blackout div	integer <= 1	0.6	0.3

Styling

All of the styling (except the blackout transparency) is done with the CSS file.

If you are trying to restyle the dialogs, it might be helpful to know the exact HTML markup generated by the plugin. This is what it looks like:

<div id="ln-blackout"></div>
<div id="ln-messageHolder">
<div id="ln-messageBox">
<p><strong>You have requested a website outside of {SITENAME}.</strong></p>
<p>Thank you for visiting.</p>
<div class="setoff">
<p>You will now be directed to:<br><a href="{URL}">{URL}</a></p>
</div>
<p id="ln-cancelMessage"><a href="#close" id="ln-cancelLink">Cancel</a> or press the ESC key.</p>
</div>
</div>

The part of the code that is hilighted in yellow is markup that can be customized in the options. All of the IDs can be set in the options, as well. Other structure is coded. You should be able to adjust almost any details of how the dialogs appear using CSS.

I have commented the CSS file so if you want more information, take a peek at that.

A little note, if you want your dialog to look more graphical, try using a background image to give it a header. This sort style can be seen at whitehouse.gov (Click an external link to see it. There’s on at the very bottom of the page to usa.gov). They place the Whitehouse.gov logo in the top. I think it looks nice, and for an real-life implementation, I would probably use this technique.

Notes

Hooks

For the messages shown to users, alertMessage and preLinkMessage, there is an option to include hooks in your messages. The two hooks available are {SITENAME} and {URL}. {SITENAME} will be replaced with whatever you specify in the siteName option, and {URL} will be replaced with the URL of the link that was clicked.

View the examples to see this in action.

Note About the overlayAlpha Option

For this plugin, I wanted to keep all the styling and behavior separate. In thinking about it, though, with the inconsistencies in CSS support in different browsers (specifically the lack of support for setting alpha in an easy way for everyone), I thought it would be much easier for now to let javascript do it.

Right now, the opacity of the blackout div is set, then, with javascript. This can be disabled, though, by setting the opacityAlpha option to false. In the future, I might change the default setting to false and let the implementers set it to be on if they want it, but for now this is easier.

UPDATE: I just found another jQuery Plugin called jQuery urlInternal. This plug in finds if links are internal or external and allows you to manipulate them. Using that plug in along with this one could be a dynamic duo. Take a peek at it if you want.

If you have thoughts on this, I’d be interested to hear what you think. (You can let me know at my website).