-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathindex.html
executable file
·163 lines (124 loc) · 6.09 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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Widow Fix - Matthew Lein</title>
<meta name="description" content="Widow Fix is a jQuery plugin to fix widows, or orphans, or whatever you call them—those single words on their own line. It's super lite easy to use!">
<script src="js/jquery-1.4.3.min.js"></script>
<script src="../js/addEmail.js"></script>
<script src="js/jquery.widowFix-1.3.2.min.js" charset="utf-8"></script>
<link href="../css/experiments.css" rel="stylesheet" type="text/css">
<style type="text/css">
blockquote {
width: 650px;
margin-top: -15px;
}
#wfDemo {
width: 400px;
margin-top: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 10px;
border: 1px solid #666;
}
#wfDemo h4 {
font-size: 30px;
margin-top: 0px;
margin-bottom: 4px;
}
#wfDemo p {
font-size: 12px;
margin-bottom: 5px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
}
#downloadWF {
display: inline-block;
background-color: #6B96A4;
font-size: 15px;
color: #FFF;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-top: 11px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
font-weight: bold;
position: relative;
}
#downloadWF:active {
top: 1px;
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.4);
box-shadow: 1px 1px 0px rgba(0,0,0,0.4);
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#demoFix').attr('disabled',false)
.click(function(){
$('#wfDemo h4').widowFix();
$(this).attr('disabled',true);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<!--#include virtual="/inc/experiment-header.html" -->
<h2>jQuery Widow Fix</h2>
<p>Widow Fix is a jQuery plugin to fix widows, or orphans, or whatever you call them—those single words on their own line. It does this by adding a &nbsp; (non-breaking space) in between the last 2 words. It's super lite and easy to use!</p>
<a href="https://github.com/matthewlein/jQuery-widowFix" id="downloadWF" target="_blank">Download WidowFix on Github</a>
<h3>Demo</h3>
<input type="button" name="demoFix" id="demoFix" value="Apply WidowFix">
<div id="wfDemo">
<h4>What a terrible place to break</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend diam non orci pellentesque sit amet scelerisque eros interdum. sInteger at sodales leo. Maecenas non felis nibh urna augue. Integer in urna ut erat ultricies rutrum. Cras eleifend metus laoreet lacus accumsan elementum augue aliquet orci diam. </p>
</div>
<h3>How to Use</h3>
<p>Attach jQuery:</p>
<blockquote>
<p><script type="text/javascript" src="path/to/jquery-1.4.2.min.js"></script></p>
</blockquote>
<p>Attach Widow Fix plugin:</p>
<blockquote>
<p><script type="text/javascript" src="path/to/jquery.widowFix-1.3.min.js"></script></p>
</blockquote>
<p>Call the widowFix method with your selector:</p>
<blockquote>
<p>$(document).ready(function() {<br>
//all heading 1s<br>
<strong>$('h1').widowFix();</strong><br>
//or specific h1s<br>
<strong>$('#mainColumn h1').widowFix();</strong></p>
<p>});</p>
</blockquote>
<p>That's it! That will fix the widows.</p>
<p>Considering this is a client-side solution, I don't recommend using the fix on every element, like <code>$('p,h1,h2,h3,h4,h5,h6').widowFix();</code> because that will slow down the page (every ms counts). It will work, but I don't recommend it. Also, since it's a very small script, it would probably be best added into your main javascript file to reduce the number of http requests.</p>
<h3>Options</h3>
<p>There are just 3 options, and you use them in this format:</p>
<blockquote>
<p>$('h1').widowFix(<strong>{<br>
letterLimit: 10,<br>
prevLimit: 5,<br>
linkFix: true <br>
}</strong>)</p>
</blockquote>
<p><code>letterLimit</code> will set the number of letters that you think still counts as a widow/orphan. Some people think that long words look fine by themselves and shouldn't be Widow Fixed. So if you think words of 10+ letters look fine, set the limit to 10 and it will ignore those words. Any words shorter than 10 characters will still be fixed. The default is to fix all words regardless of characters.</p>
<p><code>prevLimit</code> will set the ignore amount for the previous (second to last) word. If you don't want to fix widows/orphans when the second to last word is shorter than 5 letters, set <code>prevLimit: 5</code> and it will skip those widows. The default is to fix all words regardless of the previous word length.</p>
<p>If the last word in your element is a link, then it will replace the space between <code><a href></code>, giving you <code><a&nbsp;href>.</code>The option <code>linkFix:true</code> will maintain your link and replace the proper space. Only add this option if this is a contant problem, as it will slightly slow down the script.</p>
<h3>About the Plugin</h3>
<p>This plugin is dual licensed under the MIT and GPL licenses. It is partly based on <a href="http://www.learningjquery.com/2008/07/three-quick-ways-to-avoid-widows" target="_blank">Karl Swedberg's post</a> on widows. I reworked it a bit, added trailing space removal, letter counting, and the link fix. Feel free to use it in any projects, but please email me if you're using it. I love to know where my projects are living. </p>
<!--#include virtual="/inc/experiment-comments.html" -->
<!--#include virtual="/inc/footer.html" -->
</div>
</div>
</body>
</html>