Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2629 vikas 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
<html>
3
	<head>
4
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
5
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
6
 
7
		<title>FixedHeader example</title>
8
		<style type="text/css" title="currentStyle">
9
			@import "../../media/css/demo_page.css";
10
			@import "../../media/css/demo_table.css";
11
			@import "media/css/TableTools.css";
12
			.FixedHeader_Cloned th {
13
				background-color: white;
14
			}
15
			th, td {
16
				height: 30px;
17
			}
18
			.left_cell {
19
				background-color: white  !important;
20
				border-right: 1px solid black  !important;
21
				text-align: center;
22
			}
23
			.right_cell {
24
				background-color: white !important;
25
				border-left: 1px solid black;
26
				text-align: center;
27
			}
28
			#info {
29
				position: absolute;
30
				top: 100px;
31
				left: 100px;
32
				width: 300px;
33
				background-color: white;
34
				border: 1px solid blue;
35
				z-index: 50;
36
				padding: 20px;
37
			}
38
		</style>
39
		<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
40
		<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
41
		<script type="text/javascript" charset="utf-8" src="js/FixedHeader.js"></script>
42
		<script type="text/javascript" charset="utf-8">
43
			$(document).ready( function () {
44
				var oTable = $('#example').dataTable( { 
45
					"iDisplayLength": -1,
46
					"bFilter": false,
47
					"bInfo": false,
48
					"bPaginate": false,
49
					"bLengthChange": false,
50
					"fnDrawCallback": function ( oSettings ) {
51
						for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
52
						{
53
							$('td:eq(0), td:eq(6)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
54
						}
55
					},
56
					"aoColumns": [
57
						{"bSortable": false, "sWidth": "20px" },
58
						null, null, null, null, null, 
59
						{"bSortable": false, "sWidth": "20px" }
60
					]
61
				} );
62
				new FixedHeader( oTable, { "left": true, "right": true, "bottom": true } );
63
			} );
64
		</script>
65
	</head>
66
	<body id="dt_example">
67
		<div id="info">
68
			<h1 style="margin: 0; border-width:0">FixedHeader example - top, bottom, left and right fixed</h1>
69
			<p>This example shows how FixedHeader can be made to look more like a spreadsheet application. Click 'View source' in your browser to see the set up.</p>
70
		</div>
71
 
72
		<div style="width:2000px; height: 2000px">
73
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
74
	<thead>
75
		<tr>
76
			<th></th>
77
			<th>Rendering engine</th>
78
			<th>Browser</th>
79
			<th>Platform(s)</th>
80
			<th>Engine version</th>
81
			<th>CSS grade</th>
82
			<th></th>
83
		</tr>
84
	</thead>
85
	<tbody>
86
		<tr class="gradeX">
87
			<td class="left_cell"> </td>
88
			<td>Trident</td>
89
			<td>Internet
90
				 Explorer 4.0</td>
91
			<td>Win 95+</td>
92
			<td class="center">4</td>
93
			<td class="center">X</td>
94
			<td class="right_cell"> </td>
95
		</tr>
96
		<tr class="gradeC">
97
			<td class="left_cell"> </td>
98
			<td>Trident</td>
99
			<td>Internet
100
				 Explorer 5.0</td>
101
			<td>Win 95+</td>
102
			<td class="center">5</td>
103
			<td class="center">C</td>
104
			<td class="right_cell"> </td>
105
		</tr>
106
		<tr class="gradeA">
107
			<td class="left_cell"> </td>
108
			<td>Trident</td>
109
			<td>Internet
110
				 Explorer 5.5</td>
111
			<td>Win 95+</td>
112
			<td class="center">5.5</td>
113
			<td class="center">A</td>
114
			<td class="right_cell"> </td>
115
		</tr>
116
		<tr class="gradeA">
117
			<td class="left_cell"> </td>
118
			<td>Trident</td>
119
			<td>Internet
120
				 Explorer 6</td>
121
			<td>Win 98+</td>
122
			<td class="center">6</td>
123
			<td class="center">A</td>
124
			<td class="right_cell"> </td>
125
		</tr>
126
		<tr class="gradeA">
127
			<td class="left_cell"> </td>
128
			<td>Trident</td>
129
			<td>Internet Explorer 7</td>
130
			<td>Win XP SP2+</td>
131
			<td class="center">7</td>
132
			<td class="center">A</td>
133
			<td class="right_cell"> </td>
134
		</tr>
135
		<tr class="gradeA">
136
			<td class="left_cell"> </td>
137
			<td>Trident</td>
138
			<td>AOL browser (AOL desktop)</td>
139
			<td>Win XP</td>
140
			<td class="center">6</td>
141
			<td class="center">A</td>
142
			<td class="right_cell"> </td>
143
		</tr>
144
		<tr class="gradeA">
145
			<td class="left_cell"> </td>
146
			<td>Gecko</td>
147
			<td>Firefox 1.0</td>
148
			<td>Win 98+ / OSX.2+</td>
149
			<td class="center">1.7</td>
150
			<td class="center">A</td>
151
			<td class="right_cell"> </td>
152
		</tr>
153
		<tr class="gradeA">
154
			<td class="left_cell"> </td>
155
			<td>Gecko</td>
156
			<td>Firefox 1.5</td>
157
			<td>Win 98+ / OSX.2+</td>
158
			<td class="center">1.8</td>
159
			<td class="center">A</td>
160
			<td class="right_cell"> </td>
161
		</tr>
162
		<tr class="gradeA">
163
			<td class="left_cell"> </td>
164
			<td>Gecko</td>
165
			<td>Firefox 2.0</td>
166
			<td>Win 98+ / OSX.2+</td>
167
			<td class="center">1.8</td>
168
			<td class="center">A</td>
169
			<td class="right_cell"> </td>
170
		</tr>
171
		<tr class="gradeA">
172
			<td class="left_cell"> </td>
173
			<td>Gecko</td>
174
			<td>Firefox 3.0</td>
175
			<td>Win 2k+ / OSX.3+</td>
176
			<td class="center">1.9</td>
177
			<td class="center">A</td>
178
			<td class="right_cell"> </td>
179
		</tr>
180
		<tr class="gradeA">
181
			<td class="left_cell"> </td>
182
			<td>Gecko</td>
183
			<td>Camino 1.0</td>
184
			<td>OSX.2+</td>
185
			<td class="center">1.8</td>
186
			<td class="center">A</td>
187
			<td class="right_cell"> </td>
188
		</tr>
189
		<tr class="gradeA">
190
			<td class="left_cell"> </td>
191
			<td>Gecko</td>
192
			<td>Camino 1.5</td>
193
			<td>OSX.3+</td>
194
			<td class="center">1.8</td>
195
			<td class="center">A</td>
196
			<td class="right_cell"> </td>
197
		</tr>
198
		<tr class="gradeA">
199
			<td class="left_cell"> </td>
200
			<td>Gecko</td>
201
			<td>Netscape 7.2</td>
202
			<td>Win 95+ / Mac OS 8.6-9.2</td>
203
			<td class="center">1.7</td>
204
			<td class="center">A</td>
205
			<td class="right_cell"> </td>
206
		</tr>
207
		<tr class="gradeA">
208
			<td class="left_cell"> </td>
209
			<td>Gecko</td>
210
			<td>Netscape Browser 8</td>
211
			<td>Win 98SE+</td>
212
			<td class="center">1.7</td>
213
			<td class="center">A</td>
214
			<td class="right_cell"> </td>
215
		</tr>
216
		<tr class="gradeA">
217
			<td class="left_cell"> </td>
218
			<td>Gecko</td>
219
			<td>Netscape Navigator 9</td>
220
			<td>Win 98+ / OSX.2+</td>
221
			<td class="center">1.8</td>
222
			<td class="center">A</td>
223
			<td class="right_cell"> </td>
224
		</tr>
225
		<tr class="gradeA">
226
			<td class="left_cell"> </td>
227
			<td>Gecko</td>
228
			<td>Mozilla 1.0</td>
229
			<td>Win 95+ / OSX.1+</td>
230
			<td class="center">1</td>
231
			<td class="center">A</td>
232
			<td class="right_cell"> </td>
233
		</tr>
234
		<tr class="gradeA">
235
			<td class="left_cell"> </td>
236
			<td>Gecko</td>
237
			<td>Mozilla 1.1</td>
238
			<td>Win 95+ / OSX.1+</td>
239
			<td class="center">1.1</td>
240
			<td class="center">A</td>
241
			<td class="right_cell"> </td>
242
		</tr>
243
		<tr class="gradeA">
244
			<td class="left_cell"> </td>
245
			<td>Gecko</td>
246
			<td>Mozilla 1.2</td>
247
			<td>Win 95+ / OSX.1+</td>
248
			<td class="center">1.2</td>
249
			<td class="center">A</td>
250
			<td class="right_cell"> </td>
251
		</tr>
252
		<tr class="gradeA">
253
			<td class="left_cell"> </td>
254
			<td>Gecko</td>
255
			<td>Mozilla 1.3</td>
256
			<td>Win 95+ / OSX.1+</td>
257
			<td class="center">1.3</td>
258
			<td class="center">A</td>
259
			<td class="right_cell"> </td>
260
		</tr>
261
		<tr class="gradeA">
262
			<td class="left_cell"> </td>
263
			<td>Gecko</td>
264
			<td>Mozilla 1.4</td>
265
			<td>Win 95+ / OSX.1+</td>
266
			<td class="center">1.4</td>
267
			<td class="center">A</td>
268
			<td class="right_cell"> </td>
269
		</tr>
270
		<tr class="gradeA">
271
			<td class="left_cell"> </td>
272
			<td>Gecko</td>
273
			<td>Mozilla 1.5</td>
274
			<td>Win 95+ / OSX.1+</td>
275
			<td class="center">1.5</td>
276
			<td class="center">A</td>
277
			<td class="right_cell"> </td>
278
		</tr>
279
		<tr class="gradeA">
280
			<td class="left_cell"> </td>
281
			<td>Gecko</td>
282
			<td>Mozilla 1.6</td>
283
			<td>Win 95+ / OSX.1+</td>
284
			<td class="center">1.6</td>
285
			<td class="center">A</td>
286
			<td class="right_cell"> </td>
287
		</tr>
288
		<tr class="gradeA">
289
			<td class="left_cell"> </td>
290
			<td>Gecko</td>
291
			<td>Mozilla 1.7</td>
292
			<td>Win 98+ / OSX.1+</td>
293
			<td class="center">1.7</td>
294
			<td class="center">A</td>
295
			<td class="right_cell"> </td>
296
		</tr>
297
		<tr class="gradeA">
298
			<td class="left_cell"> </td>
299
			<td>Gecko</td>
300
			<td>Mozilla 1.8</td>
301
			<td>Win 98+ / OSX.1+</td>
302
			<td class="center">1.8</td>
303
			<td class="center">A</td>
304
			<td class="right_cell"> </td>
305
		</tr>
306
		<tr class="gradeA">
307
			<td class="left_cell"> </td>
308
			<td>Gecko</td>
309
			<td>Seamonkey 1.1</td>
310
			<td>Win 98+ / OSX.2+</td>
311
			<td class="center">1.8</td>
312
			<td class="center">A</td>
313
			<td class="right_cell"> </td>
314
		</tr>
315
		<tr class="gradeA">
316
			<td class="left_cell"> </td>
317
			<td>Gecko</td>
318
			<td>Epiphany 2.20</td>
319
			<td>Gnome</td>
320
			<td class="center">1.8</td>
321
			<td class="center">A</td>
322
			<td class="right_cell"> </td>
323
		</tr>
324
		<tr class="gradeA">
325
			<td class="left_cell"> </td>
326
			<td>Webkit</td>
327
			<td>Safari 1.2</td>
328
			<td>OSX.3</td>
329
			<td class="center">125.5</td>
330
			<td class="center">A</td>
331
			<td class="right_cell"> </td>
332
		</tr>
333
		<tr class="gradeA">
334
			<td class="left_cell"> </td>
335
			<td>Webkit</td>
336
			<td>Safari 1.3</td>
337
			<td>OSX.3</td>
338
			<td class="center">312.8</td>
339
			<td class="center">A</td>
340
			<td class="right_cell"> </td>
341
		</tr>
342
		<tr class="gradeA">
343
			<td class="left_cell"> </td>
344
			<td>Webkit</td>
345
			<td>Safari 2.0</td>
346
			<td>OSX.4+</td>
347
			<td class="center">419.3</td>
348
			<td class="center">A</td>
349
			<td class="right_cell"> </td>
350
		</tr>
351
		<tr class="gradeA">
352
			<td class="left_cell"> </td>
353
			<td>Webkit</td>
354
			<td>Safari 3.0</td>
355
			<td>OSX.4+</td>
356
			<td class="center">522.1</td>
357
			<td class="center">A</td>
358
			<td class="right_cell"> </td>
359
		</tr>
360
		<tr class="gradeA">
361
			<td class="left_cell"> </td>
362
			<td>Webkit</td>
363
			<td>OmniWeb 5.5</td>
364
			<td>OSX.4+</td>
365
			<td class="center">420</td>
366
			<td class="center">A</td>
367
			<td class="right_cell"> </td>
368
		</tr>
369
		<tr class="gradeA">
370
			<td class="left_cell"> </td>
371
			<td>Webkit</td>
372
			<td>iPod Touch / iPhone</td>
373
			<td>iPod</td>
374
			<td class="center">420.1</td>
375
			<td class="center">A</td>
376
			<td class="right_cell"> </td>
377
		</tr>
378
		<tr class="gradeA">
379
			<td class="left_cell"> </td>
380
			<td>Webkit</td>
381
			<td>S60</td>
382
			<td>S60</td>
383
			<td class="center">413</td>
384
			<td class="center">A</td>
385
			<td class="right_cell"> </td>
386
		</tr>
387
		<tr class="gradeA">
388
			<td class="left_cell"> </td>
389
			<td>Presto</td>
390
			<td>Opera 7.0</td>
391
			<td>Win 95+ / OSX.1+</td>
392
			<td class="center">-</td>
393
			<td class="center">A</td>
394
			<td class="right_cell"> </td>
395
		</tr>
396
		<tr class="gradeA">
397
			<td class="left_cell"> </td>
398
			<td>Presto</td>
399
			<td>Opera 7.5</td>
400
			<td>Win 95+ / OSX.2+</td>
401
			<td class="center">-</td>
402
			<td class="center">A</td>
403
			<td class="right_cell"> </td>
404
		</tr>
405
		<tr class="gradeA">
406
			<td class="left_cell"> </td>
407
			<td>Presto</td>
408
			<td>Opera 8.0</td>
409
			<td>Win 95+ / OSX.2+</td>
410
			<td class="center">-</td>
411
			<td class="center">A</td>
412
			<td class="right_cell"> </td>
413
		</tr>
414
		<tr class="gradeA">
415
			<td class="left_cell"> </td>
416
			<td>Presto</td>
417
			<td>Opera 8.5</td>
418
			<td>Win 95+ / OSX.2+</td>
419
			<td class="center">-</td>
420
			<td class="center">A</td>
421
			<td class="right_cell"> </td>
422
		</tr>
423
		<tr class="gradeA">
424
			<td class="left_cell"> </td>
425
			<td>Presto</td>
426
			<td>Opera 9.0</td>
427
			<td>Win 95+ / OSX.3+</td>
428
			<td class="center">-</td>
429
			<td class="center">A</td>
430
			<td class="right_cell"> </td>
431
		</tr>
432
		<tr class="gradeA">
433
			<td class="left_cell"> </td>
434
			<td>Presto</td>
435
			<td>Opera 9.2</td>
436
			<td>Win 88+ / OSX.3+</td>
437
			<td class="center">-</td>
438
			<td class="center">A</td>
439
			<td class="right_cell"> </td>
440
		</tr>
441
		<tr class="gradeA">
442
			<td class="left_cell"> </td>
443
			<td>Presto</td>
444
			<td>Opera 9.5</td>
445
			<td>Win 88+ / OSX.3+</td>
446
			<td class="center">-</td>
447
			<td class="center">A</td>
448
			<td class="right_cell"> </td>
449
		</tr>
450
		<tr class="gradeA">
451
			<td class="left_cell"> </td>
452
			<td>Presto</td>
453
			<td>Opera for Wii</td>
454
			<td>Wii</td>
455
			<td class="center">-</td>
456
			<td class="center">A</td>
457
			<td class="right_cell"> </td>
458
		</tr>
459
		<tr class="gradeA">
460
			<td class="left_cell"> </td>
461
			<td>Presto</td>
462
			<td>Nokia N800</td>
463
			<td>N800</td>
464
			<td class="center">-</td>
465
			<td class="center">A</td>
466
			<td class="right_cell"> </td>
467
		</tr>
468
		<tr class="gradeA">
469
			<td class="left_cell"> </td>
470
			<td>Presto</td>
471
			<td>Nintendo DS browser</td>
472
			<td>Nintendo DS</td>
473
			<td class="center">8.5</td>
474
			<td class="center">C/A<sup>1</sup></td>
475
			<td class="right_cell"> </td>
476
		</tr>
477
		<tr class="gradeC">
478
			<td class="left_cell"> </td>
479
			<td>KHTML</td>
480
			<td>Konqureror 3.1</td>
481
			<td>KDE 3.1</td>
482
			<td class="center">3.1</td>
483
			<td class="center">C</td>
484
			<td class="right_cell"> </td>
485
		</tr>
486
		<tr class="gradeA">
487
			<td class="left_cell"> </td>
488
			<td>KHTML</td>
489
			<td>Konqureror 3.3</td>
490
			<td>KDE 3.3</td>
491
			<td class="center">3.3</td>
492
			<td class="center">A</td>
493
			<td class="right_cell"> </td>
494
		</tr>
495
		<tr class="gradeA">
496
			<td class="left_cell"> </td>
497
			<td>KHTML</td>
498
			<td>Konqureror 3.5</td>
499
			<td>KDE 3.5</td>
500
			<td class="center">3.5</td>
501
			<td class="center">A</td>
502
			<td class="right_cell"> </td>
503
		</tr>
504
		<tr class="gradeX">
505
			<td class="left_cell"> </td>
506
			<td>Tasman</td>
507
			<td>Internet Explorer 4.5</td>
508
			<td>Mac OS 8-9</td>
509
			<td class="center">-</td>
510
			<td class="center">X</td>
511
			<td class="right_cell"> </td>
512
		</tr>
513
		<tr class="gradeC">
514
			<td class="left_cell"> </td>
515
			<td>Tasman</td>
516
			<td>Internet Explorer 5.1</td>
517
			<td>Mac OS 7.6-9</td>
518
			<td class="center">1</td>
519
			<td class="center">C</td>
520
			<td class="right_cell"> </td>
521
		</tr>
522
		<tr class="gradeC">
523
			<td class="left_cell"> </td>
524
			<td>Tasman</td>
525
			<td>Internet Explorer 5.2</td>
526
			<td>Mac OS 8-X</td>
527
			<td class="center">1</td>
528
			<td class="center">C</td>
529
			<td class="right_cell"> </td>
530
		</tr>
531
		<tr class="gradeA">
532
			<td class="left_cell"> </td>
533
			<td>Misc</td>
534
			<td>NetFront 3.1</td>
535
			<td>Embedded devices</td>
536
			<td class="center">-</td>
537
			<td class="center">C</td>
538
			<td class="right_cell"> </td>
539
		</tr>
540
		<tr class="gradeA">
541
			<td class="left_cell"> </td>
542
			<td>Misc</td>
543
			<td>NetFront 3.4</td>
544
			<td>Embedded devices</td>
545
			<td class="center">-</td>
546
			<td class="center">A</td>
547
			<td class="right_cell"> </td>
548
		</tr>
549
		<tr class="gradeX">
550
			<td class="left_cell"> </td>
551
			<td>Misc</td>
552
			<td>Dillo 0.8</td>
553
			<td>Embedded devices</td>
554
			<td class="center">-</td>
555
			<td class="center">X</td>
556
			<td class="right_cell"> </td>
557
		</tr>
558
		<tr class="gradeX">
559
			<td class="left_cell"> </td>
560
			<td>Misc</td>
561
			<td>Links</td>
562
			<td>Text only</td>
563
			<td class="center">-</td>
564
			<td class="center">X</td>
565
			<td class="right_cell"> </td>
566
		</tr>
567
		<tr class="gradeX">
568
			<td class="left_cell"> </td>
569
			<td>Misc</td>
570
			<td>Lynx</td>
571
			<td>Text only</td>
572
			<td class="center">-</td>
573
			<td class="center">X</td>
574
			<td class="right_cell"> </td>
575
		</tr>
576
		<tr class="gradeC">
577
			<td class="left_cell"> </td>
578
			<td>Misc</td>
579
			<td>IE Mobile</td>
580
			<td>Windows Mobile 6</td>
581
			<td class="center">-</td>
582
			<td class="center">C</td>
583
			<td class="right_cell"> </td>
584
		</tr>
585
		<tr class="gradeC">
586
			<td class="left_cell"> </td>
587
			<td>Misc</td>
588
			<td>PSP browser</td>
589
			<td>PSP</td>
590
			<td class="center">-</td>
591
			<td class="center">C</td>
592
			<td class="right_cell"> </td>
593
		</tr>
594
		<tr class="gradeU">
595
			<td class="left_cell"> </td>
596
			<td>Other browsers</td>
597
			<td>All others</td>
598
			<td>-</td>
599
			<td class="center">-</td>
600
			<td class="center">U</td>
601
			<td class="right_cell"> </td>
602
		</tr>
603
	</tbody>
604
	<tfoot>
605
		<tr>
606
			<th></th>
607
			<th>Rendering engine</th>
608
			<th>Browser</th>
609
			<th>Platform(s)</th>
610
			<th>Engine version</th>
611
			<th>CSS grade</th>
612
			<th></th>
613
		</tr>
614
	</tfoot>
615
</table>
616
		</div>
617
	</body>
618
</html>