11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Javascript non-intrusif : pseudo-classe hover contre tween

Bonjour à tous.
J'avais une petite question :
J'ai créé un petit effet de survol classique sur un lien a (feuille de style Smiley smile 

.btn_postuler a{
     position:absolute;
     right: -164px;
}
 
.btn_postuler a:hover{
    right:0;
}


Par contre lorsque j'intègre mon script Mootools :

$$('.btn_postuler a').addEvent('mouseenter', function(){		
	this.tween('right', '0');
});
	
$$('.btn_postuler a').addEvent('mouseleave', function(){
	this.tween('right', '-160px;');
});


ca fonctionne bien, mais au premier survol le .btn_postuler a:hover prend le pas sur le script mootools et plaque mon lien à 0px à droite sans transition... Ensuite ça fonctionne bien....
Savez-vous si il est possible de désactiver un :hover avec mootools ? Et surtout comment fait-on d'habitude pour avoir un rendu appréciable sans JS et un truc carrément fou s'il est activé. Smiley lol

Merci beaucoup
Modifié par Bobdade (08 Sep 2010 - 16:25)
Bobdade a écrit :
Et surtout comment fait-on d'habitude pour avoir un rendu appréciable sans JS et un truc carrément fou s'il est activé

Simplement avec la balise <noscript> Smiley smile

Exemple :

<noscript>
<style>
.btn_postuler a:hover{
    right:0;
}
</style>
</noscript>


Le mieux est encore de créer une feuille css uniquement pour le cas où javascript n'est pas activé, et de l'appeler à l'intérieur de la balise noscript.
Modifié par ZeB_panam (08 Sep 2010 - 11:19)
Yes ! Merci pour ta réponse ZeB_panam (et pour la correction orthographique, j'ai tout bon là ? Smiley smile )

Si c'est la meilleure solution je vais l'adopter.

Mais n'existe-t-il pas une solution moins "intrusive". J'aime bien avoir ma css habituelle dans un coin et ajouter du JS par dessus qui se charge de corriger mon CSS, ajouter des balises, etc...

ex : Si jamais je ne charge pas mon fichier effet_bouton.js la balise <noscript> n'est pas lue par ceux qui ont le javascript activé et donc mon bouton n'apparait pas au survol...

Qui pinaille ?? Moi ? Naaaan Smiley lol
Modifié par Bobdade (08 Sep 2010 - 12:29)
Bobdade a écrit :
J'ai créé un petit effet de survol classique sur un lien

Tellement classique que tu as oublié d'utiliser la pseudo-classe :focus.

Bobdade a écrit :
Si c'est la meilleure solution je vais l'adopter.

C'est pas la meilleure solution, vu que ça t'oblige à mettre des styles dans ton code HTML, que ce n'est pas valide, etc.

Tu peux procéder ainsi:
1. Définir des styles de base pour tes éléments.
2. En JavaScript, quand tu initialises ton script, rajouter une classe sur le conteneur des éléments concernés.
3. Utiliser cette classe dans des sélecteurs CSS pour définir tes styles plus riches.

Tu peux aussi choisir d'ajouter une classe en JavaScript sur l'élément HTML ou BODY, classe qui pourra être utilisée pour tous les éléments de la page. De mémoire, ça peut donner:
<head>
  <title>...</title>
  <script>document.documentElement.className+=' hasJS'</script>
  <link ...>
</head>

Modifié par Florent V. (08 Sep 2010 - 12:44)
Ouah cool des tas de réponses !
Salut Florent V.,
Bon après quelques tests c'est nickel comme ça ! J'ajoute dynamiquement une classe à mes boutons 

$$('.bloc_offre .btn_postuler a').addClass('withJS');


Et derrière j'ai une nouvelle feuille de styles qui corrige le décalage du CSS de base

#bloc_recrutement .bloc_offre .btn_postuler a.withJS:hover{
	right:-160px;
}


Plus de JS intrusif = que du bonheur Smiley cligne

Merci à vous ! Smiley biggrin
Modifié par Bobdade (08 Sep 2010 - 16:12)
Florent V. a écrit :
que ce n'est pas valide, etc.

Aïe, je ne savais pas que la balise noscript n'était pas valide en dehors du body Smiley sweatdrop .
Enfin peu importe ta solution est bien plus élégante de toutes manières Smiley smile
Sujet clos
Aller à