11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Lien vers des ancres nomées (seulement visibles)

Bonjour dans le cadre d'un site responsive, je cache des zones (display:none) et affiche des contenus contenant des ancres nomées
ne pouvant les déplacer simplement, j'ai dupliqué les élements
ex :

<div id="pres1" class="mobile"></div>
<div class="contenu"></div>
<div id="pres1" class="tablette"></div>

l'idée étant de d'affiché la div pres1 suivant le device (!!! impossible de faire un placement logique via des css !!)
puis je fais un lien 
<a href="#pres1">

=> le soucis c'est que cela plante bien comme il faut car il ne fait le lien que sur la premiere ancre trouvé....
auriez vous des idées pour que le lien ne se face que vers l'ancre visible ?
Merci par avance
Modifié par micker (09 Jan 2019 - 14:39)
Modérateur
Bonjour,

Tu ne dois pas avoir deux id identiques dans une même page.

Du coup, peut-être faut-il entourer (ou faire précéder) l'ensemble par un <div id="pres1"></div> et retirer (ou renommer) les id de tes autres <div>.

Amicalement,
je comprend bien .... mais comment faire des liens de type encre nomé sur des class ... c'est bien ca le soucis ... sachant que derriere jai qun lien qui y mene
Modérateur
Bonjour,

Comme je l'indiquais précédemment, tu peux rajouter une balise <div> autour de l'ensemble. C'est elle qui aura l'id. Et à l'intérieur, ce sera montrer ou cacher selon la machine de l'utilisateur. Par exemple :

<div id="pres1">
    <div class="mobile"></div>
    <div class="contenu"></div>
    <div class="tablette"></div>
</div>
...
<a href="#pres1">

Amicalement,
salut micker
le faites de parler sur les ancres , les id s'imposent automatiquement , comme l'explique parsimonhi , tu poura pas utilisé deux id de même nom sur une seule page , car les id seront les références des liens qu'en a crées !
oui le concept de parsimonhi pourrait marcher mais pas dans mon cas .... car je ne englober mes deux div dnas une seule ...
sinon vous connaissez des solutions pour ne pas faire de rendu en fonction du device ? pour eviter le display none ?
en fait le soucis des media queries ne font que cachées ... mais l'ancre est dans le rendu quand même donc le double lien existe
je vais essayé un schéma technique
j'ai une vue smartphone avec en bas un bouton "#tarif"
puis 2 onglets avec 2 div id="tarif"
si on sur le premier onglet et que l'on clique sur "#tarif" on arrive bien sur la div id="tarif" de l'onglet 1
mais si on clique sur l'onglet 2 puis sur "#tarif" on arrive pas sur div id="tarif" de l'onglet 2...
.....
Modérateur
Bonjour,

Décidément ! Smiley cligne

On a déjà été deux à te le dire : tu ne peux pas avoir deux éléments ayant le même id dans une page !

Amicalement,
oui je comprend .... une idée en js mais je suis nul en js
1 j'initialise ma div cible avec le bon id => si on clique sur le bouton alors on va bien au bon endroit
2 si je clique sur l'onglet j'enleve tout les id de ce type et je met l'id que sur la div qui est contenu dans l'onglet cliquer ... c'est imaginable en jquery ?
j'ai ce debut
 
jQuery('#myTab a').click(function(e) { // quand on clique sur l'onglet
   jQuery(".panneau-droite2") removeAttr('id');// on enleve tout les id sur la div
  var tab = jQuery(this);
    if (tab.parent('li').hasClass('active')) {
         window.setTimeout(function() {
         jQuery(".tab-pane").removeClass('active');
         tab.parent('li').removeClass('active');
         jQuery(".panneau-droite2").attr('id', 'demandedevis');// c'est la que je ne sait pas comment cibler le bon panneau-droite2 celui qui est dans la tab active
         }, 1);
     }
});

Merci par avance
Modifié par micker (10 Jan 2019 - 09:15)
Modérateur
Bonjour

Avec ce code ?
jQuery(".active .panneau-droite2").attr('id', 'demandedevis');


Mais tout ceci n'est que de la devinette pour nous vu qu'on a qu'une partie des infos nécessaires (en particulier la portion de html concernée) pour conseiller une solution qui marche.

Amicalement,
ok cela avance un peu mais je n'arrive pas encore a bien le faire marcher ....
voici le html en résumé (j'ai essayer de le nettoyé pour éviter qu'il soit trop long)

