forked from rewdy/leaveNotice
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
196 lines (194 loc) · 12.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LeaveNotice jQuery Plugin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.leaveNotice.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('a[target=_blank]').leaveNotice({siteName:'LeaveNotice jQuery Plugin'});
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.leaveNotice.css" />
<link rel="stylesheet" type="text/css" href="leaveNoticeDocs.css" />
</head>
<body>
<div id="header">
<h1>LeaveNotice jQuery Plugin v 1.1.3</h1>
</div>
<div id="nav">
<p><a href="example.html">Examples</a></p>
<hr/>
<p><a href="http://rewdy.com/projects/view/leavenotice/">LeaveNotice Plugin Page</a></p>
<p><a href="http://www.jquery.com">jQuery</a></p>
</div>
<div id="main">
<p><strong>LeaveNotice</strong> 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.</p>
<p><a href="example.html">See Examples</a></p>
<h2>Features of LeaveNotice</h2>
<ul>
<li>Easy to install with just a couple steps.</li>
<li>Easy to style using only CSS.</li>
</ul>
<h2>Changelog</h2>
<h3>Version 1.1.3</h3>
<ul>
<li>Added an option to open links in a new window through the dialog. This behavior was possible before through the <code>linkString</code> option, but I have made it more easily available now through a new option called <code>newWindow</code>. Note: The experience this creates <a href="http://www.nngroup.com/articles/the-top-ten-web-design-mistakes-of-1999/">is</a> <a href="http://www.nngroup.com/articles/top-10-mistakes-web-design/">not</a> <a href="http://www.currybet.net/cbet_blog/2012/08/never-open-external-links-in-new-windows.php">ideal</a> (it breaks the back button), but I've had enough requests that I've added it.</li>
</ul>
<h3>Version 1.1.2</h3>
<ul>
<li>Fixed issue that was caused by a change made in version 1.6 of jQuery that was causing the link titles to be displayed as 'undefined'.</li>
</ul>
<h3>Version 1.1.1</h3>
<ul>
<li>There is now the ability to set the <code>timeOut</code> option to 0, and thus keep leaveNotice from automatically forwarding the user. When <code>timeOut</code> is set to 0, the user will have to click the link from the leaveNotice dialog in order to advance to the linked page.</li>
<li>There is a new option that can now be set that is called <code>linkString</code>. 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.</li>
<li>LeaveNotice now works when jQuery is running in noConflict() mode. </li>
<li>In 1.1.1, on page unload, the modal is killed so that users who return to the website via their browser back button will not see the leave notice as they return.</li>
</ul>
<h2>Installation</h2>
<p>To install LeaveNotices on your site, there are 2 steps.</p>
<p>1.) Link to jQuery, the plugin javascript file, and the CSS file.</p>
<p><em>(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.)</em></p>
<p>Example:</p>
<code class="block"><script language="javascript" type="text/javascript" src="<strong>js/jquery.1.3.2.min.js</strong>"></script>
<script language="javascript" type="text/javascript" src="<strong>js/jquery.leaveNotice.min.js</strong>"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.leaveNotice.css" /></code>
<p>2.) Initiate the plugin with jQuery with the <a href="http://docs.jquery.com/Events/ready" target="_blank">DOM is ready</a>.</p>
<p>Example:</p>
<code class="block"><script language="javascript" type="text/javascript">
$(function(){
$('a[rel=external]').leaveNotice();
});
</script></code>
<p>When calling the <code>.leaveNotice()</code> 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").</p>
<p>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.</p>
<p>Here's an example of specifying a site name:</p>
<code class="block"><script language="javascript" type="text/javascript">
$(function(){
$('a[rel=external]').leaveNotice({
siteName: 'My Cool Site'
});
});
</script></code>
<p>With the <code>siteName</code> option specified, a user would see, "You are leaving My Cool Site..." instead of seeing the URL.</p>
<p><a href="#general_implementation">Other general implementation suggestions</a></p>
<h2>Available Options</h2>
<table border="0" cellspacing="0" cellpadding="0" class="data">
<tr>
<th scope="col">Option</th>
<th scope="col">Value</th>
<th scope="col">Example</th>
<th scope="col">Default Value</th>
</tr>
<tr>
<td><p><code>siteName</code></p>
<p>Name of your site</p></td>
<td><em>string</em></td>
<td>"My Cool Site"</td>
<td>Your page URL</td>
</tr>
<tr>
<td><p><code>exitMessage</code></p>
<p>message that is shown your visitors to let them know they are leaving</p></td>
<td><em>string (HTML)</em></td>
<td><p>"<p>You have requested to leave {<a href="#hooks" title="This is a hook. Click for info.">SITENAME</a>}</p>"</p> </td>
<td>"<p><strong>You have requested a website outside of {<a href="#hooks" title="This is a hook. Click for info.">SITENAME</a>}.</strong></p> <p>Thank you for visiting.</p>"</td>
</tr>
<tr>
<td><p><code>preLinkMessage</code></p>
<p>the text that comes before the link</p></td>
<td><em>string (HTML)</em></td>
<td>"<p>Off you go to {<a href="#hooks" title="This is a hook. Click for info.">URL</a>}!</p>"</td>
<td>"<div class='setoff'><p>You will now be directed to:<br/>{URL}</p></div>
"</td>
</tr>
<tr>
<td><p><code>newWindow</code></p>
<p>Allows the link in the dialog to open in a new window.<br/>
<strong>Note:</strong> This setting automatically sets <code>timeOut</code> to 0 since popup blockes block windows opened automatically by JavaScript.</p></td>
<td><em>boolean</em></td>
<td>true</td>
<td>false</td>
</tr>
<tr>
<td><p><code>linkString</code></p>
<p>A simple string that is added to the outgoing link.</p></td>
<td><em>string</em></td>
<td>"class='bold-style'"</td>
<td>"" / <empty></td>
</tr>
<tr>
<td><p><code>timeOut</code></p>
<p>The length of time the dialog is shown before the user is linked to the page they are trying to access.</p>
<p>Setting to "0" will disable the auto redirect and make it so the user has to explicitly click the link.</p></td>
<td><em>integer (number of milliseconds)</em></td>
<td>5725</td>
<td>4000 <em>(4 seconds)</em></td>
</tr>
<tr>
<td><p><code>overlayId</code></p>
<p>the ID given to the div that acts as a page blackout</p></td>
<td><em>string</em></td>
<td>"cloak"</td>
<td>"ln-blackout"</td>
</tr>
<tr>
<td><p><code>messageBoxId</code></p>
<p>the ID given to the dialog box div that holds the message shown to users</p></td>
<td><em>string</em></td>
<td>"message"</td>
<td>"ln-messageBox"</td>
</tr>
<tr>
<td><p><code>messageHolderId</code></p>
<p>the ID given to the div that holds the message box div</p></td>
<td><em>string</em></td>
<td>"bottle"</td>
<td>"ln-messageHolder"</td>
</tr>
<tr>
<td><p><code>overlayAlpha</code><a href="#overlayAlphaNote">*</a></p>
<p>the opacity of the blackout div</p></td>
<td><em>integer <= 1</em></td>
<td>0.6</td>
<td>0.3</td>
</tr>
</table>
<h2>Styling</h2>
<p>All of the styling (<a href="#overlayAlphaNote">except the blackout transparency</a>) is done with the CSS file.</p>
<p>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:</p>
<code class="block"><div id="ln-blackout"></div>
<div id="ln-messageHolder">
<div id="ln-messageBox">
<span class="hilight"><p><strong>You have requested a website outside of {SITENAME}.</strong></p></span>
<span class="hilight"><p>Thank you for visiting.</p></span>
<span class="hilight"><div class="setoff"></span>
<span class="hilight"><p>You will now be directed to:<br><a href="{URL}">{URL}</a></p></span>
<span class="hilight"></div></span>
<p id="ln-cancelMessage"><a href="#close" id="ln-cancelLink">Cancel</a> or press the ESC key.</p>
</div>
</div></code>
<p>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.</p>
<p>I have commented the CSS file so if you want more information, take a peek at that.</p>
<p><em>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 <a href="http://www.whitehouse.gov">whitehouse.gov</a> (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.</em></p>
<h2>Notes/Common Questions</h2>
<h3><a name="hooks"></a>Hooks</h3>
<p>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.</p>
<p>View the <a href="example.html">examples</a> to see this in action.</p>
<hr/>
<h3><a name="general_implementation" id="general_implementation"></a>General Implementation Suggestions</h3>
<p>In the example, you will see I used for a selector <code>$("a[rel=external]")</code>. This will target links that have the rel attribute set to "external".</p>
<p>Previously, in my examples, I used for the selector <code>$("a[target=_blank]")</code>, 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, <a href="http://iamdanielmarino.com/">Daniel</a>)</p>
<p>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.</p>
<p><strong>Bonus</strong>: There is another plugin called utlInternal that might be of interest for those of you wanting to select all outgoing links: <a href="http://benalman.com/projects/jquery-urlinternal-plugin/">jQuery urlInternal</a></p>
<hr />
<h3><a name="overlayAlphaNote"></a>Note About the overlayAlpha Option</h3>
<p>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.</p>
<p>Right now, the opacity of the blackout div is set, then, with javascript. <strong>This can be disabled</strong>, though, by setting the <code>opacityAlpha</code> option to <strong>false</strong>. 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.</p>
<p><em>If you have thoughts on this, I'd be interested to hear what you think. (You can let me know at <a href="http://www.rewdy.com">my website</a>).</em></p>
<p><a href="#">Top</a></p>
</div>
</body>
</html>