OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <style> | |
Toscano
2012/11/02 19:30:42
Can you wrap the <style> and <script> elements in
Toscano
2012/11/02 19:30:42
Can you alpha sort all of the CSS properties withi
Vitaly Buka (NO REVIEWS)
2012/11/02 21:28:14
Done.
Vitaly Buka (NO REVIEWS)
2012/11/02 21:28:14
Done.
| |
3 body { | |
4 margin: 0px; | |
5 height: 50.0000px; | |
Toscano
2012/11/02 19:30:42
Why all the extra 0s after the decimal?
Vitaly Buka (NO REVIEWS)
2012/11/02 21:28:14
Done.
| |
6 width: 50.0000px; | |
7 } | |
8 .row { | |
9 display: table-row; | |
10 vertical-align: inherit; | |
11 } | |
12 #header, #footer { | |
13 display: table; | |
14 table-layout:fixed; | |
15 width: inherit; | |
16 } | |
17 #header { | |
18 height: 5%; | |
19 vertical-align: top; | |
20 } | |
21 #content { | |
22 height: 3%; | |
23 } | |
24 #footer { | |
25 height: 92%; | |
26 vertical-align: bottom; | |
27 } | |
28 .text { | |
29 !border-style: solid; | |
30 display: table-cell; | |
31 vertical-align: inherit; | |
32 font-size: 14px; | |
33 font-family: Sans; | |
34 white-space: nowrap; | |
35 padding-right: 0.5cm; | |
36 padding-left: 0.5cm; | |
37 } | |
38 #page_number { | |
39 text-align: right; | |
40 } | |
41 #title { | |
42 text-align: center; | |
43 } | |
44 #title, #url { | |
45 text-overflow: ellipsis; | |
46 overflow: hidden; | |
47 } | |
48 #title, #date { | |
49 padding-top: 0.5cm; | |
50 padding-bottom: 0cm; | |
51 } | |
52 #page_number, #url { | |
53 padding-bottom: 0.5cm; | |
54 padding-top: 0cm; | |
55 } | |
56 </style> | |
57 <script> | |
Toscano
2012/11/02 19:30:42
Java script should use single quotes, please be co
Vitaly Buka (NO REVIEWS)
2012/11/02 21:28:14
Done.
| |
58 | |
59 function $(o) {return document.getElementById(o);} | |
Toscano
2012/11/02 19:30:42
Instead of using this, plz use document.querySelec
Vitaly Buka (NO REVIEWS)
2012/11/02 21:28:14
Done.
| |
60 | |
61 function getTextSpan(id) { | |
62 var element = $(id); | |
63 if (element.getElementsByTagName("span").length == 0) { | |
64 span = document.createElement('span'); | |
65 element.appendChild(span); | |
66 } | |
67 return element.getElementsByTagName("span")[0]; | |
68 } | |
69 | |
70 function pixels(value) { | |
71 return value + "px"; | |
72 } | |
73 | |
74 function setup(options) { | |
75 texts = document.getElementsByClassName("text"); | |
76 for (var i = 0; i < texts.length; ++i) | |
77 texts[i].style.fontSize = pixels(options["fontSize"]); | |
Toscano
2012/11/02 19:30:42
Instead of iterating over all of the text elements
Vitaly Buka (NO REVIEWS)
2012/11/02 21:28:14
Done.
| |
78 document["body"].style.height = pixels(options["height"]); | |
Toscano
2012/11/02 19:30:42
I believe you can set offsetHeight and offsetWidth
Vitaly Buka (NO REVIEWS)
2012/11/02 21:28:14
Does not work.
On 2012/11/02 19:30:42, Toscano wro
| |
79 document["body"].style.width = pixels(options["width"]); | |
80 $("header").style.height = pixels(options["topMargin"]); | |
81 var content_height = | |
82 options["height"] - options["topMargin"] - options["bottomMargin"]; | |
83 $("content").style.height = pixels(content_height); | |
84 $("footer").style.height = pixels(options["bottomMargin"]); | |
85 | |
86 getTextSpan("date").innerText = options["date"]; | |
Toscano
2012/11/02 19:30:42
Please use querySelector instead of this method.
Vitaly Buka (NO REVIEWS)
2012/11/02 21:28:14
Done.
| |
87 getTextSpan("title").innerText = options["title"]; | |
88 $("date").style.width = pixels(getTextSpan("date").offsetWidth); | |
89 | |
90 getTextSpan("url").innerText = options["url"]; | |
91 getTextSpan("page_number").innerText = options["pageNumber"]; | |
92 $("page_number").style.width = pixels(getTextSpan("page_number").offsetWidth); | |
93 | |
94 // Hide text if it didn't fit into expected margins. | |
95 if ($("header").offsetHeight > options["topMargin"] + 1 || | |
96 $("footer").offsetHeight > options["bottomMargin"] + 1) { | |
97 $("header").style.display = "none"; | |
98 $("footer").style.display = "none"; | |
99 } | |
100 } | |
101 </script> | |
102 <body> | |
103 <div id="header"> | |
104 <div class="row"> | |
105 <div id="date" class="text"></div> | |
106 <div id="title" class="text"></div> | |
107 </div> | |
108 </div> | |
109 <div id="content"> | |
110 </div> | |
111 <div id="footer"> | |
112 <div class="row"> | |
113 <div id="url" class="text"></div> | |
114 <div id="page_number" class="text"></div> | |
115 </div> | |
116 </div> | |
117 </body> | |
118 </html> | |
OLD | NEW |