Printable View
Salve a tutti ho questo codice che dovrebbe aggiungere una classe a un elemento quando la finestra è piccola:
però non funziona, se rimuovo l'if il codice va, se metto l'if fuori dall'addeventlistener non va, cosa sbaglio?Codice:document.addEventListener('DOMContentLoaded', function() {
if(window.Width < 600) {
document.getElementById("menucapitoli").classList.add("mw-collapsed");
}
});
Penso non esista l'oggetto Width ma con altri svariati nomi, uno è screen. window.screen.width https://developer.mozilla.org/en-US/...I/Screen/width
ho provato in vari modi ma non funziona cmq
Codice:document.addEventListener('DOMContentLoaded', function() {
if (window.matchMedia("(max-width: 600px)").matches)
document.getElementById("menucapitoli").classList.add("mw-collapsed");
}
});
Salve,
come ha indicato correttemnte darbula, in js non esiste window.Width.
Oltre a quanto indicato da darbula, esistono anche: window.innerWidth e screen.availWidth, da non confonderle tra loro, poichè non sono equivalenti a window.screen.width come lo è invece screen.width.
Cordiali saluti.
come dicevo su ho provato in diversi modi; questa parte di codice funziona
quello che mi interessa è eseguirla quando la finestra è larga meno di 600pxCitazione:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("menucapitoli").classList. add("mw-collapsed");
});
Non ho idea del perchè non riesca via js, comunque può essere fatto anche da css.
Ha provato anche con i breakpoint in css?
Esemopio:
Cordiali saluti.Codice HTML:<!DOCTYPE html>
<html>
<head>
<style>
.pinco {
background-color: #4CAF50; /* verde*/
width: 150px;
height: 150px;
text-decoration: none;
display: inline-block;
}
@media screen and (max-width: 599px) {
.pallino {
background-color: #000; /* nero */
width: 150px;
height: 150px;
text-decoration: none;
display: inline-block;
}
}
</style>
</head>
<body>
<div class="pinco pallino"></div>
</body>
</html>
quella classe serve a chiudere un menù tramite jquery, nel foglio di style uso tranquillamente le media query, cmq ho parzialmente risolto così
ora devo capire come farlo funzionare anche quando cambio risoluzione alla finestra anzichè quando la caricoCitazione:
function myFunction(x) {
if (x.matches) {
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("menucapitoli").classList. add("mw-collapsed");
});
}
}
// Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 600px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction)
Prima non aveva menzionato il contensto in cui le serviva, non potevamo saperlo.Citazione:
window.addEventListener("resize", myFunction);
Dovrebbe andar bene resize event.Citazione:
ora devo capire come farlo funzionare anche quando cambio risoluzione alla finestra anzichè quando la carico
Cordiali saluti.
non sembra funzionare
qui può vedere una pagina in funzione col codice: https://pf2.altervista.org/wiki/BarbaroCitazione:
function myFunction(x) {
if (x.matches) {
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("menucapitoli").classList. add("mw-collapsed");
});
}
}
// Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 600px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction)
window.addEventListener("resize", myFunction);
di base si deve aprire e chiudere il menù 3) Classi a seconda della dimensione della finestra
Sì nel suo sito non funziona anche a me ladattamento del menu.
Provi a riaddattare il metodo mostrato in questo esempio. A me questo funziona correttamente.
Cordiali saluti.