Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
| Comment: | Timing tweaks: made "hide borders" hack occur about the same time as the CSS transition finishes, and increased the menu show delay still further to make it work for Firefox. |
|---|---|
| Downloads: | Tarball | ZIP archive | SQL archive |
| Timelines: | family | ancestors | descendants | both | js-hamburger-menu |
| Files: | files | file ages | folders |
| SHA3-256: |
7bb68023bdde3fe63f0f7360f215439a |
| User & Date: | wyoung 2018-09-10 10:01:37 |
Context
|
2018-09-10
| ||
| 13:41 | Added a guard on the use of CSS transitions so it falls back to a non-animated menu pull down if they appear not to be available on the current browser. Also added a check for the existence of the hamburger menu item in case the skin admin diked it out, and did a few other minor tweaks to the footer JS code. check-in: 5d9a3454 user: wyoung tags: js-hamburger-menu | |
| 10:01 | Timing tweaks: made "hide borders" hack occur about the same time as the CSS transition finishes, and increased the menu show delay still further to make it work for Firefox. check-in: 7bb68023 user: wyoung tags: js-hamburger-menu | |
| 09:30 |
Changed hamburger menu drop-down menu from 33% of the screen width to
90%: it works better on small screens, and it allows the sitemap to go
multi-column on wider screens. Also added some right-side padding to
balance the padding added for
| |
Changes
Changes to skins/default/footer.txt.
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
// *transition*, hence never kicks off the *CSS* transition:
//
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples
function showPanel() {
setTimeout(function() {
panel.style.maxHeight = panelHeight;
panel.style.border = panelBorder;
}, 25); // 10 is insufficient with Firefox 62
}
// Click handler for the hamburger button.
var needSitemapHTML = true;
document.querySelector("div.mainmenu > a").onclick = function() {
if (panel.style.maxHeight == panelHeight) {
// Hamburger button clicked while panel visible. Trigger the
// transition back to hidden state.
panel.style.maxHeight = '0';
setTimeout(function() {
// Browsers show a 1px high line when maxHeight == 0, so
// temporarily hide the borders while hidden.
panel.style.border = 'none';
}, 300);
}
else if (needSitemapHTML) {
// Only get it once per page load: it isn't likely to
// change on us.
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var doc = xhr.responseXML;
|
| | | | |
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
// *transition*, hence never kicks off the *CSS* transition:
//
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples
function showPanel() {
setTimeout(function() {
panel.style.maxHeight = panelHeight;
panel.style.border = panelBorder;
}, 40); // 10ms is insufficient with Firefox 62
}
// Click handler for the hamburger button.
var needSitemapHTML = true;
document.querySelector("div.mainmenu > a").onclick = function() {
if (panel.style.maxHeight == panelHeight) {
// Hamburger button clicked while panel visible. Trigger the
// transition back to hidden state.
panel.style.maxHeight = '0';
setTimeout(function() {
// Browsers show a 1px high border line when maxHeight == 0,
// our "hidden" state, so hide the borders in that state, too.
panel.style.border = 'none';
}, 500); // same as transition time below
}
else if (needSitemapHTML) {
// Only get it once per page load: it isn't likely to
// change on us.
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var doc = xhr.responseXML;
|