-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch-term-highlighter.html
227 lines (224 loc) · 21.3 KB
/
search-term-highlighter.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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>
<head>
<title>Search Highlighter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
body {
margin-top: 80px;
}
#toolbar {
position: fixed;
bottom: 0px;
background-color: #fff;
width: 100%;
height: 20px;
}
.highlight1 {
color: red;
}
</style>
</head>
<body>
<div id="top">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Search Highlighter</a>
</div>
</div>
</nav>
</div>
<div id="main">
<div class="container">
<div id="toolbar">
</div>
<div id="maincontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec sagittis nunc. Maecenas sed eros dapibus,
suscipit nisl a, congue metus. Nunc quis mi eu magna condimentum efficitur. Mauris viverra
<span class="highlight1">turpis</span> vitae mi finibus, a euismod mi posuere. Aliquam hendrerit orci lacinia ipsum bibendum, nec
rhoncus magna mollis. Pellentesque cursus dapibus erat ut pellentesque. Sed eu nulla eget metus iaculis elementum
eu in tellus. In ut ex gravida, aliquam justo eget, interdum
<span class="highlight1">turpis</span>. Nunc ac enim sapien. Morbi blandit, ex eu suscipit viverra, magna quam posuere lorem, nec
faucibus justo dolor non justo. Aenean faucibus dui
<span class="highlight1">turpis</span>. Sed lorem leo, vestibulum in lorem sit amet, aliquet pretium metus. Vestibulum orci quam,
ornare consectetur mauris et, auctor fermentum felis. Sed convallis placerat consequat. Aenean ut accumsan
est. Nulla molestie vel neque sed porttitor. Pellentesque vel luctus mauris. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper lacinia enim, vitae maximus elit
viverra sed. Proin in ultricies nulla. Maecenas gravida
<span class="highlight1">turpis</span> sollicitudin fermentum euismod. Nulla eget ipsum id ex hendrerit tristique vitae vel lacus.
Nulla dapibus tortor sit amet est malesuada, ut feugiat dui faucibus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec porta ligula sed feugiat consequat. Duis consectetur felis purus, a ultricies nibh
volutpat id. Curabitur libero nulla, luctus vitae semper vitae, iaculis ornare nisl. Quisque faucibus, neque
quis mollis gravida, est quam commodo tellus, eget volutpat nibh arcu quis ligula. Nunc dignissim, justo
eu interdum pulvinar, augue enim suscipit erat, quis tincidunt mauris nibh auctor nisl. Praesent rhoncus
placerat blandit. Fusce id sem et ante volutpat fringilla id eget dolor. Aliquam enim purus, laoreet sed
pharetra ac, faucibus non libero. Sed placerat nulla vitae congue facilisis. Etiam purus magna, iaculis vel
nunc non, blandit efficitur sem. In luctus ac sapien a tincidunt. Proin cursus mi at commodo aliquam. In
nec erat rutrum, commodo mi a, facilisis libero. Donec congue, mauris quis eleifend commodo, erat lorem malesuada
<span class="highlight1">turpis</span>, et ornare
<span class="highlight1">turpis</span> nulla ac mauris. Nulla congue metus vel neque volutpat, quis varius lacus hendrerit. Morbi
eleifend quis nunc eu semper. Ut ornare nisl elit, vitae vehicula eros consectetur id. Maecenas ultrices,
<span class="highlight1">turpis</span> quis tempus sollicitudin, est sapien venenatis nisl, et suscipit ligula ipsum ac eros. Suspendisse
bibendum nulla ut aliquet finibus. Nullam in congue
<span class="highlight1">turpis</span>. Etiam lacinia odio diam. Nam tristique ligula sit amet nisi consectetur, eu hendrerit purus
placerat. Phasellus neque magna, varius consequat libero quis, tempor ullamcorper nisl. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin aliquet neque non efficitur tincidunt. Pellentesque porttitor hendrerit finibus. Pellentesque
dapibus, neque nec hendrerit placerat, est ligula accumsan ante, quis semper nunc leo vel nunc. Donec nec
tincidunt nisi. Curabitur velit sem, tempor et lectus egestas, elementum tempus arcu. Nam suscipit magna
eu dui sodales suscipit. Ut tempor malesuada tellus id blandit. Maecenas commodo viverra tortor, ut viverra
diam pretium ac. Mauris posuere velit et sapien dapibus condimentum. Suspendisse potenti. Sed venenatis mi
a sem fringilla bibendum. Cras in eros eget mauris faucibus dapibus ac vitae sapien. Nunc interdum nisi quis
urna venenatis, sed pharetra dui aliquam. Donec vitae laoreet
<span class="highlight1">turpis</span>. Nulla nisi lectus, accumsan ut elementum at, placerat sit amet sem. Nullam eleifend rhoncus
scelerisque. Praesent ut urna neque. In felis tortor, scelerisque ut quam at, venenatis molestie lacus. Vestibulum
lacinia at sem vitae vulputate. Nulla facilisi. Nullam venenatis blandit dignissim. Fusce accumsan felis
ut odio iaculis fringilla. Phasellus vitae lorem commodo, elementum sapien at, congue arcu. Quisque et ligula
efficitur, ultrices metus vel, malesuada ligula. Suspendisse potenti. Vivamus condimentum quam at ex tincidunt
iaculis. Aliquam erat volutpat. Quisque dictum, dolor lacinia pulvinar pellentesque, dui libero feugiat risus,
non ullamcorper risus quam ut ipsum. Pellentesque mattis iaculis purus eu condimentum. Etiam sit amet lectus
nisl. Integer ut vulputate tellus, non facilisis massa. Suspendisse massa dui, finibus quis mi eget, molestie
pellentesque leo. Maecenas pretium dui odio, id aliquet metus tempus ac. Etiam quis mi porttitor, commodo
neque in, ultrices odio. Ut eu vehicula sapien. Maecenas fermentum velit a mi scelerisque, ut aliquet arcu
scelerisque. Aenean feugiat orci magna, nec tincidunt libero rutrum ut. Nunc sit amet maximus nisi, vitae
pellentesque leo. Cras eget augue id nisi tristique placerat. Nam pulvinar sapien et sem elementum, vel ultrices
quam tincidunt. Phasellus dictum, tortor fermentum sollicitudin ullamcorper, augue velit facilisis ipsum,
id ornare mi neque nec odio. Proin blandit id ligula nec interdum. Donec auctor, tortor vitae molestie volutpat,
massa velit suscipit ante, eget sagittis tellus dolor sit amet lacus. Duis iaculis elit non ullamcorper volutpat.
Morbi porta lacinia tellus, non pretium nisi mollis eget. Duis sed diam rutrum, vehicula tellus a, bibendum
nisi. Vestibulum id lorem dictum, euismod justo et, pulvinar eros. Etiam scelerisque eros mauris, ut pretium
metus ornare id. Integer sodales pulvinar mattis. Quisque hendrerit massa ac maximus porttitor. Nunc tempor
magna in tempor fermentum. Donec auctor ante lectus, efficitur sodales nisi facilisis id. Nullam feugiat
et urna fringilla iaculis. Pellentesque mi diam, finibus ut velit a, commodo imperdiet ipsum. Vivamus ac
rhoncus nibh, a tristique eros. Donec ac dictum risus. Duis vestibulum diam nisi, ultricies dictum felis
cursus id. Mauris sed porttitor odio. Nam eleifend eleifend est, sed auctor nisl viverra quis. Donec condimentum
neque eu metus imperdiet auctor vel vitae odio. Sed tempus id magna at ultrices. In porttitor scelerisque
mattis. Proin in luctus elit. Nulla facilisi. Praesent cursus velit id nunc condimentum, aliquet feugiat
elit eleifend. Aliquam quis interdum urna. Vestibulum maximus augue purus, non volutpat massa vestibulum
ullamcorper. Duis quam lectus, varius a diam mattis, commodo fermentum ligula. Nam dui purus, accumsan nec
nunc id, commodo accumsan mauris. Maecenas quis leo sed dolor pulvinar pharetra. Curabitur sed velit id nunc
viverra placerat. In at nisi sit amet metus molestie eleifend ut at justo. Etiam consectetur blandit lorem
a dictum. Aliquam erat volutpat. Donec aliquet purus sed purus iaculis maximus. Sed ultricies quam nibh,
ut volutpat diam dapibus vitae. Etiam gravida ante quis arcu malesuada, et tempor velit feugiat. Praesent
convallis diam vel
<span class="highlight1">turpis</span> mollis eleifend sed eu nulla. Vestibulum sed tortor orci. In pharetra sapien velit, quis tempor
massa ultrices at. Mauris tincidunt metus justo, in sagittis lacus placerat sit amet. Nam convallis enim
vitae cursus pellentesque. Cras arcu augue, sollicitudin vitae leo id, aliquet dictum urna. Vestibulum sed
neque felis. Donec non pharetra magna. Vestibulum at nulla nisi. Duis egestas accumsan magna in fringilla.
Maecenas tincidunt, augue et sagittis ultrices, lectus lacus semper nulla, id porta ligula ante quis mi.
Maecenas sed gravida urna. Maecenas vestibulum odio in placerat blandit. Nunc ac elit pharetra purus rutrum
eleifend. Mauris sit amet neque ex. Praesent efficitur, ligula a pellentesque consequat, mi nisl mollis ipsum,
nec pharetra erat odio et ex. Suspendisse sed vestibulum enim. Etiam nisl lectus, efficitur non pulvinar
ac, gravida et lacus. Nam vulputate eget nulla in suscipit. Cras iaculis lectus enim, quis vehicula nisl
consectetur nec. Fusce tincidunt mauris vitae diam accumsan vulputate. Mauris finibus mi nec bibendum pharetra.
Nam nec efficitur urna. Cras ac consectetur est. Pellentesque pharetra nibh eu quam finibus tincidunt. Morbi
varius dictum
<span class="highlight1">turpis</span>, eu blandit urna laoreet id. Vivamus congue lobortis auctor. Duis in dui vitae odio ornare
vulputate ac hendrerit justo. Etiam in ligula sed augue viverra faucibus a sed velit. Morbi nec mattis neque,
ac eleifend quam. Curabitur leo enim, pharetra vitae egestas et, porttitor sit amet massa. Donec tincidunt
lacus eu augue dictum condimentum vitae at nisi. Praesent vehicula purus nec sem venenatis, in pulvinar felis
varius. Aenean ac volutpat lorem. Proin molestie dictum egestas. Donec at augue sed lacus ultricies placerat.
Integer dignissim consequat malesuada. Aenean porta, orci et mattis ultrices, metus eros cursus lorem, eget
facilisis tellus tortor eu dui. Etiam nec metus id ipsum pellentesque vehicula quis ac urna. Donec arcu nulla,
ornare ut scelerisque id, placerat vitae dolor. Donec urna dolor, mattis ultrices lorem sed, rhoncus varius
enim. Integer massa arcu, tincidunt ut luctus vitae, facilisis et lacus. Praesent aliquet sapien sed elit
vulputate, sed fringilla massa commodo. Integer mauris dolor, vestibulum eu mauris vitae, posuere hendrerit
sapien. Aliquam erat volutpat. In in libero porta, luctus magna ullamcorper, porta dolor. Fusce ut ligula
velit. Cras finibus nisl eget nisi pharetra, eu eleifend nibh venenatis. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Mauris tristique feugiat congue. Duis quam sapien, vulputate quis neque sit amet,
pretium tristique nulla. Duis eget finibus nisi, ultrices interdum erat. Ut risus leo, tristique non diam
non, porttitor mollis justo. Nunc tempus sed dui ac sodales. Phasellus nulla odio, pulvinar luctus felis
eu, tincidunt euismod dui. Fusce imperdiet sapien arcu, eu fermentum mi ultrices vulputate. Aenean pretium
vel lorem sodales efficitur. Etiam cursus, dui at dictum sagittis, sem leo euismod odio, sit amet fermentum
lacus sem eu justo. Phasellus et lobortis dui. Etiam venenatis felis ipsum. Cras eget ultrices mi, sed semper
erat. Donec ex nisi, sodales eget risus eget, tristique tincidunt nunc. Aliquam et libero et sem sagittis
egestas ac a nisi. Etiam et justo posuere, malesuada elit sed, faucibus felis. Suspendisse quis orci quis
ante dictum consectetur. Donec gravida sem nec imperdiet dignissim. Mauris rutrum a tellus id cursus. Cras
cursus dictum ex id convallis. Curabitur consectetur malesuada ex ut ornare. Vestibulum in dui eu arcu efficitur
varius eu ac nisi. Cras gravida sem mattis, tristique ex sed, malesuada augue. Vivamus pretium sed sem id
congue. Duis pharetra magna sit amet egestas aliquam. Integer lectus augue, vestibulum quis maximus ac, accumsan
eu orci. Vestibulum tincidunt lacus vitae leo tempor luctus. Sed eget sem vel nulla euismod interdum ut at
diam. Pellentesque fermentum bibendum mauris, vitae tristique libero laoreet at. Nulla facilisi. Ut libero
erat, lacinia ac lectus in, lacinia pharetra mauris. Morbi euismod finibus magna ut consectetur. Ut malesuada
nunc eu leo ullamcorper, non tempor quam tempor. Pellentesque at ipsum erat. Morbi et diam sem. Etiam vulputate
congue nunc. Curabitur iaculis
<span class="highlight1">turpis</span> sed odio sollicitudin mollis. Quisque id pulvinar lacus. Donec quis urna dignissim, mattis
ante sed, vehicula eros. Proin porta pretium eros, in pellentesque velit commodo lacinia. Donec tristique
mi odio, ut elementum nunc feugiat sit amet. Sed eleifend hendrerit molestie. Praesent facilisis urna vitae
<span class="highlight1">turpis</span> accumsan, non tincidunt sapien dignissim. Sed hendrerit ullamcorper odio, non egestas mi vehicula
eu. Nullam eu sollicitudin libero. Nulla eget nulla nulla. Quisque nec eros vel
<span class="highlight1">turpis</span> scelerisque finibus. Ut sed mi arcu. Aliquam molestie ac velit id vestibulum. Aenean egestas
ultricies dolor, in eleifend dolor malesuada sit amet. Vestibulum eu dolor erat. Nunc feugiat et nisl sit
amet commodo. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Duis
<span class="highlight1">turpis</span> velit, pellentesque a ante sed, accumsan efficitur urna. Ut massa diam, ultrices ac nibh sit
amet, scelerisque auctor libero. Vestibulum dictum ex a orci cursus, in sagittis purus aliquam. Aliquam vulputate,
nulla faucibus feugiat dignissim, arcu eros condimentum justo, at luctus ex urna eu mi. Nunc scelerisque
sit amet sapien vitae bibendum. Morbi metus magna, commodo at felis eget, bibendum tempor arcu. Nam fringilla
tincidunt cursus. Morbi id rutrum lacus, quis elementum nisi. Nunc lobortis lacinia vehicula. Morbi ornare
aliquet convallis. Praesent nec diam et nulla posuere euismod et eu nunc. Vivamus consectetur, diam sed facilisis
scelerisque, enim enim lacinia tortor, vitae ornare
<span class="highlight1">turpis</span> risus egestas mi. Aliquam erat volutpat. Vestibulum maximus, odio vel ultrices tristique, erat
mi condimentum elit, et molestie lorem metus eget sapien. Etiam ultrices ligula quis felis efficitur, id
rutrum mi facilisis. Pellentesque id fringilla ante, sed posuere arcu. Ut at pellentesque erat. Aenean ac
molestie arcu, et suscipit quam. Donec et metus at arcu congue tincidunt tincidunt eget ante. Aliquam id
massa scelerisque, porta ante eget, rhoncus augue. Etiam ex libero, egestas non velit sed, scelerisque rhoncus
odio. Donec tincidunt porta commodo. Ut fermentum lobortis justo, eget sagittis justo hendrerit ac. Aenean
ullamcorper magna non metus ultricies consectetur. Quisque facilisis diam at velit consectetur efficitur.
Etiam malesuada nibh ex, vel tempus urna dignissim ac. Proin sit amet luctus justo, sit amet vehicula orci.
Morbi malesuada leo interdum, lobortis dolor quis, faucibus urna. Mauris ut lacus ac risus sollicitudin suscipit
quis sit amet orci. Fusce posuere diam semper nulla scelerisque fermentum. Vivamus id dictum felis. Fusce
nec pretium odio. Phasellus aliquet tortor in risus rhoncus vulputate. Maecenas vulputate, est vel lobortis
elementum, lectus sem interdum lectus, ac efficitur neque nulla id leo. Duis suscipit molestie lorem. Praesent
sed tincidunt ligula. Quisque mollis nulla dolor, lobortis consectetur mi blandit id. Duis tempus pharetra
porta. Etiam a finibus odio. Proin eleifend ligula in justo pulvinar, in dignissim arcu ullamcorper. Aliquam
sapien purus, fringilla vel semper eu, lobortis a quam. Mauris ac nisl vitae lorem aliquam tristique ac non
leo. Donec ornare nisi non magna mollis tristique. Morbi condimentum vel purus sit amet pulvinar. Nunc dapibus
sapien nec dui aliquam, eget venenatis leo cursus. Donec tristique aliquet libero, ac ullamcorper felis vehicula
in. Sed nunc felis, efficitur at odio eu, luctus gravida lorem. Sed nec pharetra mauris. Maecenas a porta
sem, et fermentum nisl. Vestibulum consectetur nulla sit amet elit venenatis euismod. Nam enim metus, consectetur
non elementum a, mollis et augue. Sed varius, ipsum in eleifend tincidunt, sapien lorem congue massa, nec
tincidunt augue leo et enim. Pellentesque sit amet dictum est. Nunc et pellentesque
<span class="highlight1">turpis</span>, non ullamcorper sapien. Sed sit amet laoreet orci. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Aliquam urna nibh, laoreet at tempor vitae, pellentesque non quam. Nulla
<span class="highlight1">turpis</span> elit, facilisis at elit eu, mollis ultricies felis. Nam lobortis leo quis nunc vehicula porta.
Aliquam egestas nisi vel neque posuere pellentesque. Mauris luctus pulvinar erat, vel dignissim erat consequat
in. Nulla eu massa sit amet ex volutpat blandit non vitae eros. Aliquam tincidunt ut lectus vel bibendum.
In vitae lacus magna. Ut sed lacus sit amet sapien maximus euismod. Donec tempus semper tortor, in volutpat
arcu viverra blandit. Phasellus vitae scelerisque tellus, sit amet tempus massa. Aliquam efficitur tristique
ante. Aliquam id sapien nisi. Morbi id auctor ipsum, id tristique justo.</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var searchhighlighechart = d3.select("#toolbar")
.append("svg")
.attr("width", "100%")
.attr("height", 20);
var bars = searchhighlighechart.selectAll("rect")
.data(d3.selectAll(".highlight1")[0])
.enter()
.append("rect");
var barsAtts = bars
.attr("width", 2)
.attr("height", 20)
.attr("x", function (d) {
return d.offsetTop / d3.select("#maincontent")[0][0].offsetHeight * d3.select("#toolbar")[0][0].offsetWidth
})
.attr("y", 0)
.style("fill", "green")
.on("click", function (d) {
$('html, body').animate({
scrollTop: d.offsetTop - $("#maincontent")[0].offsetTop + 30
}, 500);
})
.on("mouseover", function () {
d3.select(this).style("fill", "red");
})
.on("mouseout", function () {
d3.select(this).style("fill", "green");
});
</script>
</body>
</html>