diff --git a/versions/1.6/assets/js/options.js b/versions/1.6/assets/js/options.js index ae955e46..ca19528d 100644 --- a/versions/1.6/assets/js/options.js +++ b/versions/1.6/assets/js/options.js @@ -45,7 +45,7 @@ $(document).ready(function () { } } - function setSelects(urlParams) { + function setSelects(urlParams, dontPushState) { if (urlParams.get('version')) versionSelect = urlParams.get('version'); $('.current-version').html( versionSelect + ' ' ); @@ -68,7 +68,7 @@ $(document).ready(function () { showContent(); let queryString = '?version=' + versionSelect + '&platform=' + platformSelect + '&language=' + languageSelect + '&environ=' + environSelect + '&processor=' + processorSelect - if (window.location.href.indexOf("/get_started") >= 0) { + if (window.location.href.indexOf("/get_started") >= 0 && !dontPushState) { history.pushState(null, null, queryString); } } @@ -107,5 +107,28 @@ $(document).ready(function () { $('.opt-group').on('click', '.opt', setContent); $('.install-widget').css("visibility", "visible"); $('.install-content').css("visibility", "visible"); + $(window).on('popstate', function(){ + setSelects(urlSearchParams(window.location.search), true); + }); + let timer; + const toggleDropdown = function(showContent) { + if (timer) clearTimeout(timer); + if (showContent) { + timer = setTimeout(function() { + $(".version-dropdown").show() + }, 250); + } else { + $(".version-dropdown").hide() + } + } + + $("#version-dropdown-container") + .mouseenter(toggleDropdown.bind(null, true)) + .mouseleave(toggleDropdown.bind(null, false)) + .click(function() {$(".version-dropdown").toggle()}); + + $("ul.version-dropdown").click(function(e) { + e.preventDefault(); + }); }); diff --git a/versions/1.6/assets/main.css b/versions/1.6/assets/main.css index c5ac8cf2..fa2e3667 100644 --- a/versions/1.6/assets/main.css +++ b/versions/1.6/assets/main.css @@ -1018,6 +1018,12 @@ figure { li.opt.versions { padding: 10px; } +li.opt.versions:hover { + background-color: #048ccc; } + +li.opt.versions:hover a { + color: whitesmoke; } + .dropdown { position: relative; display: inline-block; @@ -1055,6 +1061,43 @@ ul.dropdown-content { .dropdown:hover .dropbtn { background-color: #048ccc; } +ul.dropdown-content, ul.version-dropdown { + display: none; + position: absolute; + left: 40%; + text-align: center; + background-color: whitesmoke; + box-shadow: none; + z-index: 1; + margin: 0px; + padding: 0px; + list-style-type: none; } + +ul.version-dropdown { + left: 0px; + width: 100%; } + +.current-version.dropbtn.btn:focus { + outline: 0; } + +.current-version .dropdown-caret { + position: relative; + top: 4px; } + +.version-dropdown .active a { + color: whitesmoke; } + +.version-dropdown a, .dropdown-content a { + color: #424242; + text-decoration: none; + display: block; + padding-left: 5px; + padding-right: 5px; + font-size: 17px; } + +.version-dropdown a:hover, .dropdown-content a:hover { + color: orangered; } + /* * selector */ diff --git a/versions/1.6/get_started/index.html b/versions/1.6/get_started/index.html index a5dcb532..1dad6e9f 100644 --- a/versions/1.6/get_started/index.html +++ b/versions/1.6/get_started/index.html @@ -173,9 +173,14 @@

Installing MXNet

MXNet Version
-