<div class="bs-example bs-example-tabs">
    <ul id="myTab" class="nav nav-tabs">
	<li class=""><a href="#PrincessHaleema" data-toggle="tab">Princess Haleema</a></li>									    																 
        <li id="bonplanTab_SeafariExplorer" class="active"><a href="#SeafariExplorer" data-toggle="tab">Seafari Explorer</a></li>
</ul>
<div id="myTabContent" class="tab-content">																															 
    <div class="tab-pane" id="PrincessHaleema">											                                                  
          <div class="panneau-droite2  montrerTabV masquerTabH masquerPC" id="blocdemandedevis"> <!-- demande devis en mode tel -->
               Contenu du tarif                                             
         </div>																				 
    <div class="contenu-tab span9">
           <div class="descgen">
             contenu 1
           </div>
      </div>
</div>
<div class="tab-pane bonplanTab_SeafariExplorer active" id="SeafariExplorer">								                                                  
     <div class="panneau-droite2  montrerTabV masquerTabH masquerPC" id=""> <!-- demande devis en mode tel -->
     </div>																						 
     <div class="contenu-tab span9">
        <div class="descgen">
	</div>
      </div>																		</div>
</div>


mon jquery a la fin
<script type="text/javascript">// <![CDATA[
					jQuery('#myTab a').click(function(e) {
                        jQuery(".active .panneau-droite2").removeAttr('id');
                        jQuery(".active .panneau-droite2").attr('id', 'blocdemandedevis');
						var tab = jQuery(this);
						if (tab.parent('li').hasClass('active')) {
							window.setTimeout(function() {
								jQuery(".tab-pane").removeClass('active');
								tab.parent('li').removeClass('active');
							}, 
                                              1);
						}
					});
					// ]]></script>

Merci pour votre patience
Modifié par micker (10 Jan 2019 - 13:47)
Modérateur
Bonjour,

Quel bazar ! Smiley cligne

Et le code qui affiche le tarif quand ce n'est pas un téléphone ? Il est placé où par rapport à ce que tu nous montres ? (parce que je ne le vois pas, là)

Amicalement,

    <ul id="myTab" class="nav nav-tabs">
	<li class=""><a href="#PrincessHaleema" data-toggle="tab">Princess Haleema</a></li>									    																 
        <li id="bonplanTab_SeafariExplorer" class="active"><a href="#SeafariExplorer" data-toggle="tab">Seafari Explorer</a></li>
</ul>
<div id="myTabContent" class="tab-content">																															 
    <div class="tab-pane" id="PrincessHaleema">	
<!--contenu onglet 1 -->										                                                  
          <div class="panneau-droite2  montrerTabV masquerTabH masquerPC" id="blocdemandedevis"> <!-- bloc de tarif 1 -->
          </div>																		
      </div>
<div class="tab-pane bonplanTab_SeafariExplorer active" id="SeafariExplorer">	
<!--contenu onglet 2 -->								                                                  
     <div class="panneau-droite2  montrerTabV masquerTabH masquerPC" id=""> 
<!-- bloc de tarif 2 -->
     </div>																						 															</div>
....
<a href="#blocdemandedevis">lien vers tarif</a>

bon j'ai essai de faire plus simple desoler c'est ma faute ...
donc j'ai 2 onglets (il peut y en avoir plus) avec une zone tarif dedans, en responsive j'ai mon href (1 seul sinon ca rentre pas) qui doit m'amener a la dite zone ...
l'idée serait d'enlever dynamiquement les id sur les div qui ne sont pas visible pour ainsi éviter d'avoir +sieur id identiques et donc usivre votre conseil ....
en soit

Si je clique sur un onglet (li a) alors tout les id lié a la classe panneau-droite2 sont enlever ET on met un id a la div .panneau-droite2 étant dans l'onglet actif
Modifié par micker (10 Jan 2019 - 21:01)
Modérateur
Bonjour,

Arrête de penser à bricoler les id. C'est une mauvaise idée que tu vas avoir du mal à faire fonctionner.

Je repose ma question : où places-tu actuellement le code pour le cas où ce n'est pas le même genre de machine. Là, on n'a le code pour un seul type de machine. Où est par exemple l'élément qui contient les tarifs pour PrincessHaleema quand c'est un autre type de machine ?

