Mercurial > repos > brasset_jensen > srnapipe
comparison test-data/res_files/reads-sample-small.fastq-piRNAs-TEs.html @ 61:9185ca0a7b43 draft
Updated package according to recommendations.
author | pierre.pouchin |
---|---|
date | Wed, 16 Jan 2019 08:18:13 -0500 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
60:9645d995fb3c | 61:9185ca0a7b43 |
---|---|
1 | |
2 <!DOCTYPE html> | |
3 <html lang="en"> | |
4 <head> | |
5 <meta charset="utf-8"> | |
6 <title>pipeline</title> | |
7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
8 <meta name="description" content=""> | |
9 <meta name="author" content=""> | |
10 <!-- Le styles --> | |
11 <link href="css/bootstrap.css" rel="stylesheet"> | |
12 <link href="css/bootstrap-table.css" rel="stylesheet"> | |
13 <style type="text/css"> | |
14 body { | |
15 padding-top: 60px; | |
16 padding-bottom: 40px; | |
17 } | |
18 div#page { | |
19 width: 940px; | |
20 background-color: #fff; | |
21 margin: 0 auto; | |
22 text-align: left; | |
23 border-color: #fff; | |
24 border-style: none solid solid; | |
25 border-width: medium 1px 1px; | |
26 } | |
27 | |
28 div.content { | |
29 display: none; | |
30 float: right; | |
31 width: 550px; | |
32 } | |
33 div.content a, div.navigation a { | |
34 text-decoration: none; | |
35 color: #777; | |
36 } | |
37 div.content a:focus, div.content a:hover, div.content a:active { | |
38 text-decoration: underline; | |
39 } | |
40 | |
41 div.controls { | |
42 margin-top: 5px; | |
43 height: 23px; | |
44 } | |
45 | |
46 div.controls a { | |
47 padding: 5px; | |
48 } | |
49 div.ss-controls { | |
50 float: left; | |
51 } | |
52 div.nav-controls { | |
53 float: right; | |
54 } | |
55 div.slideshow-container { | |
56 position: relative; | |
57 clear: both; | |
58 height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */ | |
59 } | |
60 div.loader { | |
61 position: absolute; | |
62 top: 0; | |
63 left: 0; | |
64 background-image: url('loader.gif'); | |
65 background-repeat: no-repeat; | |
66 background-position: center; | |
67 width: 550px; | |
68 height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */ | |
69 } | |
70 div.slideshow { | |
71 | |
72 } | |
73 | |
74 div.slideshow span.image-wrapper { | |
75 display: block; | |
76 position: absolute; | |
77 top: 0; | |
78 left: 0; | |
79 } | |
80 div.slideshow a.advance-link { | |
81 display: block; | |
82 width: 550px; | |
83 height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */ | |
84 line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */ | |
85 text-align: center; | |
86 } | |
87 div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited { | |
88 text-decoration: none; | |
89 } | |
90 div.slideshow img { | |
91 vertical-align: middle; | |
92 border: 1px solid #ccc; | |
93 } | |
94 | |
95 div.image-title { | |
96 font-weight: bold; | |
97 font-size: 1.4em; | |
98 } | |
99 | |
100 div.image-desc { | |
101 line-height: 1.3em; | |
102 padding-top: 12px; | |
103 } | |
104 div.navigation { | |
105 | |
106 } | |
107 ul.thumbs { | |
108 clear: both; | |
109 margin: 0; | |
110 padding: 0; | |
111 } | |
112 ul.thumbs li { | |
113 float: none; | |
114 padding: 0; | |
115 margin: 0; | |
116 list-style: none; | |
117 } | |
118 a.thumb { | |
119 padding: 0; | |
120 display: inline; | |
121 border: none; | |
122 } | |
123 ul.thumbs li.selected a.thumb { | |
124 color: #000; | |
125 font-weight: bold; | |
126 } | |
127 a.thumb:focus { | |
128 outline: none; | |
129 } | |
130 ul.thumbs img { | |
131 border: none; | |
132 display: block; | |
133 } | |
134 div.pagination { | |
135 clear: both; | |
136 } | |
137 div.navigation div.top { | |
138 margin-bottom: 12px; | |
139 height: 11px; | |
140 } | |
141 div.navigation div.bottom { | |
142 margin-top: 12px; | |
143 } | |
144 div.pagination a, div.pagination span.current, div.pagination span.ellipsis { | |
145 display: block; | |
146 float: left; | |
147 margin-right: 2px; | |
148 padding: 4px 7px 2px 7px; | |
149 border: 1px solid #ccc; | |
150 } | |
151 div.pagination a:hover { | |
152 background-color: #eee; | |
153 text-decoration: none; | |
154 } | |
155 div.pagination span.current { | |
156 font-weight: bold; | |
157 background-color: #000; | |
158 border-color: #000; | |
159 color: #fff; | |
160 } | |
161 div.pagination span.ellipsis { | |
162 border: none; | |
163 padding: 5px 0 3px 2px; | |
164 } | |
165 | |
166 div.download { | |
167 float: right; | |
168 } | |
169 | |
170 div.caption-container { | |
171 position: relative; | |
172 clear: left; | |
173 height: 75px; | |
174 } | |
175 span.image-caption { | |
176 display: block; | |
177 position: absolute; | |
178 width: 550px; | |
179 top: 0; | |
180 left: 0; | |
181 } | |
182 div.caption { | |
183 padding: 12px; | |
184 } | |
185 | |
186 /* Featurettes | |
187 ------------------------- */ | |
188 | |
189 .featurette { | |
190 padding-top: 20px; /* Vertically center images part 1: add padding above and below text. */ | |
191 overflow: hidden; /* Vertically center images part 2: clear their floats. */ | |
192 text-align: center; | |
193 } | |
194 | |
195 .featurette-p | |
196 { | |
197 text-align: left; | |
198 } | |
199 | |
200 .featurette-image { | |
201 margin-top: 10px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */ | |
202 width: 450px; | |
203 height: auto; | |
204 } | |
205 | |
206 </style> | |
207 <link href="css/bootstrap-responsive.css" rel="stylesheet"> | |
208 </head> | |
209 <body> | |
210 | |
211 <div class="navbar navbar-inverse navbar-fixed-top"> | |
212 <div class="navbar-inner"> | |
213 <div class="container"> | |
214 <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> | |
215 <span class="icon-bar"></span> | |
216 <span class="icon-bar"></span> | |
217 <span class="icon-bar"></span> | |
218 </button> | |
219 <a class="brand" href="report.txt">Report</a> | |
220 <div class="nav-collapse collapse"> | |
221 <ul class="nav"> | |
222 <li class="active"><a href="reads-sample-small.fastq.html">reads-sample-small.fastq</a></li> | |
223 </ul> | |
224 </div><!--/.nav-collapse --> | |
225 </div> | |
226 </div> | |
227 </div> <div class="container"> <p><a class="btn" href="reads-sample-small.fastq-piRNAs-PPP.html">Ping Pong Partners</a></p> | |
228 </div> | |
229 <div class="container"> | |
230 <div class="featurette"> | |
231 <h1>Transposable elements</h1> | |
232 <p class="featurette-p"> | |
233 <A HREF="reads-sample-small.fastq/subgroups/piRNAs//piRNAs-TEs_minus.bedgraph">bedgraph minus strand</A><br/> | |
234 <A HREF="reads-sample-small.fastq/subgroups/piRNAs//piRNAs-TEs_plus.bedgraph">bedgraph plus strand</A><br/> | |
235 <A HREF="reads-sample-small.fastq/subgroups/piRNAs//piRNAs-TEs_reads_counts.txt">read number per TE 0 to 3 mismatches (txt)</A><br/> | |
236 <A HREF="reads-sample-small.fastq/subgroups/piRNAs//piRNAs-TEs_reads_counts_mismatches.txt">read number per TE with 1 to 3 mismatches (txt)</A><br/> | |
237 <A HREF="reads-sample-small.fastq/subgroups/piRNAs//piRNAs-TEs_reads_counts_nomismatches.txt">read number per TE with no mismatch (txt)</A><br/> | |
238 <A HREF="reads-sample-small.fastq/subgroups/piRNAs//piRNAs-TEs_sorted.bam">TEs mappers (sorted bam)</A><br/> | |
239 <A HREF="reads-sample-small.fastq/subgroups/piRNAs//piRNAs-TEs_unique_sorted.bam">TEs unique mappers (sorted bam)</A><br/> | |
240 | |
241 </p> | |
242 </div> | |
243 </div> | |
244 | |
245 <div id="page"> | |
246 <div id="container"> | |
247 <div class="each-gallery"> | |
248 <div id="gallery" class="content"> | |
249 <div id="controls0" class="controls"></div> | |
250 <div class="slideshow-container"> | |
251 <div id="loading0" class="loader"></div> | |
252 <div id="slideshow0" class="slideshow"></div> | |
253 </div> | |
254 <div id="caption0" class="caption-container">Reads randomly assigned</div> | |
255 </div> | |
256 <div id="thumbs0" class="navigation"> | |
257 <input type="text" id="myInput0" onkeyup="search(this)" placeholder="Search for names..."> | |
258 <ul class="thumbs noscript"> | |
259 | |
260 <li> | |
261 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/BATUMI_I.png" title="BATUMI_I">BATUMI_I</a> | |
262 </li> | |
263 | |
264 <li> | |
265 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/BATUMI_LTR.png" title="BATUMI_LTR">BATUMI_LTR</a> | |
266 </li> | |
267 | |
268 <li> | |
269 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/BS2.png" title="BS2">BS2</a> | |
270 </li> | |
271 | |
272 <li> | |
273 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/DMCR1A.png" title="DMCR1A">DMCR1A</a> | |
274 </li> | |
275 | |
276 <li> | |
277 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/DMRT1B.png" title="DMRT1B">DMRT1B</a> | |
278 </li> | |
279 | |
280 <li> | |
281 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/FW.png" title="FW">FW</a> | |
282 </li> | |
283 | |
284 <li> | |
285 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/G6_DM.png" title="G6_DM">G6_DM</a> | |
286 </li> | |
287 | |
288 <li> | |
289 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/Gypsy2-LTR_DM.png" title="Gypsy2-LTR_DM">Gypsy2-LTR_DM</a> | |
290 </li> | |
291 | |
292 <li> | |
293 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/I_DM.png" title="I_DM">I_DM</a> | |
294 </li> | |
295 | |
296 <li> | |
297 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/MAX_I.png" title="MAX_I">MAX_I</a> | |
298 </li> | |
299 | |
300 <li> | |
301 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/MAX_LTR.png" title="MAX_LTR">MAX_LTR</a> | |
302 </li> | |
303 | |
304 <li> | |
305 <a class="thumb" href="reads-sample-small.fastq/subgroups/piRNAs//Gviz_TEs/PROTOP.png" title="PROTOP">PROTOP</a> | |
306 </li> | |
307 | |
308 </ul> | |
309 </div> | |
310 <div style="clear: both;"></div></div> | |
311 </div> | |
312 </div> | |
313 | |
314 <!-- FOOTER --> | |
315 <div class="container"> | |
316 <footer> | |
317 | |
318 </footer> | |
319 </div> | |
320 <!-- Le javascript | |
321 ================================================== --> | |
322 <!-- Placed at the end of the document so the pages load faster --> | |
323 <script type="text/javascript" src="js/filter.js"></script> | |
324 <script type="text/javascript" src="js/jquery.js"></script> | |
325 <script type="text/javascript" src="js/jquery-1.3.2.js"></script> | |
326 <script type="text/javascript" src="js/jquery.galleriffic.js"></script> | |
327 <script type="text/javascript" src="js/jquery.opacityrollover.js"></script> | |
328 <script type="text/javascript" src="js/bootstrap-table.js"></script> | |
329 <script type="text/javascript" src="js/bootstrap.min.js"></script> | |
330 <script type="text/javascript"> | |
331 jQuery(document).ready(function($) { | |
332 // We only want these styles applied when javascript is enabled | |
333 $('div.navigation').css({'width' : '300px', 'float' : 'left'}); | |
334 $('div.content').css('display', 'block'); | |
335 | |
336 $(".each-gallery").each(function(i){ | |
337 // Initially set opacity on thumbs and add | |
338 // additional styling for hover effect on thumbs | |
339 var onMouseOutOpacity = 0.67; | |
340 $('#thumbs + i + ul.thumbs li').opacityrollover({ | |
341 mouseOutOpacity: onMouseOutOpacity, | |
342 mouseOverOpacity: 1.0, | |
343 fadeSpeed: 'fast', | |
344 exemptionSelector: '.selected' | |
345 }); | |
346 | |
347 // Initialize Advanced Galleriffic Gallery | |
348 var gallery = $('#thumbs'+i).galleriffic({ | |
349 delay: 2500, | |
350 numThumbs: 22, | |
351 preloadAhead: 10, | |
352 enableTopPager: true, | |
353 enableBottomPager: true, | |
354 maxPagesToShow: 7, | |
355 imageContainerSel: '#slideshow'+ i, | |
356 controlsContainerSel: '#controls' + i, | |
357 captionContainerSel: '#caption' + i, | |
358 loadingContainerSel: '#loading' + i, | |
359 renderSSControls: true, | |
360 renderNavControls: true, | |
361 playLinkText: 'Play', | |
362 pauseLinkText: 'Pause', | |
363 prevLinkText: '‹ Previous', | |
364 nextLinkText: 'Next ›', | |
365 nextPageLinkText: 'Next ›', | |
366 prevPageLinkText: '‹ Prev', | |
367 enableHistory: false, | |
368 autoStart: false, | |
369 syncTransitions: true, | |
370 defaultTransitionDuration: 900, | |
371 onSlideChange: function(prevIndex, nextIndex) { | |
372 // 'this' refers to the gallery, which is an extension of $('#thumbs') | |
373 this.find('ul.thumbs').children() | |
374 .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() | |
375 .eq(nextIndex).fadeTo('fast', 1.0); | |
376 }, | |
377 onPageTransitionOut: function(callback) { | |
378 this.fadeTo('fast', 0.0, callback); | |
379 }, | |
380 onPageTransitionIn: function() { | |
381 this.fadeTo('fast', 1.0); | |
382 } | |
383 }); | |
384 }); | |
385 }); | |
386 </script> | |
387 </body> | |
388 </html> | |
389 |