Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 20cf2a91 authored by Scott Main's avatar Scott Main
Browse files

update sticky nav to sync with sidenav

and build the breadcrumbs dynamically

Change-Id: Ib008d4606a8e82c468be75c051a8a9e623dc7c22
parent 46b443ac
Loading
Loading
Loading
Loading
+162 −186
Original line number Diff line number Diff line
@@ -98,7 +98,8 @@ body {
#devdoc-nav.fixed {
  position: fixed;
  margin:0;
  top: 20px; }
  top: 65px; /* sticky-header height + 20px gutter */
}

#devdoc-nav span.small {
  font-size:12px;
@@ -1365,8 +1366,7 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00));
  .training-nav-top, .training-nav-bottom,
  #doc-col .content-footer,
  .nav-x, .nav-y,
  .paging-links,
  a.totop {
  .paging-links {
      display: none !important;
  }

@@ -1632,168 +1632,6 @@ Header, Login, Nav-X, Search
  color: #33b5e5
}

/************ STICKY NAV BAR ******************/

#header-wrapper {
  background: #f9f9f9;
  margin: 0 -10px 0 -10px;
  padding: 31px 10px 0px 10px;
  position: relative;
}
#header-wrapper #nav-x div.wrap {
  max-width: 940px;
  height: 38px;
}
#header-wrapper #nav-x ul.nav-x li {
  margin-right: 36px !important;
  margin-top: 5px;
  margin-bottom: 0px;
  height: 30px;
}
#header-wrapper #nav-x > div.wrap ul.nav-x li.active  {
  color: #669900;
  border-bottom: 3px solid #669900;
}
#header-wrapper #nav-x > div.wrap ul.nav-x li.active a {
  color: #669900;
}
#header-wrapper #nav-x > div.wrap ul.nav-x a {
  font-size: 14.5px;
}
#header-wrapper .developer-console-btn {
  float: right;
  background: #fefefe;
  border-radius: 4px;
  padding: 8px 14px;
  box-shadow: 1px 1px 0px #7a7a7a;
  font-size: 14px;
  margin-top: -6px;
  cursor: pointer;
  color: #464646;
  margin-right: 20px;
}
/* not currently used */
#header-wrapper .shadow {
  width: 1034px;
  height: 4px;
  position: absolute;
  left: 50%;
  margin-left: -517px;
  bottom: -4px;
  background-image: url(../images/header-shadow.png);
}

#context {
  clear: both;
  padding-top: 14px;
}
#context .breadcrumb {
  float: left;
  margin-bottom: 10px;
}
#context .util {
  float: right;
  margin-right: 20px;
}

.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.breadcrumb li {
  float: left;
  padding: 0 20px 0 0;
  color: #000;
}
.breadcrumb li a {
  color: #000;
}
.breadcrumb li:after {
  content: url(../images/breadcrumb.png);
  position: relative;
  top: 1px;
  left: 10px;
  width: 5px;
  height: 10px;
}
.breadcrumb li.current {
  font-weight: 700;
}
.breadcrumb li.current:after {
  display: none;
}

/* Sticky Nav overrides */
.sticky-menu {
  position: fixed;
  width: 940px;
  height: 0px;
  z-index: 51;
  top: 12px;
}
#sticky-header {
  display: none;
  padding: 0 10px;
  position: fixed;
  background: #f9f9f9;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 45px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #a5c43a;
  z-index: 50;
  opacity: 0;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
#sticky-header.design {
  border-bottom: 1px solid #33b5e5;
}
#sticky-header.develop {
  border-bottom: 1px solid #F80;
}
#sticky-header.distribute {
  border-bottom: 1px solid #9C0;
}
#sticky-header > div {
  overflow: hidden;
  *zoom: 1;
  width: 940px;
  margin: 0 auto;
  clear: both;
  padding-top: 9px;
}
#sticky-header > div .logo {
  float: left;
  width: 26px;
  height: 25px;
  background: url(../images/dac_logo.png);
  z-index: 52;
  position: relative;
}
#sticky-header > div .top {
  float: left;
  width: 38px;
  height: 38px;
  position: relative;
  background: url(../images/styles/gototop.png);
  z-index: 52;
}
#sticky-header > div .breadcrumb {
  float: left;
  padding: 0 0 0 10px;
  border-left: 1px solid #d2d2d2;
  line-height: 24px;
  font-size: 14px;
  position: relative;
  top: 0px;
  z-index: 52;
}