On ne peut pas te proposer une solution, quelqu'elle soit, si on n'a pas cette information.

EDIT: c'est un peu devinette mais bon, une solution pourrait être de modifier l'attribut href du lien vers le bon de commande approprié quand on change d'onglet. Plus facile que de bricoler des id. Pour réaliser ça, on donne un id différent à chaque blocs contenant un bon de commande. Et dans le code jQuery de fin de page, on récupère l'id du bon de commande actif via un truc du genre :
var id = jQuery(".active .panneau-droite2").attr('id');

Puis on met cet id dans le href du lien via un truc du genre (en supposant qu'on a donné à ce lien l'id "lien-bon-de-commande") :
EDIT: correction d'un bug
 jQuery("#lien-bon-de-commande").attr('href','#'+id);


Amicalement,
Modifié par parsimonhi (14 Jan 2019 - 14:20)
Modérateur
Bonjour,

Un petit exemple (à adapter en fonction de la manière dont seront nommés les id) :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
.nav-tabs .active a {color:red;}
.panneau-droite2 {display:none;background:#cfc;padding:0.5em;order:2;}
.contenu-tab {display:none;background:#ccf;padding:0.5em;order:1;}
.active .panneau-droite2 {display:block;}
.active .contenu-tab {display:block;}
.tab-pane {
	display:flex;
	flex-flow:row wrap;
}
.tab-pane div {
	flex: 1;
	min-width: 300px;
}
#lien-bon-de-commande {
	display:inline-block;
	margin:1em 0;
}
:target {
	background:#fcc;
}
</style>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
	<li id="bonplanTab_PrincessHaleema_tel" class="active">
		<a href="#PrincessHaleema-tel" data-toggle="tab">Princess Haleema</a>
	</li>									    																 
	<li id="bonplanTab_SeafariExplorer_tel">
		<a href="#SeafariExplorer-tel" data-toggle="tab">Seafari Explorer</a>
	</li>
</ul>

<div id="myTabContent" class="tab-content">																															 
	<div class="tab-pane bonplanTab_PrincessHaleema active" id="PrincessHaleema-tel">											                                                  
		<div class="panneau-droite2 montrerTabV masquerTabH masquerPC" id="blocdemandedevis-PrincessHaleema-tel">
			<!-- demande devis en mode tel -->
			<h2>Devis/Tarif PrincessHaleema</h2>
			<p>Demande via un téléphone</p>
			<p>1€</p>                                    
		</div>																			 
	<div class="contenu-tab span9">
		<div class="descgen">
			<h2>Contenu PrincessHaleema</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
		</div>
	</div>
</div>
<div class="tab-pane bonplanTab_SeafariExplorer" id="SeafariExplorer-tel">								                                                  
	<div class="panneau-droite2  montrerTabV masquerTabH masquerPC" id="blocdemandedevis-SeafariExplorer-tel">
		<!-- demande devis en mode tel -->
		<h2>Devis/Tarif SeafariExplorer</h2>
			<p>Demande via un téléphone</p>
			<p>2€</p>
	</div>																						 
	<div class="contenu-tab span9">
		<div class="descgen">
			<h2>Contenu SeafariExplorer</h2>
			<p>
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
			</p>
		</div>
	</div>																		</div>
</div>
<a id="lien-bon-de-commande">Bon de commande</a>
<script>
// quand on clique sur un onglet ...
jQuery('#myTab a').click(function(e) {
	var tab = jQuery(this);
	var href = tab.attr('href');
	// on désactive la tab précédente
	jQuery(".nav-tabs .active").removeClass('active');
	jQuery(".tab-pane.active").removeClass('active');
	// on active la tab sur laquelle on vient de cliquer
	tab.parent().addClass('active');
	jQuery(href).addClass('active');
	// on change le href du lien vers le bon de commande de l'onglet actif
	jQuery("#lien-bon-de-commande").attr('href','#blocdemandedevis-'+href.replace("#",""));
});

// juste après le chargement initial de la page
jQuery(document).ready(function() {
	var tab = jQuery(".nav-tabs .active a");
	var href = tab.attr('href');
	// on initialise le href du lien vers le bon de commande de l'onglet actif
	jQuery("#lien-bon-de-commande").attr('href','#blocdemandedevis-'+href.replace("#",""));
});
</script>
</body>
</html>

Amicalement,
Sujet clos
Aller à