{"id":24,"date":"2007-02-22T23:13:32","date_gmt":"2007-02-22T22:13:32","guid":{"rendered":"http:\/\/schuerig.de\/michael\/blog\/index.php\/2007\/02\/22\/size-dependent-layout\/"},"modified":"2021-11-24T09:20:09","modified_gmt":"2021-11-24T08:20:09","slug":"size-dependent-layout","status":"publish","type":"post","link":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/2007\/02\/22\/size-dependent-layout\/","title":{"rendered":"Looking good at any (font and window) size"},"content":{"rendered":"

Make your layout look good a different screen and font sizes.<\/p>\n

What it looks like<\/h3>\n

Example 1<\/a>,
\nExample 2<\/a>.<\/p>\n

Here’s what the form example (example 1) is supposed<\/em> to look like.<\/p>\n

At 1024 x 768 pixels, the navigation links and Save button are positioned fixed in a column to the left.<\/p>\n

\"large<\/p>\n

At 800 x 600 pixels, the navigation links are only shown on hover over the icon in the top-left corner; the Save button is tucked under the form itself.<\/p>\n

\"large
\"large<\/p>\n

What you need<\/h3>\n

Grab layout.js<\/a>.<\/p>\n

You also need Prototype.js<\/a>.<\/p>\n

What you need to do<\/h3>\n

Include the scripts in your page.<\/p>\n

<\/p>\n

\r\n<script src=\"javascripts\/prototype.js\" type=\"text\/javascript\"><\/script>\r\n<script src=\"javascripts\/layout.js\" type=\"text\/javascript\"><\/script>\r\n<\/pre>\n
<\/code><\/p>\n
Activate layout switching in the head of your page<\/p>\n
<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n\/\/<![CDATA[\r\nEvent.observe(window, 'load', function() {\r\n  Layout.initialize({observeFontSize: true});\r\n});\r\n\/\/]]>\r\n<\/script>\r\n<\/pre>\n
<\/code><\/p>\n
Most likely, the default size thresholds set in layout.js<\/code> won’t fit your needs. See the file itself for how to set them to different values.<\/p>\n
(Re-)Write your stylesheets so that they make use of the size information. As an example, here’s the CSS I use for styling the navigation list on the two example pages.<\/p>\n
<\/p>\n
\r\n#navitrigger {\r\n  display: none;\r\n}\r\n\r\n#navigation {\r\n  position: fixed;\r\n  top: 0em;\r\n  left: 0em;\r\n  margin: 1em;\r\n  padding: 0;\r\n  text-align: right;\r\n  z-index: 10;\r\n}\r\n\r\n#navigation ul {\r\n  width: 10em;\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style-type: none;\r\n}\r\n\r\n#navigation li {\r\n  font-weight: bold;\r\n}\r\n\r\n#navigation .current {\r\n  display: block;\r\n  width: 100%;\r\n  color: #bbb;\r\n  background-color: #ffecac;\r\n}\r\n\r\n#navigation li.admin {\r\n  border-top: 1px solid #bbb;\r\n}\r\n\r\n#navigation li a {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n\r\nbody.small #navigation {\r\n  position: absolute;\r\n  text-align: left;\r\n  z-index: 30;\r\n}\r\n\r\nbody.small #navigation ul {\r\n  display: none;\r\n  background: #fff;\r\n  border: 1px solid #888;\r\n}\r\n\r\nbody.small #navitrigger {\r\n  display: block;\r\n  font-size: 150%;\r\n  font-weight: bold;\r\n}\r\n\r\nbody.small #navigation:hover ul {\r\n  display: block;\r\n}\r\n<\/pre>\n
<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"
Make your layout look good a different screen and font sizes. What it looks like Example 1, Example 2. Here’s what the form example (example 1) is supposed to look like. At 1024 x 768 pixels, the navigation links and … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,8],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-css","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":1,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":142,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions\/142"}],"wp:attachment":[{"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}