aiuto con funzione per aggiungere una classe

**golarion** · 08-03-2022, 21.00.10

Salve a tutti ho questo codice che dovrebbe aggiungere una classe a un elemento quando la finestra è piccola:

Codice:

document.addEventListener('DOMContentLoaded', function() {
        if(window.Width < 600) {
		document.getElementById("menucapitoli").classList.add("mw-collapsed");
	}    
});

però non funziona, se rimuovo l'if il codice va, se metto l'if fuori dall'addeventlistener non va, cosa sbaglio?

**darbula** · 08-03-2022, 21.32.26

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

**golarion** · 08-03-2022, 21.48.14

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");  
	}  
});

**GraphOGLRisorse** · 08-03-2022, 21.54.37

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.

**golarion** · 08-03-2022, 22.07.17

come dicevo su ho provato in diversi modi; questa parte di codice funziona

document.addEventListener('DOMContentLoaded', function() {
document.getElementById("menucapitoli").classList. add("mw-collapsed");
});

quello che mi interessa è eseguirla quando la finestra è larga meno di 600px

**GraphOGLRisorse** · 08-03-2022, 22.26.03

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:

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>

Cordiali saluti.

**golarion** · 08-03-2022, 22.32.08

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 carico

**GraphOGLRisorse** · 08-03-2022, 22.58.09

window.addEventListener("resize", myFunction);

Prima non aveva menzionato il contensto in cui le serviva, non potevamo saperlo.

ora devo capire come farlo funzionare anche quando cambio risoluzione alla finestra anzichè quando la carico

Dovrebbe andar bene resize event.

Cordiali saluti.

**golarion** · 08-03-2022, 23.07.58

non sembra funzionare

qui può vedere una pagina in funzione col codice: https://pf2.altervista.org/wiki/Barbaro
di base si deve aprire e chiudere il menù 3) Classi a seconda della dimensione della finestra

**GraphOGLRisorse** · 08-03-2022, 23.42.59

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.

Discussione: aiuto con funzione per aggiungere una classe

LinkBack

Strumenti discussione

Display

aiuto con funzione per aggiungere una classe

Regole di scrittura