28172 sujets

CSS et mise en forme, CSS3

Boutons "radios" [Résolu]

Bonsoir à tous,
Rien à faire, mes boutons ne gardent pas leurs attributs :hover une fois cliqués, je tente d'adapter pourtant un code qui fonctionne parfaitement :
http://codepen.io/jreaux62/pen/gbweLq
Mais j'ai beau chercher, rien à faire Smiley decu
Qq aurait une idée sur ce problème de... je dois l'avouer... de débutant Smiley decu ?
Mon html :
<div id="menu">

  <a class="button" href="#entete">Acceuil</a>
  <a class="button" href="#img1">Green</a>
  <a class="button" href="#img2">Blue</a>
  <a class="button" href="#img3">Blue</a>
  <a class="button" href="#img4">Blue</a>
  <a class="button" href="#img5">Blue</a>
  <a class="button" href="#img6">Blue</a>


        	</div><!-- #menu -->

Mes CSS :
.button {
	padding: 10px 15px;
	width: auto;
	height: auto;
	margin: 0px 0px 0px -1px;
	color: #000000;
	font-family: 'PT Sans', sans-serif;
	border-spacing: 0px 0px;
	/* [disabled]left: -50px; */
	background-color: #CC0033;
}
.button:hover {
	font-weight:bold;
	font-style:italic;
	background-color: rgba(0,0,0,0.1);
	color: #FFFFFF;
	border-radius: 0px;
	/* [disabled]border-bottom-width: thin; */
	/* [disabled]border-bottom-style: solid; */
	/* [disabled]border-bottom-color: #FFFFFF; */
}

et le js
	</script>
        <script>
	var oRadio = document.querySelectorAll('.button'),
      i, nb=oRadio.length;

  for( i = 0; i <nb; i++){
    oRadio[i].onclick = function(){
      var str = this.getAttribute("href");
      document.body.className = str.replace('#', '');
    };
  }
  </script>

Merci pour votre aide et bonne soirée,
D.
[/i]
Modifié par dhillig (13 Jan 2015 - 12:38)
Modérateur
Bonjour,

Si ce qui ne marche pas est que le bouton, une fois cliqué, ne conserve pas les caractéristiques qu'il a quand on le survole (caractéristique du :hover dans le css), il te manque deux choses :

1) dans le HTML, chaque bouton doit avoir 2 classes, une classe button comme tu leur as déjà donné, et une deuxième classe unique pour chaque bouton (on va supposer pour la suite que tu leur mets comme classe bt1, bt2, bt3 ...)

<a class="button bt1" href="#entete">Acceuil</a>
<a class="button bt2" href="#img1">Green</a>
<a class="button bt3" href="#img2">Blue</a>

2) dans le css, il faut ajouter un background pour les bt1, bt2, bt3, ... identique au background que tu donnes à ces mêmes boutons avec :hover, et seulement si la classe de l'élément body a la valeur déduite de la valeur du href des liens correspondant aux boutons (désolé, c'est compliqué, mais c'est ce que fait le code js que tu as fourni en exemple : on aurait pu faire bien plus simple mais peut-être as-tu d'autres contraintes par ailleurs, donc je passe). Le css pourra être par exemple :

