rewdy

Making the world a better place to see

LeaveNotice jQuery Plugin

NOW VERSION 1.1! SEE THE UPDATES BELOW.

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

Features of LeaveNotice

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

New Stuff in Version 1.1

  • There is now the ability to set the timeOut option to 0, and thus keep leaveNotice from automatically forwarding the user. When timeOut is set to 0, the user will have to click the link from the leaveNotice dialog in order to advance to the linked page.
  • There is a new option that can now be set that is called linkString. This is just a string that gets added to the outgoing link. The purpose of this property is it allows for adding a class or other property to the outgoing link.
  • LeaveNotice now works when jQuery is running in noConflict() mode.

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>
<link rel="stylesheet" type="text/css" href="css/jquery.leaveNotice.css" />

2.) Initiate the plugin with jQuery with the DOM is ready.

Example:

<script language="javascript" type="text/javascript">
$(function(){
$('a[rel=external]').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[rel=external]').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.

Other general implementation suggestions

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>
“
linkString

A simple string that is added to the outgoing link.

 string “class=’bold-style’” “” / <empty>
timeOut

The length of time the dialog is shown before the user is linked to the page they are trying to access.

Setting to “0″ will disable the auto redirect and make it so the user has to explicitly click the link.

 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/Common Questions

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.

General Implementation Suggestions

In the example, you will see I used for a selector $("a[rel=external]"). This will target links that have the rel attribute set to “external”.

Previously, in my examples, I used for the selector $("a[target=_blank]"), which might be a more universally applicable implementation, but it was pointed out to me that target=”_blank” is invalid in xhtml strict and maybe also in other versions so I have changed in order to comply with those standards. (Thanks, Daniel)

In your specific implementation, you may choose to use target=_blank or a different, more suitable selector based on how your site is built, but that is, of course, up to you.

Bonus: There is another plugin called utlInternal that might be of interest for those of you wanting to select all outgoing links: jQuery urlInternal

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.

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