{"id":104,"date":"2008-07-31T04:20:20","date_gmt":"2008-07-31T11:20:20","guid":{"rendered":"http:\/\/wellmedicated.com\/?p=104"},"modified":"2009-01-30T14:37:31","modified_gmt":"2009-01-30T21:37:31","slug":"fold-control-browser-bottom-alignment","status":"publish","type":"post","link":"http:\/\/wellmedicated.com\/fold-control-browser-bottom-alignment\/","title":{"rendered":"Fold Control: Browser-Bottom Alignment"},"content":{"rendered":"

The original wellmedicated layout, before it was recently rebooted,\u00a0 had a rather high-concept design.\u00a0 The basic idea being: “every website aligns to the top of the browser, I want mine to align to the bottom”<\/strong>…arrogant, I know.\u00a0 Not surprisingly, this was easier said than done.\u00a0 However, I did manage to figure out a way to pull it off by modifying some javascript from this a list apart article<\/a>.<\/p>\n

The final result is a script that detects the height of your browser and the height of your content “above the fold” (in pixels) and then offsets said content the difference of the two.<\/p>\n

The Preview<\/h4>\n

Before we proceed, you should probably test drive the script and see if it’s right for you.<\/p>\n

See the demo in action<\/a><\/strong><\/p>\n

The HTML<\/h4>\n

This is pretty run-of-the-mill HTML, nothing too crazy.\u00a0 The main thing worth noting is the DIV with the ID of “spacer”<\/em>.\u00a0 This is basically an empty DIV that will bump the actual content down.<\/p>\n

The DIV’s “abovefold”<\/em> and “belowfold”<\/em> are the containers you place your content in<\/strong> that you want above and below the fold* respectively.<\/p>\n

<body>\r\n<div id=\"spacer\"><!-- --><\/div>\r\n<div id=\"abovefold\">\r\n     <div id=\"top-content\">\r\n          <p>Above the fold text goes here.<\/p>\r\n     <\/div>\r\n<\/div>\r\n<div id=\"belowfold\">\r\n     <div id=\"bottom-content\">\r\n          <p>Below the fold text goes here.<\/p>\r\n     <\/div>\r\n<\/div>\r\n<\/body><\/code><\/pre>\n
*The fold <\/em>being the division of what you see and what you have to scroll to see when you load any website.<\/p>\n
The CSS<\/h4>\n
The #abovefold and #belowfold DIVs are both absolute positioned<\/strong> with widths of 100%<\/strong>.\u00a0 This fixes a problem I was having with centering the content DIVs.<\/p>\n
The #top-content and #bottom-content DIVs are for example purposes only, you may remove or rename these to whatever you like<\/strong>.<\/p>\n
Background colors that are used are just to visually represent the effect and are by no means necessary<\/strong>.<\/p>\n
#abovefold {\r\nwidth: 100%; \r\nposition: absolute;\r\nbackground-color: #ddd;\r\n}\r\n\r\n#belowfold {\r\nwidth: 100%; \r\nposition: absolute;\r\nbackground-color: #aaa;\r\n}\r\n\r\n#top-content { \r\nmargin: 0 auto; \r\nwidth: 400px; \r\nbackground-color: #ccc;\r\n}\r\n\r\n#bottom-content { \r\nmargin: 0 auto; \r\nwidth: 400px; \r\nbackground-color: #999;\r\n}<\/code><\/pre>\n
The Javascript<\/h4>\n
I must confess that though I can feel my way around, I am hardly a javascript programmer.\u00a0 I wouldn’t be surprised if there was a way to achieve this effect with 2 lines of code – but I googled my fingers off trying to find such a solution and came up empty-handed.<\/p>\n
The bulk of this code was provided from the a list apart article<\/a> I mentioned earlier with some modifications and tweaks by yours truly.<\/p>\n
<!--\r\nfunction getWindowHeight() {\r\n  var windowHeight = 0;\r\n  if (typeof(window.innerHeight) == 'number') {\r\n\t  windowHeight = window.innerHeight;\r\n  }\r\n  else {\r\n      if (document.documentElement && document.documentElement.clientHeight) {\r\n\t\t  windowHeight = document.documentElement.clientHeight;\r\n\t  }\r\n\t  else {\r\n\t\t  if (document.body && document.body.clientHeight) {\r\n\t\t\t  windowHeight = document.body.clientHeight;\r\n\t\t  }\r\n\t  }\r\n  }\r\n  return windowHeight;\r\n}\r\nfunction setAbovefold() {\r\n  if (document.getElementById) {\r\n\t  var windowHeight = getWindowHeight();\r\n\t  if (windowHeight > 0) {\r\n\t\t  var contentHeight = document.getElementById('spacer').offsetHeight;\r\n\t\t  var abovefoldElement = document.getElementById('abovefold');\r\n\t\t  var belowfoldElement = document.getElementById('belowfold');\r\n\t\t  var abovefoldHeight  = abovefoldElement.offsetHeight;\r\n\t\t  if (windowHeight - (contentHeight + abovefoldHeight) >= 0) {\r\n\t\t\t  abovefoldElement.style.position = 'absolute';\r\n\t\t\t  abovefoldElement.style.top = (windowHeight - abovefoldHeight) + 'px';\r\n\t\t\t  belowfoldElement.style.position = 'absolute';\r\n\t\t\t  belowfoldElement.style.top = (windowHeight) + 'px';\r\n\t\t  }\r\n\t\t  else {\r\n\t\t\t  abovefoldElement.style.position = 'static';\r\n\t\t\t  belowfoldElement.style.position = 'static';\r\n\t\t  }\r\n\t  }\r\n  }\r\n}\r\nwindow.onload = function() {\r\n  setAbovefold();\r\n}\r\nwindow.onresize = function() {\r\n  setAbovefold();\r\n}\r\n\/\/--><\/code><\/pre>\n
The Source Files<\/h4>\n
I know, I know.\u00a0 Enough Jibba-jabba already!\u00a0 Here’s the sources files of what this mess of an article is all about.\u00a0 Download ’em, muck around with ’em and improve upon ’em.<\/p>\n
Download the source files here<\/strong><\/a>.<\/p>\n
This has been cross-browser tested on Firefox 2+, IE 6+, Safari 3+ & Opera 9+.\u00a0 In the unlikely event of a browser resizing, everything will realign automagically.\u00a0 If there is too much content<\/strong> to fit above the fold, then the effect is lost and the page renders as per usual.<\/p>\n","protected":false},"excerpt":{"rendered":"
The original wellmedicated layout, before it was recently rebooted,\u00a0 had a rather high-concept design.\u00a0 The basic idea being: “every website aligns to the top of the browser, I want mine to align to the bottom”…arrogant, I know.\u00a0 Not surprisingly, this was easier said than done.\u00a0 However, I did manage to figure out a way to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[9],"tags":[],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phOWv-1G","_links":{"self":[{"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/posts\/104"}],"collection":[{"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":18,"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":1234,"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/posts\/104\/revisions\/1234"}],"wp:attachment":[{"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/media?parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/categories?post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wellmedicated.com\/wp-json\/wp\/v2\/tags?post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}