18041 sujets

Questions générales et questions de débutants

Executer du CCS si JS n'est pas pris en compte ?

Bonjour à tous et a toutes Smiley smile

J'ai établi un module " back to top " sur mon site et j'ai ajouté le module " scrollto " de JQuery.
Avec un code :

$(function(){
   $(window).scroll(function () {
      if ($(this).scrollTop() > 170) {
          $('#goTop').addClass("showgoTop");
      } else {
      $('#goTop').removeClass("showgoTop");
      }
   });
});


Jusque la tout vas bien mais dans mon code j'ai mis : 

#goTop{
opacity: 0;
transition: .... ;
}
.showgoTop{
opacity: 1 !important;
transition: .... ;
}


Mais le seul problème est que si un utilisateur vas sur ce site en question et qu'il ne prend pas en compte JavaScript le module ne s'afficheras pas...

C'est la que j'en fais appel à votre savoir Smiley smile
Est ce que il est possible de coder en HTML ou en CSS une condition ?

Exemple :
Si JavaScript n'est pas pris en compte alors --> #goTop{ opacity: 1 !important;} ?

Si vous pourriez me conseillé des sites d'aides ou un exemple sa serais gentil de votre part Smiley smile
J'ai pas vraiment réussi a trouvé réponse a ma question sur Google ^^"

Merci a vous,
bonne journée ! Smiley smile
Modifié par Golderen (17 Nov 2016 - 15:32)
Modérateur
Salut,

Tu peux mettre ton comportement "sans Js" par défaut dans ton CSS et rajouter une classe dynamiquement en Js au chargement de la page qui appliquera le comportement souhaité.
_laurent a écrit :
Tu peux mettre ton comportement "sans Js" par défaut dans ton CSS et rajouter une classe dynamiquement en Js au chargement de la page qui appliquera le comportement souhaité.

Donc, pour illustrer, on peut mettre une classe sur le html :
<html lang="fr-FR" class="no-js">

Et changer la classe en javascript :
var el = document.getElementsByClassName('no-js')[0];
el.classList.remove('no-js');
el.classList.add('js');

Ou en jQuery :
$( 'html' ).addClass( 'js' ).removeClass( 'no-js' );


Ensuite, en css, il suffit d'utiliser la classe .js pour le css spécifique à la présence de javascript et .no-js pour les éléments spécifique à son absence :
.js .accordion {
    /* du style pour un accordéon en javascript... */
}

Modifié par Olivier C (17 Nov 2016 - 20:59)
Ah oui d'accord.. Je n'y avait même pas penser.. ^^'
J'ai du mal a réfléchir à des choses simples.. Mon esprit est plus tout tourner en version :

" Pourquoi faire simple quand on peut faire compliqué ? "
( Sa me facilite pas toujours la tâche.. Smiley biggrin )

Merci pour vos réponses, je ne savais pas que l'on pouvais directement mettre une classe sur le " HTML ".

Du coups, en reprenant le code que tu as écrit pour le retranscrire sur mon code, si je fais :
<html lang="fr-FR" class="no-js">
<body>
<!-- ....... -->
<a href="#header"><div>^</div></a>
</body>

.no-js #goTop{
display: block;
/* Code.... */
}
.js #goTop{
display: none;
/* Code.... */
}
.js .showgoTop{
display: block !important;
}




$(function(){
   $(window).scroll(function () {
      if ($(this).scrollTop() > 170) {
          $('#menuNav').addClass("fixedmenuNav");
          $('#goTop').addClass("showgoTop");
      } else {
      $('#menuNav').removeClass("fixedmenuNav");
      $('#goTop').removeClass("showgoTop");
      }
   });
});
$( 'html' ).addClass( 'js' ).removeClass( 'no-js' );


Est ce que c'est bon ou je fais une faute quelque part ? ^^

Bonne journée
Bon Week end ! Smiley biggrin
Modérateur
Salut,

Et bien oui ca a l'air correct. Après je voyais plus ça directement sur la balise et sans avoir à remove une classe mais bon l'esprit est le même.


Ex :

<a href="#header" id="goTop">^</a>

#goTop {
    display: block;
    opacity 1;
    transition: opacity 200ms;
}
.hidegoTop {
    opacity: 0;
}

$(function(){

   $('#goTop').addClass( 'hidegoTop' ); // exécuté que s'il y a du Js

   $(window).scroll(function () {
      if ($(this).scrollTop() > 170) {
          $('#goTop').toggleClass("hidegoTop");
      } else {
          $('#goTop').toggleClass("hidegoTop");
      }
   });

});


Bonne journée !
Modifié par _laurent (18 Nov 2016 - 14:41)
Sujet clos
Aller à