Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature may not be available in some browsers.
element.removeAttribute('style');
mobileNav.style.left = "unset";
let toggle = true, allowedToClick = true;
const mobileNav = document.getElementById("mobilenav"),
innerArrow = document.getElementById("inner-arrow"),
body = document.querySelector("body"),
stack = document.getElementById("stack"),
nav2 = document.getElementById("nav2"),
speed = 400;
function shift() {
mobileNav.classList.add("shift");
setTimeout(() => {
mobileNav.classList.remove("shift");
allowedToClick = true;
}, speed);
}
function stackPos() {
let h = window.innerHeight;
stack.style.top = h / 2 + "px";
if(nav2.offsetHeight < h) {
mobileNav.style.position = "fixed";
nav2.style.top = h / 2 + "px";
}
}
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
function equalHeight() {
let docBody = document.body,
html = document.documentElement;
let height = Math.max(docBody.scrollHeight, docBody.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
mobileNav.style.height = height + "px";
}
stack.addEventListener("click", () => {
if (toggle && allowedToClick) {
allowedToClick = false;
mobileNav.style.left = "0px";
innerArrow.style.transform = "rotate(180deg)";
shift();
toggle = false;
} else if (!toggle && allowedToClick) {
allowedToClick = false;
mobileNav.style.left = null;
innerArrow.style.transform = "rotate(0deg)";
shift();
toggle = true;
}
});
let mql = window.matchMedia("(orientation: portrait)");
if (!mql.matches && isTouchDevice()) {
body.classList.add("landscape");
equalHeight();
stackPos();
}
mql.addListener(function (event) {
nav2.style.top = null;
mobileNav.style.position = null;
if (event.matches && isTouchDevice()) {
body.classList.remove("landscape");
mobileNav.style.height = null;
stack.style.top = null;
} else if (!event.matches && isTouchDevice()) {
body.classList.add("landscape");
equalHeight();
stackPos();
}
});
//stackPos();
//equalHeight();
Garnicht. style sollte man garnicht manipulieren sondern die Darstellung über das Setzen/Entfernen von Klassen ändern. Evtl. lassen sich benötigte Werte als custom properties setzen, in dem Fall würde sich einiges durch reines CSS erschlagen lassen - ausprobieren lässt sich das nicht mehr da du in #5 den Link zu der Seite entfernt hast.was ist best practice, um einen Style zu entfernen?
Ergänzend dazu: Einen style aufGarnicht. style sollte man garnicht manipulieren sondern die Darstellung über das Setzen/Entfernen von Klassen ändern. Evtl. lassen sich benötigte Werte als custom properties setzen, in dem Fall würde sich einiges durch reines CSS erschlagen lassen - ausprobieren lässt sich das nicht mehr da du in #5 den Link zu der Seite entfernt hast.
null
zu setzen funktioniert zwar, allerdings ist dies nicht beabsichtigt und unzulässig. Das lässt sich zum Beispiel überprüfen, indem man in TypeScript einen style auf null
setzt. Du wirst sehen, dass TS dir hier einen error zurückgibt.