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
|
<!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/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.8"/>
<title>Dillo: Fixed positions</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://www.dillo.org/dw/html/jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 56px;">
<td style="padding-left: 0.5em;">
<div id="projectname">Dillo
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.8 -->
<div id="navrow1" class="tabs">
<ul class="tablist">
<li><a href="index.html"><span>Main Page</span></a></li>
<li class="current"><a href="pages.html"><span>Related Pages</span></a></li>
<li><a href="namespaces.html"><span>Namespaces</span></a></li>
<li><a href="annotated.html"><span>Classes</span></a></li>
<li><a href="files.html"><span>Files</span></a></li>
</ul>
</div>
</div><!-- top -->
<div class="header">
<div class="headertitle">
<div class="title">Fixed positions </div> </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><p>In some cases, widgets or widget content must be positioned relative to the viewport. As in the CSS specification, these positions will be called "fixed positions". This must not be confused with "fixedly
positioned elements" (see <a class="el" href="dw-out-of-flow.html">Handling Elements Out Of Flow</a>), which are a special case of fixed positions.</p>
<h1>Applications </h1>
<h2>As defined by CSS </h2>
<ul>
<li>"position: fixed"; see <a class="el" href="dw-out-of-flow.html">Handling Elements Out Of Flow</a>.</li>
<li>"background-attachment: fixed"; see <a class="el" href="dw-images-and-backgrounds.html">Images and Backgrounds in Dw</a>.</li>
</ul>
<h2>Idea for tables </h2>
<p>Often, tables have a header, which contains informations necessary to interpret the columns in the table body. For this, HTML defines the elements <thead> and <tbody> <sup><a href="dw-fixed-positions.html#note-table-footer" id="ref-table-footer">[1]</a></sup>.</p>
<p>For large tables, the problem occurs that the table header gets out of the reader's view. In paged media, where a large table covers multiple pages, this is often solved by <em>repeating</em> the table header on each page occupied by the table. When using a viewport, a table larger than the vieport could be displayed like this:</p>
<ol type="1">
<li>If the top of the table is within the viewport, show the table header at the usual position.</li>
<li>As soon as top of the table gets above the top border of the viewport, keep the table header at the viewport top, so that it is still visible (this means, it moves down, relative to the canvas*). This way, the header is still visible, so our objective is achieved.</li>
<li>When scrolling further down, at some point the table body gets out of the viewport again, and so should the table header.</li>
</ol>
<p>(Some images would be nice.)</p>
<p>These ideas should be considered when developing a design for fixed positions.</p>
<h1>Design sketch </h1>
<p>[...]</p>
<hr/>
<p><sup><a href="dw-fixed-positions.html#ref-table-footer" id="note-table-footer">[1]</a></sup> ... and also <tfoot>, which is not discussed here, for reasons of simplicity. However, it is obvious that <tfoot> should be dealt with in an analogue way as <thead>. </p>
</div></div><!-- contents -->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Sat May 28 2016 11:47:43 for Dillo by  <a href="http://www.doxygen.org/index.html">
<img class="footer" src="doxygen.png" alt="doxygen"/>
</a> 1.8.8
</small></address>
</body>
</html>
|
