Rinominare classe se su mobile

[Tom1884]

Ho bisogno che un evento Javascript riguardi un div (o una classe) solo nel caso in cui si sia su dispositivi mobili. Il CSS che riguarda l'aspetto mobile è gestito col classico "@media ...".

Non ho idee su come gestire questa cosa... avevo pensato a rinominare una classe dentro a "@media".
E' possibile tramite CSS rinominare una classe?

[KillerWorm]

E' possibile tramite CSS rinominare una classe?

No, con CSS non puoi modificare gli elementi del DOM (a livello strutturale), tanto meno manipolare i loro attributi.
Al limite puoi definire delle regole che sovrascrivano delle altre. Sfruttare quindi l'override per creare un sistema che in qualche modo soddisfi la tua esigenza, ma dalle poche indicazioni che hai fornito non è chiaro quale sia l'obiettivo.

Ho bisogno che un evento Javascript riguardi un div (o una classe) solo nel caso in cui si sia su dispositivi mobili.

Non capisco cosa vorresti ottenere di preciso. Puoi fare un esempio pratico?

Mi pare di intuire che l'argomento ricada comunque su JavaScript. Probabilmente ti serve creare un qualche sistema di sniffing che permetta l'esecuzione di tale script solo su mobile o, per meglio precisare, solo quando si hanno determinate condizioni che determinano se si tratta appunto di mobile. Una strada potrebbe essere l'uso del metodo matchMedia (qui una guida) o altri sistemi analoghi.

[Mod]
Ti invito comunque a fornire maggiori dettagli. Nel caso si intenda proseguire con JavaScript, la discussione sarà spostata sul relativo forum.

[Tom1884]

Grazie mille! Chiarissimo.
Sto lavorando ad un effetto a scomparsa di una top bar/header.
A livello DOM, la top bar è identica per la versione desktop e mobile (le differenze desk/mob sono appunto gestite con CSS), ma l'effetto vorrei fosse attivo solo nella versione mobile: se l'evento Javascript "coinvolge" classi o div, l'effetto affligge entrambe le versioni del sito...

"Condizionare" lo script al matchmedia è una soluzione, ma volevo evitare di avere "più punti di controllo" della viewport (uno già nel CSS).

[KillerWorm]

Sto lavorando ad un effetto a scomparsa di una top bar/header.

Puoi specificare meglio di che tipo di effetto si tratta?
Puoi postare un link all'eventuale pagina pubblica in cui vedere la tua realizzazione?

Nel caso l'effetto sia dato all'hover di un qualche elemento, puoi pensare di realizzarlo solo con CSS, senza JavaScript, e gestire quindi tutto da CSS.

Da premettere che CSS non è un vero e proprio linguaggio di programmazione (cioè, non esiste una gestione di eventi), ad ogni modo esistono anche delle tecniche per "simulare", ad esempio, un evento click. Nel caso, puoi dare uno sguardo tra i link utili capitolo 8 (ci sono diversi riferimenti sull'argomento, sotto Hover, active, checked...). Resta comunque chiaro che finché si tratta di un effetto attivato all'hover, puoi andare tranquillamente di CSS, diversamente bisogna capire meglio cosa conviene fare.

"Condizionare" lo script al matchmedia è una soluzione, ma volevo evitare di avere "più punti di controllo" della viewport (uno già nel CSS).

Capisco, ma personalmente non vedo troppe alternative.

[Tom1884]

Puoi specificare meglio di che tipo di effetto si tratta?

Si tratta della scomparsa (fade o slide In/Out) della header bar in base allo scroll della pagina: esempio

[KillerWorm]

Ho visto.
Ovviamente gli eventi scroll non è possibile gestirli da CSS ma ci vuole necessariamente JavaScript.
Se poi vuoi evitare il controllo del viewport dai diversi ambiti, quello che puoi fare è mettere uno sniffing (quindi JavaScript), come detto inizialmente, che vada poi ad impostarti una qualche classe nel caso di mobile. A quel punto tutte le "media query" le andrai a gestire via JavaScript, mentre da CSS vai giusto a "stilizzare" quella determinata classe. Questo a grandi linee, chiaramente è solo un'idea.

[Mod]
Sposto su JavaScript, magari puoi ricevere ulteriori consigli.

[Tom1884]

Grazie, tutto più che chiaro, gentilissimo.