right menu position fixed (does not move with scroll)
Project: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/commit/c0c59280 Tree: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/tree/c0c59280 Diff: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/diff/c0c59280 Branch: refs/heads/master Commit: c0c59280d5b502d570f47a96f5d455feeb6f1e00 Parents: 36f7c92 Author: Alex Heneveld <[email protected]> Authored: Mon Jan 12 02:00:12 2015 +0000 Committer: Alex Heneveld <[email protected]> Committed: Tue Jan 13 15:36:30 2015 +0000 ---------------------------------------------------------------------- docs/_layouts/website-normal.html | 30 ++++++++++++++++++++++++++++-- docs/style/css/base.scss | 1 + 2 files changed, 29 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/c0c59280/docs/_layouts/website-normal.html ---------------------------------------------------------------------- diff --git a/docs/_layouts/website-normal.html b/docs/_layouts/website-normal.html index ba6e9b8..f924d33 100644 --- a/docs/_layouts/website-normal.html +++ b/docs/_layouts/website-normal.html @@ -22,14 +22,39 @@ # menu_customizations can be used, including force_inactive to prevent highlighting layout: website-base --- -<div class="container"> +<div class="container" id="main_container"> <div class="row"> <div class="col-md-9"> <h1>{{ page.title }}</h1> {{ content }} </div> + <div class="col-md-3"> - <div class="list-group side-menu"> +<script> +{% comment %} +the menu is css position:fixed so won't scroll; +but also it will not obey its parents width. +set the width on load and on resize. +{% endcomment %} +sidemenu_x_sizer=function(){ $('#side-menu').width($('#side-menu').parent().find('#width_reference').outerWidth()); }; +$(sidemenu_x_sizer); +$(window).resize(sidemenu_x_sizer); + +{% comment %} +also ensure the y-height of the screen is big enough, else revert to non-floating menu +{% endcomment %} +sidemenu_y_nonfloater=function(){ + if ($('#side-menu').outerHeight(true) + $('#header').outerHeight(true) + $('#footer').outerHeight(true) > window.innerHeight) { + $('#side-menu').css('position', 'inherit'); + } else { + // restore if screen has grown + $('#side-menu').css('position', 'fixed'); + } +}; +$(sidemenu_y_nonfloater); +$(window).resize(sidemenu_y_nonfloater); +</script> + <div class="list-group side-menu" id="side-menu"> {% comment %} Case 1) If we're the landing page show nothing. @@ -83,6 +108,7 @@ layout: website-base {% endunless %} </div> + <div id="width_reference"></div> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/c0c59280/docs/style/css/base.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/base.scss b/docs/style/css/base.scss index a585100..d6f8b6a 100644 --- a/docs/style/css/base.scss +++ b/docs/style/css/base.scss @@ -154,6 +154,7 @@ a[id]:empty, a[name]:empty { .side-menu { font-size: 14px; font-weight: 400; + position: fixed; h4.with_following { margin-bottom: 0; }