.entete .bt1,
.img1 .bt2,
.img2 .bt3 {background-color: rgba(0,0,0,0.1); color: #FFFFFF;}

Amicalement,
Bonjour parsimonhi et merci pour ta réponse,
Je suis preneur de ce qui est le plus simple Smiley smile J'ai testé ton html avec les css suivantes :
.button {
	padding: 10px 15px;
	width: auto;
	height: auto;
	margin: 0px 0px 0px -1px;
	color: #000000;
	font-family: 'PT Sans', sans-serif;
	border-spacing: 0px 0px;
	background-color: #CC0033;
}
.button:hover {
	font-weight:bold;
	font-style:italic;
	background-color: rgba(0,0,0,0.1);
	color: #FFFFFF;
}
.entete .bt1 {
	font-weight:bold;
	font-style:italic;
	background-color: rgba(0,0,0,0.1);
	color: #FFFFFF;}
.img1. bt2 {
	font-weight:bold;
	font-style:italic;
	background-color: rgba(0,0,0,0.1);
	color: #FFFFFF;}
.img2 .bt3 {
	font-weight:bold;
	font-style:italic;
	background-color: rgba(0,0,0,0.1);
	color: #FFFFFF;}

Il n'y a malheureusement aucun changement Smiley ohwell
Peut-être est-ce du à l'exigence du script (la classe de l'élément body a la valeur déduite de la valeur du href des liens correspondant aux boutons) ?
Merci pour ton aide et bon week-end,
dh
Modérateur
Bonjour,

@Zelalsan
Je crois qu'il veut plutôt un truc dans ce genre là : http://jsfiddle.net/1kyryb1g/

@dhillig
As-tu bien ajouté jquery dans la partie <head> de la page ?
Où inclus-tu ton code js dans ta page ?
Le fais-tu de tel sorte qu'il s'exécute après le chargement du DOM ?

Amicalement,
Modifié par parsimonhi (10 Jan 2015 - 21:32)
Bonsoir parsimonhi et Zelalsan,
Merci à vous !
Ce que je cherche à faire est l'effet de parsimonhi via son script, et donc fonctionnel Smiley smile Mais pas chez moi Smiley confus
mon <head>
    <script type="text/javascript" rc="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->

Le js de ma page
 <script>
 $(function(){
                var hauteur = $(window).height();
		$(window).scroll(function () {
			if ($(this).scrollTop() > hauteur) {				$('#menu').css({

					'position': 'fixed',
					'top': '0px'
				});
      		         } else {
	  			$('#menu').css({
		  			'position': 'absolute',
		  			'top': '0%'
	  			});
      		          }
   		});
 	});	
	</script>
        <script>
	var oRadio = document.querySelectorAll('.button'),
      i, nb=oRadio.length;

  for( i = 0; i <nb; i++){
    oRadio[i].onclick = function(){
      var str = this.getAttribute("href");
      document.body.className = str.replace('#', '');
    };
  }
  </script>

J'ai (je pense) bien vérifié les CSS (internes + 3 fichiers externes).
Je ne vois pas du tout d'où vient le problème ! De mon code, je sais Smiley rolleyes mais où ?
C'est compliqué tout ça Smiley ohwell
Merci pour votre aide et bonne fin de week-end,
dh[/i]
Hello,

Pour commencer, il semble que tu inclue deux fois la lib jQuery :
<script type="text/javascript" rc="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->

Cela peut générer des conflits…

Sinon, qu'en dit la console navigateur ? Possibilité d'avoir une page en ligne ou un jsFiddle/codepen ?
Bonjour parsimonhi, Zelalsan et audrasjb,
Je profite aussi des forums pour simplifier mon code et donc apprendre, merci Zelalsan Smiley smile
Par contre, impossible de centrer ce nouveau menu (qui ne garde toujours pas son attribut :hover une fois cliqué), j'y ai donc rajouter une classe .center Smiley confus
Oui audrasjb, j'ai accidentellement rajouté hier une seconde lib (je vais tenter de perdre cette mauvaise habitude Smiley cligne
J'ai lancé firebub, mais celui-ci ne détecte rien (console : 0 erreur), possible aussi que j'utilise mal ce plug-in ? J'ai mis la "page" (bien vidée de son contenu mais pas de son code Smiley murf en ligne)
http://pasterencemaisbud.fr/voilavoila/index
Par ailleurs, le scroll y est saccadé (même si cela est difficilement visible vu le peu d'éléments sur la page)... alors même si ce n'est pas la question, si vous avez une idée de comment le fluidifier Smiley rolleyes
Merci et à vous et bonne fin de week-end,
dh
Modérateur
Bonjour,

En gardant l'idée proposée par Zelalsan, et au risque de me répéter, il faut s'assurer que le script sera exécuté une fois le DOM chargé (quand on utilise http://jsfiddle.net, c'est fait automatiquement si on a coché l'option correspondante, et du coup, on ne voit pas en fait le code complet nécessaire). Cela se fait en utilisant $( document ).ready(). De plus, il me semble qu'il n'y a guère de raison d'utiliser e.preventDefault() ici. Finalement, ça donne ça :


$( document ).ready(
    function()
    {
        var a = document.querySelectorAll('#menu>a'), i, nb = a.length;
        for( i = 0; i < nb; i++ )
        {
            a[ i ].onclick = function()
            {
                var b = document.querySelectorAll('#menu>a'),  j;
                for( j = 0; j < nb; j++ )
                {
                    if (b[ j ] == this)
                        this.className = "selected";
                    else b[ j ].className = "";
                }
            };
        }
    });


EDIT : il ne faut pas oublier de définir la classe selected dans le css avec par exemple un #menu>a.selected {...}

Amicalement,
Modifié par parsimonhi (13 Jan 2015 - 05:34)
Bonjour parsimonhi et merci pour ta réponse,
Qu'entends-tu par :
"il faut s'assurer que le script sera exécuté une fois le DOM chargé" ?
Si c'est retirer les scripts du <head> afin de les mettre avant </html> afin qu'ils se chargent dès l'ouverture de la page (c'est bien ça ?) c'est fait ET CA FONCTIONNE !!! Smiley biggrin
SUPER !!!! Merci BEAUCOUP et BONNE JOURNEE !!!!
dh
Modérateur
Bonjour,

C'est quand on utilise du code qui modifie le DOM (dans ton cas, c'est quand tu modifies la classe des boutons qui sont des éléments du DOM) qu'on a besoin de faire exécuter ce code après le "chargement" du DOM. Sinon, ce code risque d'essayer de modifier des éléments qui n'existent pas encore au moment où il essaie de faire les modifications.

Faire exécuter ce code en se contentant de le placer en fin de page ne suffit pas toujours (et en plus, ça peut dépendre du navigateur).

On a plusieurs possibilités pour être sûr que ce code sera exécuté après le "chargement" du DOM.

L'une d'entre elles est d'utiliser la fonction jquery $( document ).ready() et de mettre le code en question en paramètre de cette fonction, ce qui a pour effet que ce code ne sera pas exécuté immédiatement, mais seulement une fois toute la page chargée (et à ce moment là, on est sûr que le DOM est "chargé", donc que ses éléments existent et donc qu'on peut les modifier).

Si l'on veut se passer de jquery, une autre possibilité est d'utiliser window.addEventListener("load",...).

Il y a d'autres possibilités (utiliser AJAX par exemple) mais je ne vais pas détailler ici car ça nous emmène trop loin.

EDIT : le script contentant $( document ).ready() se place juste avant la balise fermante </body>.

Amicalement,
Modifié par parsimonhi (14 Jan 2015 - 10:50)
@parsimonhi> Un script se met généralement en fin de document et donc une fois le DOM chargé. Le "preventDefault()" sert à annuler l'action du lien qui renverrait en haut de page si cela ne se faisait pas. Je ne vois pas trop non plus pourquoi tu compliques le code à ce point ?
Modérateur
Bonjour,

Concernant le "preventDefault()" , il me semble que justement, dans le cas présent, on veut que le lien soit exécuté puisqu'il s'agit d'un lien pointant vers une ancre dans la page elle-même. Mais bon, je peux me tromper : c'est un peu une devinette, et c'est pourquoi j'ai employé un "il me semble".

Concernant la fin de chargement du DOM, au risque de me répéter, se contenter de mettre un script en fin de page pour manipuler le DOM, ça peut marcher mais ce n'est pas certain.

Ça dépend de ce qu'il y a dans la page. Les cas tordus sont nombreux. Y-a-t-il par exemple des éléments du DOM créés dans la page par d'autres scripts ? Ça dépend aussi des navigateurs, certains étant par chance plus robustes que d'autres sur cette question (les navigateurs modernes faisant mieux que leurs prédécesseurs évidemment).

Relies aussi la documentation jquery pour la fonction ready() : http://api.jquery.com/ready/ . Pourquoi utiliser une fonction dont la description est "Specify a function to execute when the DOM is fully loaded" s'il suffisait de mettre la fonction passée en paramètre de ready() en fin de page ?

Amicalement,
Modifié par parsimonhi (14 Jan 2015 - 15:48)
Bonsoir parsimonhi et Zalalsan,
Merci pour ces explications (un peu complexes) qui m'aident à m'y retrouver un petit peu, et donc à apprendre davantage.
Encore merci pour votre aide et bonne soirée à vous,
dh
@parsimonhi> crois-moi que tu te compliques la vie énormément pour rien. Dans cet exemple, les éléments sur lesquels on agit sont connus et ne sont pas crées. Quand bien même ils le seraient, on pourrait aussi avoir un contrôle sur ça.
Le lien ne pointe nul part si ce n'est sur la page. Tu peux comparer sans preventDefault et avec preventDefault (le lien est tout en bas).
Modérateur
Bonjour

Concernant le chargement du DOM, OK : je viens de tester dans tous les sens ce point là (ce que je n'avais pas fait depuis des années), et je n'ai pas eu trop de mauvaises surprises en mettant le script en bas de page et sans le $( document ).ready() ou sans window.addEventListener(). J'en ai eu quelques unes mais dans des cas suffisamment rares pour qu'on puisse faire l'impasse ici, et en plus, il n'est même pas clair pour ces cas qu'un $( document ).ready() suffise.

Concernant le preventDefault(), si le href de ton lien est simplement "#", tu as raison. Mais ce n'est pas le cas dans le HTML donné initialement en exemple, qui a des href="#img1", href="#img2", ...

Considère l'exemple suivant : http://jsfiddle.net/4w8dxq3z/

Si on clique sur un des boutons, le bouton change de couleur ET on se déplace dans la page à l'endroit où est l'ancre référencée dans le href du lien. Je me contente dans mon exemple de me déplacer à une div ayant un fond coloré différent, mais ça pourrait être une balise <img> comme le laisse suggérer les href="#img1", href="#img2", ...

Si tu dé-commentes la ligne e.preventDefault(); quand on clique sur lien, on ne se déplace plus dans la page.

Amicalement,
Sujet clos
Aller à