am 7bb8315c: am 4786cc3b: am de22e6fb: am 20cf2a91: update sticky nav to sync with sidenav and build the breadcrumbs dynamically
* commit '7bb8315cf6d0576f8663ced6d102e60112bec27c': update sticky nav to sync with sidenav and build the breadcrumbs dynamically
This commit is contained in:
Scott Main
Android Git Automerger
commit
e737ca9a02
5 changed files with 279 additions and 343 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,16 +15,16 @@
|
|||
|
||||
@media screen, projection, print {
|
||||
.full {
|
||||
padding: 2.5em 0;
|
||||
border-top: solid 1px #ddd;
|
||||
border-bottom: solid 1px #ddd;
|
||||
background: #f7f7f7;
|
||||
padding: 2.5em 0;
|
||||
border-top: solid 1px #ddd;
|
||||
border-bottom: solid 1px #ddd;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.wrap {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
min-width:600px;
|
||||
clear: both;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
min-width:600px;
|
||||
clear: both;
|
||||
}
|
||||
.cols {
|
||||
height: 1%;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
$(window).scroll(function() {
|
||||
var top = $(window).scrollTop();
|
||||
var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll
|
||||
|
||||
if (sticky && top < stickyTop) {
|
||||
$(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;
|
||||
}
|
||||
|
||||
// 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() {
|
||||
$menuEl.removeClass('sticky-menu');
|
||||
$stickyEl.hide();
|
||||
hiding = false;
|
||||
}, 250);
|
||||
} else if (!sticky && top >= stickyTop) {
|
||||
// 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.fadeOut(250);
|
||||
hiding = false;
|
||||
|
||||
// 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
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -3599,7 +3585,7 @@ function showSamples() {
|
|||
resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; });
|
||||
break;
|
||||
}
|
||||
//console.log(firstClause.attr + ':' + firstClause.value);
|
||||
// console.log(firstClause.attr + ':' + firstClause.value);
|
||||
resources = resources || [];
|
||||
|
||||
// use additional clauses to filter corpus
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -3933,4 +3919,4 @@ function showSamples() {
|
|||
|
||||
return this;
|
||||
};
|
||||
}) (jQuery);
|
||||
}) (jQuery);
|
||||
|
|
|
|||
|
|
@ -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 & 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 & 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>
|
||||
|
||||
|
|
@ -330,4 +312,4 @@ if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs
|
|||
</div>
|
||||
|
||||
<?cs /if ?><?cs # end if/else !devsite ?><?cs
|
||||
/def ?>
|
||||
/def ?>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ def:sdk_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
|
||||
<?cs
|
||||
include:"../../../../frameworks/base/docs/html/sdk/sdk_toc.cs" ?>
|
||||
|
|
@ -25,7 +24,6 @@ def:tools_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
<?cs
|
||||
include:"../../../../frameworks/base/docs/html/tools/tools_toc.cs" ?>
|
||||
|
||||
|
|
@ -43,7 +41,6 @@ def:training_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
|
||||
|
||||
<?cs
|
||||
|
|
@ -63,7 +60,6 @@ def:googleplay_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
<?cs include:"../../../../frameworks/base/docs/html/distribute/googleplay/googleplay_toc.cs" ?>
|
||||
</div>
|
||||
</div> <!-- end side-nav -->
|
||||
|
|
@ -78,7 +74,6 @@ def:essentials_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
<?cs include:"../../../../frameworks/base/docs/html/distribute/essentials/essentials_toc.cs" ?>
|
||||
</div>
|
||||
</div> <!-- end side-nav -->
|
||||
|
|
@ -93,7 +88,6 @@ def:users_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
<?cs include:"../../../../frameworks/base/docs/html/distribute/users/users_toc.cs" ?>
|
||||
</div>
|
||||
</div> <!-- end side-nav -->
|
||||
|
|
@ -108,7 +102,6 @@ def:engage_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
<?cs include:"../../../../frameworks/base/docs/html/distribute/engage/engage_toc.cs" ?>
|
||||
</div>
|
||||
</div> <!-- end side-nav -->
|
||||
|
|
@ -123,7 +116,6 @@ def:monetize_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
<?cs include:"../../../../frameworks/base/docs/html/distribute/monetize/monetize_toc.cs" ?>
|
||||
</div>
|
||||
</div> <!-- end side-nav -->
|
||||
|
|
@ -138,7 +130,6 @@ def:disttools_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
<?cs include:"../../../../frameworks/base/docs/html/distribute/tools/disttools_toc.cs" ?>
|
||||
</div>
|
||||
</div> <!-- end side-nav -->
|
||||
|
|
@ -153,7 +144,6 @@ def:stories_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
<?cs include:"../../../../frameworks/base/docs/html/distribute/stories/stories_toc.cs" ?>
|
||||
</div>
|
||||
</div> <!-- end side-nav -->
|
||||
|
|
@ -168,8 +158,6 @@ def:guide_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
|
||||
|
||||
<?cs
|
||||
include:"../../../../frameworks/base/docs/html/guide/guide_toc.cs" ?>
|
||||
|
|
@ -188,7 +176,6 @@ def:design_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
|
||||
|
||||
<?cs
|
||||
|
|
@ -208,7 +195,6 @@ def:distribute_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
|
||||
<?cs
|
||||
include:"../../../../frameworks/base/docs/html/distribute/distribute_toc.cs" ?>
|
||||
|
|
@ -228,7 +214,6 @@ def:samples_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
|
||||
<?cs
|
||||
include:"../../../../frameworks/base/docs/html/samples/samples_toc.cs" ?>
|
||||
|
|
@ -248,7 +233,6 @@ def:google_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
|
||||
<?cs
|
||||
include:"../../../../frameworks/base/docs/html/google/google_toc.cs" ?>
|
||||
|
|
@ -272,7 +256,6 @@ def:about_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav" class="scroll-pane">
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
|
||||
<?cs
|
||||
include:"../../../../frameworks/base/docs/html/about/about_toc.cs" ?>
|
||||
|
|
@ -295,8 +278,6 @@ def:default_left_nav() ?>
|
|||
<div class="wrap clearfix" id="body-content">
|
||||
<div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div id="devdoc-nav">
|
||||
|
||||
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
|
||||
<div id="api-nav-header">
|
||||
<div id="api-level-toggle">
|
||||
<label for="apiLevelCheckbox" class="disabled"
|
||||
|
|
|
|||
Loading…
Reference in a new issue