/* --------------------------------------------------------------------------
Buttons
@@ -3034,26 +2872,6 @@ div.design-announce p {
  margin:0 0 10px;
}

#devdoc-nav a.totop {
  display:block;
  top:0;
  width:inherit;
  background: transparent url(../images/styles/gototop.png) no-repeat scroll 50% 50%;
  text-indent:-9999em;
}
#devdoc-nav a.totop {
  position:fixed;
  display:none;
}
#devdoc-nav a.totop:hover {
  background-color:#33B5E5;
}

.content-footer a.totop {
  text-transform:uppercase;
  line-height:30px;
}

.expandable {
  height:34px;
  padding-left:20px;
@@ -4118,13 +3936,171 @@ EndColorStr='#ececec');
  z-index:100;
}

}




/************ STICKY NAV BAR ******************/

#header-wrapper {
  background: #f9f9f9;
  margin: 0 -10px 0 -10px;
  padding: 31px 10px 0px 10px;
  position: relative;
}
#header-wrapper #nav-x div.wrap {
  max-width: 940px;
  height: 38px;
}
#header-wrapper #nav-x ul.nav-x li {
  margin-right: 36px !important;
  margin-top: 5px;
  margin-bottom: 0px;
  height: 30px;
}
#header-wrapper #nav-x > div.wrap ul.nav-x li.active  {
  color: #669900;
  border-bottom: 3px solid #669900;
}
#header-wrapper #nav-x > div.wrap ul.nav-x li.active a {
  color: #669900;
}
#header-wrapper #nav-x > div.wrap ul.nav-x a {
  font-size: 14.5px;
}
#header-wrapper .developer-console-btn {
  float: right;
  background: #fefefe;
  border-radius: 4px;
  padding: 8px 14px;
  box-shadow: 1px 1px 0px #7a7a7a;
  font-size: 14px;
  margin-top: -6px;
  cursor: pointer;
  color: #464646;
  margin-right: 20px;
}
/* not currently used */
#header-wrapper .shadow {
  width: 1034px;
  height: 4px;
  position: absolute;
  left: 50%;
  margin-left: -517px;
  bottom: -4px;
  background-image: url(../images/header-shadow.png);
}

#context {
  clear: both;
  padding-top: 14px;
}
#context .breadcrumb {
  float: left;
  margin-bottom: 10px;
}
#context .util {
  float: right;
  margin-right: 20px;
}

.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.breadcrumb li {
  float: left;
  padding: 0 20px 0 0;
  color: #000;
  white-space: nowrap;
}
.breadcrumb li a {
  color: #000;
}
.breadcrumb li:after {
  content: url(../images/breadcrumb.png);
  position: relative;
  top: 1px;
  left: 10px;
  width: 5px;
  height: 10px;
}
.breadcrumb li.current {
  font-weight: 700;
}
.breadcrumb li.current:after {
  display: none;
}

/* Sticky Nav overrides */
.sticky-menu {
  position: fixed;
  width: 940px;
  height: 0px;
  z-index: 51;
  top: 12px;
}
#sticky-header {
  display: none;
  padding: 0 10px;
  position: fixed;
  background: #f9f9f9;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 45px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #a5c43a;
  z-index: 50;
}
#sticky-header.design {
  border-bottom: 1px solid #33b5e5;
}
#sticky-header.develop {
  border-bottom: 1px solid #F80;
}
#sticky-header.distribute {
  border-bottom: 1px solid #9C0;
}
#sticky-header > div {
  overflow: hidden;
  *zoom: 1;
  width: 940px;
  margin: 0 auto;
  clear: both;
  padding-top: 9px;
}
#sticky-header > div .logo {
  float: left;
  width: 26px;
  height: 25px;
  background: url(../images/dac_logo.png);
  z-index: 52;
  position: relative;
}
#sticky-header > div .top {
  float: left;
  width: 38px;
  height: 38px;
  position: relative;
  background: url(../images/styles/gototop.png);
  z-index: 52;
}
#sticky-header > div .breadcrumb {
  float: left;
  padding: 0 0 0 10px;
  border-left: 1px solid #d2d2d2;
  line-height: 24px;
  font-size: 14px;
  position: relative;
  top: 0px;
  z-index: 52;
}


}



+20 −9
Original line number Diff line number Diff line
@@ -170,7 +170,7 @@ body {
  max-width: 100%;
}

#nav-x .wrap,
#header-wrapper #nav-x div.wrap,
#searchResults.wrap {
    max-width:100%;
}
@@ -184,7 +184,18 @@ body {
  left:20px; /* !important ... for IE i think */
}

#sticky-header {
  padding: 0 20px;
}

#sticky-header > div {
  width: 100%;
}

.sticky-menu {
  width:100%;
  left:-20px;
}


}
+86 −100
Original line number Diff line number Diff line
@@ -221,6 +221,7 @@ $(document).ready(function() {
  // and highlight the sidenav
  mPagePath = pagePath;
  highlightSidenav();
  buildBreadcrumbs();

  // set up prev/next links if they exist
  var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]');
@@ -405,70 +406,6 @@ false; // navigate across topic boundaries only in design docs
  });


  // Set up fixed navbar
  var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll
  $(window).scroll(function(event) {
    if ($('#side-nav').length == 0) return;
    if (event.target.nodeName == "DIV") {
      // Dump scroll event if the target is a DIV, because that means the event is coming
      // from a scrollable div and so there's no need to make adjustments to our layout
      return;
    }
    var scrollTop = $(window).scrollTop();
    var headerHeight = $('#header').outerHeight();
    var subheaderHeight = $('#nav-x').outerHeight();
    var searchResultHeight = $('#searchResults').is(":visible") ?
                             $('#searchResults').outerHeight() : 0;
    var totalHeaderHeight = headerHeight + subheaderHeight + searchResultHeight;
    // we set the navbar fixed when the scroll position is beyond the height of the site header...
    var navBarShouldBeFixed = scrollTop > totalHeaderHeight;
    // ... except if the document content is shorter than the sidenav height.
    // (this is necessary to avoid crazy behavior on OSX Lion due to overscroll bouncing)
    if ($("#doc-col").height() < $("#side-nav").height()) {
      navBarShouldBeFixed = false;
    }

    var scrollLeft = $(window).scrollLeft();
    // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match
    if (navBarIsFixed && (scrollLeft != prevScrollLeft)) {
      updateSideNavPosition();
      prevScrollLeft = scrollLeft;
    }

    // Don't continue if the header is sufficently far away
    // (to avoid intensive resizing that slows scrolling)
    if (navBarIsFixed && navBarShouldBeFixed) {
      return;
    }

    if (navBarIsFixed != navBarShouldBeFixed) {
      if (navBarShouldBeFixed) {
        // make it fixed
        var width = $('#devdoc-nav').width();
        $('#devdoc-nav')
            .addClass('fixed')
            .css({'width':width+'px'})
            .prependTo('#body-content');
        // add neato "back to top" button
        $('#devdoc-nav a.totop').css({'display':'block','width':$("#nav").innerWidth()+'px'});

        // update the sidenaav position for side scrolling
        updateSideNavPosition();
      } else {
        // make it static again
        $('#devdoc-nav')
            .removeClass('fixed')
            .css({'width':'auto','margin':''})
            .prependTo('#side-nav');
        $('#devdoc-nav a.totop').hide();
      }
      navBarIsFixed = navBarShouldBeFixed;
    }

    resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance
  });


  var navBarLeftPos;
  if ($('#devdoc-nav').length) {
    setNavBarLeftPos();
@@ -613,6 +550,22 @@ function initExpandableNavItems(rootTag) {
  });
}


/** Create the list of breadcrumb links in the sticky header */
function buildBreadcrumbs() {
  var $breadcrumbUl =  $("#sticky-header ul.breadcrumb");
  // Add the secondary horizontal nav item, if provided
  var $selectedSecondNav = $("div#nav-x ul.nav-x a.selected").clone().removeClass("selected");
  if ($selectedSecondNav.length) {
    $breadcrumbUl.prepend($("<li>").append($selectedSecondNav))
  }
  // Add the primary horizontal nav
  var $selectedFirstNav = $("div#header-wrap ul.nav-x a.selected").clone().removeClass("selected");
  $breadcrumbUl.prepend($("<li>").append($selectedFirstNav));
}



/** Highlight the current page in sidenav, expanding children as appropriate */
function highlightSidenav() {
  // if something is already highlighted, undo it. This is for dynamic navigation (Samples index)
@@ -725,9 +678,8 @@ function resizeNav(delay) {
  // Then figure out based on scroll position whether the header is visible
  var windowHeight = $window.height();
  var scrollTop = $window.scrollTop();
  var headerHeight = $('#header').outerHeight();
  var subheaderHeight = $('#nav-x').outerHeight();
  var headerVisible = (scrollTop < (headerHeight + subheaderHeight));
  var headerHeight = $('#header-wrapper').outerHeight();
  var headerVisible = scrollTop < stickyTop;

  // get the height of space between nav and top of window.
  // Could be either margin or top position, depending on whether the nav is fixed.
@@ -737,7 +689,7 @@ function resizeNav(delay) {
  // Depending on whether the header is visible, set the side nav's height.
  if (headerVisible) {
    // The sidenav height grows as the header goes off screen
    navHeight = windowHeight - (headerHeight + subheaderHeight - scrollTop) - topMargin;
    navHeight = windowHeight - (headerHeight - scrollTop) - topMargin;
  } else {
    // Once header is off screen, the nav height is almost full window height
    navHeight = windowHeight - topMargin;
@@ -929,12 +881,12 @@ function writeCookie(cookie, val, section, expiration) {
/* 
 * Displays sticky nav bar on pages when dac header scrolls out of view 
 */

var stickyTop;
(function() {
  $(document).ready(function() {

    // Sticky nav position
    var stickyTop = $('#header-wrapper').outerHeight();
    stickyTop = $('#header-wrapper').outerHeight() - $('#sticky-header').outerHeight();
    var sticky = false;
    var hiding = false;
    var $stickyEl = $('#sticky-header');
@@ -943,26 +895,62 @@ function writeCookie(cookie, val, section, expiration) {
    var lastScroll = 0;
    var autoScrolling = false;

    var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll

    $(window).scroll(function() {
      // Exit if there's no sidenav
      if ($('#side-nav').length == 0) return;
      // Exit if the mouse target is a DIV, because that means the event is coming
      // from a scrollable div and so there's no need to make adjustments to our layout
      if (event.target.nodeName == "DIV") {
        return;
      }


      var top = $(window).scrollTop();
      // we set the navbar fixed when the scroll position is beyond the height of the site header...
      var shouldBeSticky = top >= stickyTop;
      // ... except if the document content is shorter than the sidenav height.
      // (this is necessary to avoid crazy behavior on OSX Lion due to overscroll bouncing)
      if ($("#doc-col").height() < $("#side-nav").height()) {
        shouldBeSticky = false;
      }

      if (sticky && top < stickyTop) {
      // Don't continue if the header is sufficently far away
      // (to avoid intensive resizing that slows scrolling)
      if (sticky && shouldBeSticky) {
        return;
      }

      // Account for horizontal scroll
      var scrollLeft = $(window).scrollLeft();
      // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match
      if (navBarIsFixed && (scrollLeft != prevScrollLeft)) {
        updateSideNavPosition();
        prevScrollLeft = scrollLeft;
      }

      // If sticky header visible and position is now near top, hide sticky
      if (sticky && !shouldBeSticky) {
        sticky = false;
        hiding = true;
        $stickyEl.css({'opacity': 0});
        setTimeout(function() {
        // make the sidenav static again
        $('#devdoc-nav')
            .removeClass('fixed')
            .css({'width':'auto','margin':''})
            .prependTo('#side-nav');
        // delay hide the sticky
        $menuEl.removeClass('sticky-menu');
          $stickyEl.hide();
        $stickyEl.fadeOut(250);
        hiding = false;
        }, 250);
      } else if (!sticky && top >= stickyTop) {

        // update the sidenaav position for side scrolling
        updateSideNavPosition();
      } else if (!sticky && shouldBeSticky) {
        sticky = true;
        $stickyEl.show();
        $stickyEl.fadeIn(10);
        $menuEl.addClass('sticky-menu');

        setTimeout(function() {
          $stickyEl.css({'opacity': 1});
        }, 10);

        // If its a jump then make sure to modify the scroll because of the
        // sticky nav
@@ -970,6 +958,17 @@ function writeCookie(cookie, val, section, expiration) {
          autoScrolling = true;
          $('body,html').animate({scrollTop:(top = top - 60)}, '250', 'swing', function() { autoScrolling = false; });
        }

        // make the sidenav fixed
        var width = $('#devdoc-nav').width();
        $('#devdoc-nav')
            .addClass('fixed')
            .css({'width':width+'px'})
            .prependTo('#body-content');

        // update the sidenaav position for side scrolling
        updateSideNavPosition();

      } else if (hiding && top < 15) {
        $menuEl.removeClass('sticky-menu');
        $stickyEl.hide();
@@ -977,6 +976,7 @@ function writeCookie(cookie, val, section, expiration) {
      }

      lastScroll = top;
      resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance
    });

    // Stack hover states
@@ -988,21 +988,7 @@ function writeCookie(cookie, val, section, expiration) {
      $cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'});
    });

    // Auto scroll anchors and account for sticky nav
    $('a[href^=#]').click(function(e){
      e.preventDefault();
      var tmp = $.attr(this, 'href').substr(1);
      var el = document.getElementById(tmp) ||
        ((tmp = document.getElementsByName(tmp)).length ?
          tmp[0] : null);

      if (el) {
        var top = $(el).offset().top - 60;
        autoScrolling = true;
        $('body,html').animate({scrollTop:top}, '500', 'swing', function() { autoScrolling = false; });
      }
    });

    resizeNav();  // must resize once loading is finished
  });

})();
@@ -3615,7 +3601,7 @@ function showSamples() {

      // add to list of already added indices
      for (var j = 0; j < resources.length; j++) {
        console.log(resources[j].title);
        // console.log(resources[j].title);
        addedResourceIndices[resources[j].index] = 1;
      }

+6 −24
Original line number Diff line number Diff line
@@ -296,31 +296,13 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />

<div id="sticky-header">
  <div>
    <a class="logo" href="/index.html"></a>
    <a class="logo" href="#top"></a>
    <a class="top" href="#top"></a>
    <ul class="breadcrumb">
      <?cs
if:design ?><li class="design"><a href="<?cs var:toroot ?>design/index.html">Design</a></li><?cs
elif:(develop || training || guide || reference || tools || sdk || google || samples) ?><li class="develop"><a href="<?cs var:toroot ?>develop/index.html">Develop</a></li><?cs
elif:distribute ?><li class="distribute"><a href="<?cs var:toroot ?>distribute/index.html">Distribute</a></li><?cs
elif:about ?><li class="about"><a href="<?cs var:toroot ?>about/index.html">About Android</a></li><?cs
/if ?><?cs
if:training ?><li><a href="<?cs var:toroot ?>training/index.html">Training</a></li><?cs
elif:guide ?><li><a href="<?cs var:toroot ?>guide/index.html">API Guides</a></li><?cs
elif:reference ?><li><a href="<?cs var:toroot ?>reference/index.html">Reference</a></li><?cs
elif:tools ?><li><a href="<?cs var:toroot ?>tools/index.html">Tools</a></li><?cs
elif:google ?><li><a href="<?cs var:toroot ?>google/index.html">Google Services</a></li><?cs
elif:samples ?><li><a href="<?cs var:toroot ?>samples/index.html">Samples</a></li><?cs
elif:googleplay ?><li><a href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li><?cs
elif:essentials ?><li><a href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li><?cs
elif:users ?><li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li><?cs
elif:engage ?><li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage &amp; Retain</a></li><?cs
elif:monetize ?><li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize Your Apps</a></li><?cs
elif:disttools ?><li><a href="<?cs var:toroot ?>distribute/tools/index.html">Tools &amp Reference</a></li><?cs
elif:stories ?><li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li><?cs
/if ?> <?cs
if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs
/if ?></ul>
      <?cs # More <li> elements added here with javascript ?>
      <?cs if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs
      /if ?>
    </ul>
  </div>
</div>

+0 −19

File changed.

Preview size limit exceeded, changes collapsed.