Bouton pour modifier une ancre

**VinceCotta** · 22/05/2016, 18h24

N'ayant trouvé nul part mon bonheur sur le web, je me tourne vers vous et peut être avez vous la solution.
J'aimerais créer deux boutons qui incrémenterais ou décrementerais un compteur qui remplirait un href d'une ancre afin de naviguer entre ces ancres.
Bref j'aimerais tout simplement pouvoir aller à l'ancre suivante ou précedente grace à deux malheureux boutons et je sèche comme un gros noob, mon cerveau commencant à entrer en éruption.

Alors merci d'avance à mon ou mes sauveurs

**mathieu** · 22/05/2016, 21h34

montrez nous le code que vous avez déjà essayé même s'il ne fonctionne pas

**VinceCotta** · 23/05/2016, 21h23

Tout d'abord merci d'avoir répondu.
Par contre en ce qui concerne le code il n'y a plus rien j'ai tergiversé toute la journée d'hier sans que cela ne donne de résultat.
J'ai essayer avec des getElementByTagName ou encore querySelectorAll pour selectionner les <a></a> et en faire un liste et tenter de naviguer a la manièrer d'un array php mais j'avoue que j'ai bloqué et j'ai cru comprendre que ca ne marchait pas comme ca.

L'idée c'est que sur cette page par exemple. Il y'ai un bouton suivant et précedent et si c possible (si ce n'est pas le premier ou le dernier) renvoie aux chapitres suivants et précédents. Merci encore.

**NoSmoking** · 24/05/2016, 14h45

Bonjour,
il serait également intéressant que tu décrives mieux ce que tu cherches à faire.

S'agit-il d'ancres ou de liens ?
Toutes les ancres/liens sont-ils dans la même page ?
En cas de liens l'ouverture de la page se réalise où ?
...

**VinceCotta** · 24/05/2016, 23h43

Ce sont des ancres situés sur la même page dans une liste ul je voudrais juste ajouter des boutons pour les parcourir. Cette page par exemple: http://lepreparateurenpharmacie.fr/e...rma/profession

**chadoum** · 25/05/2016, 16h42

C'est possible, tu peux faire comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body style="font-size:14pt">
    <div>
        NAVIGATION
        <button onclick="Back()"><</button>&nbsp;<button onclick="Next()">></button>
        CONTENU
        <div id="1" class="contenus">
            Contenu 1 :
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non diam augue. Maecenas non tincidunt augue. Nulla venenatis mauris sagittis posuere malesuada. Donec ut vehicula est, sed elementum dolor. Sed dolor est, feugiat in pretium vitae, faucibus sit amet arcu. Sed vitae augue quis dolor auctor fermentum. Vestibulum in velit sed est faucibus luctus. Curabitur sodales urna eget mauris varius, id convallis ligula suscipit. Curabitur vel urna eros. Donec id tortor eu dui vehicula vulputate.
 
        </div>
        <div id="2" class="contenus">
            Contenu 2 :
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non diam augue. Maecenas non tincidunt augue. Nulla venenatis mauris sagittis posuere malesuada. Donec ut vehicula est, sed elementum dolor. Sed dolor est, feugiat in pretium vitae, faucibus sit amet arcu. Sed vitae augue quis dolor auctor fermentum. Vestibulum in velit sed est faucibus luctus. Curabitur sodales urna eget mauris varius, id convallis ligula suscipit. Curabitur vel urna eros. Donec id tortor eu dui vehicula vulputate.
 
        </div>
        <div id="3" class="contenus">
            Contenu 3 :
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non diam augue. Maecenas non tincidunt augue. Nulla venenatis mauris sagittis posuere malesuada. Donec ut vehicula est, sed elementum dolor. Sed dolor est, feugiat in pretium vitae, faucibus sit amet arcu. Sed vitae augue quis dolor auctor fermentum. Vestibulum in velit sed est faucibus luctus. Curabitur sodales urna eget mauris varius, id convallis ligula suscipit. Curabitur vel urna eros. Donec id tortor eu dui vehicula vulputate.
 
        </div>
    </div>
    <script>
        var index = 0
        var max = document.querySelectorAll( '.contenus' ).length
        console.log( max )
        function Back()
        {
            if ( index > 0 )
            {
                index--
                window.location = "#" + index
            }
        }
        function Next()
        {
            if ( index < max )
            {
                index++
                window.location = "#" + index
            }
        }
    </script>
</body>
 
</html>

C'est ce que tu voulais ?

**VinceCotta** · 26/05/2016, 01h44

Dans l'idée c'est Ca mais ça ne fonctionne pas demain je vous envoie un code d'exemple. Merci encore

**chadoum** · 26/05/2016, 08h43

Le code que je t'ai envoyé fonctionne.
Qu'est-ce que tu entends par "ça ne fonctionne pas" ?

**VinceCotta** · 26/05/2016, 09h00

Lorsque je clique sur les flèches rien ne se passe

**chadoum** · 26/05/2016, 09h04

Rajoute du contenu texte, tu verras défiler l'écran. J'ai réduit la taille pour ne pas envoyer un pavé !

**VinceCotta** · 26/05/2016, 20h56

Voici mon code adapté qui ne fonctionne pas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="fr">
 
	<body>
	<head>
		<title>Exercice de La Profession en Officine</title>
		<meta name="description" content="Le diversité du monde microbien résumé et simplifié." />
		<?php include 'head.php'; ?>
	</head>
 
		<div class="not_mobile"><?php $page_active = '2'; ?><?php include '../../include/entete.php'; ?></div>
 
		<section>
			<a id="up"></a>
 
				<div class="mobile-wrapper">
					<span class="plan_link"><a href="http://lepreparateurenpharmacie.fr/encyclopedie">Encyclopédie</a> > <a href="http://lepreparateurenpharmacie.fr/encyclopedie/legislation-pharma">Législation Pharmaceutique</a> > <a href="#">Exercice de La Profession en Officine</a></span>
					<br/>
					<hr>
					<?php $page_active = '1'; ?>
					<?php include 'progress.php'; ?>
				</div>
				<div id="corps">
					<h1>Exercice de La Profession en Officine</h1>
 
				<ol class="rectangle-list">
					<li>La Législation pharmaceutique est l'ensemble des lois qui concerne l'exercice de la pharmacie.<br/>
					Ces lois garantissent la qualité des médicaments, la délivrance ainsi que la consommation des médicaments en toute sécurité.
					On trouve ces lois dans le C.S.P ( Code de la Santé Publique).<br/>
					<br/>
					La pharmacie est une profession libérale et dépend donc d'un ordre : L'ordre National des Pharmaciens.
					Ce dernier veille à la bonne application du code de déontologie (Règles professionnelles du pharmacien.) </li>
 
					<li class="contenus" id="1"><a>Les Professionels en Pharmacie</a>
						<ol>
							<li><a>Le Pharmacien</a><br/>
							<br/>
								<span style="color:#999;">Le diplôme de pharmacien permet d'exercer différentes activités professionnelles*:</span><br/><br/>
								<ul class="liste-simple">
									<li>Pharmacien titulaire ou gérant d'une officine</li>
									<li>Pharmacien gérant d'une pharmacie à usage intérieur (P.U.I)</li>
									<li>Pharmacien adjoint (Assistant):<br/><i>Il exerce simultanément avec le titulaire ou gérant dans une officine ou un établissement pharmaceutique dont il n'est pas propriétaire</i></li>
									<li>Pharmacien remplaçant:<br/><i>Il exerce en cas d'absence du titulaire ou du gérant dans une officine ou un établissement pharmaceutique dont il n'est pas propriétaire.</i></li>
									<li>Pharmacien Mutualiste</li>
									<li>Pharmacien de Société Minière</li>
								</ul>
								<br/>
 
								<ol>
									<li><a style="background:#eee;">Les Conditions</a>
										<ol>
											<li>Pour être Docteur en Pharmacie:
											<br/><br/>
												<ul class="liste-simple">
													<li>Titulaire du diplôme d'état Français</li>
													<li>Etre enregistré à la préfecture de son lieu d'exercice</li>
													<li>Etre de nationalité Française ou membre de la communauté européenne</li>
													<li>Etre inscrit à l'ordre des pharmaciens.</li>
												</ul>
											</li>
 
											<li>Pour devenir Titulaire:<br/>
											<br/><br/>
												<ul class="liste-simple">
													<li>Justifier d'au moins six mois d'expérience professionnelle en tant que pharmacien d'officine (adjoint ou remplaçant) si le stage de fin d'études de six mois n'a pas été réalisé en officine.</li>
												</ul>
											</li>
										</ol>
									</li>
 
									<li><a style="background:#eee;">Modalités D'exercices</a>
 
										<ol>
											<li><b>Le Pharmacien</b>
												<br/><br/>
												<span style="color:#999;">En premier lieu le port du Caducée est obligatoire pour tous les pharmaciens.</span><br/>
												<br/>
												<figure>
													<figcaption>Le caducée Du Pharmacien</figcaption>
													<img class="common_img" src="images/caducee.jpg" alt="Le caducée Du Pharmacien" title="Le caducée Du Pharmacien"/>
												</figure>
												<br/><br/>
 
													<li>Le Titulaire<br/>
													<br/>
														<span style="color:#999;">Il doit exercer lui même les actes professionnels, doit être propriétaire de son officine en totale indépendance.
														Présence obligatoire, absences courtes et exceptionnelles. Exercice exclusif de la profession.
														En cas de vacances ou de maladie le titulaire doit fermer son officine ou se faire remplacer.
														<ul class="liste-simple">
															<li><i>Plus de 8 jours il doit en informer l'inspection pharmaceutique et le conseil de l'ordre.</i></li>
															<li><i>Pour une absence de moins de un mois il peut se faire remplacer par un remplaçant, un adjoint, un associé ou un étudiant en pharmacie ayant validé sa 5ème année.</i></li>
															<li><i>Une absence de 1 à 4 mois l'associé ne peut plus assurer le remplacement.</i></li>
															<li><i>De 4 mois à un an le titulaire ne peut plus se faire remplacer par l'étudiant.</i></li>
															<li><i>Une absence ne peut pas durer plus d'un an.</i></li>
														</ul>
														</span>
													</li>
 
													<li>L'adjoint<br/>
														<br/>
														<span style="color:#999;">Lorsque l'activité de l'officine devient trop importante le titulaire à pour obligation d'engager un adjoint ou d'avoir un co-titulaire.
														Cette activité est mesuré en tranche de chiffre d'affaire de 1 270 000€ H.T. Un adjoint n'est pas propriétaire,
														il est donc subordonné en ce qui concerne les modalité d'emploi, mais garde une entière indépendance technique au niveau des actes professionnels.</span>
													</li>
 
													<li>Le Gérant (Pharmacie Mutualiste ou Minière)<br/>
														<br/>
														<span style="color:#999;">C'est un pharmacien salarié qui gère la pharmacie pour le compte d'une mutuelle ou une société minière.
														Eventuellement si un pharmacien d'officine s'absente plus d'un an un pharmacien gérant peut gérer l'officine à sa place pour une durée maximale de 2 ans.</span>
													</li>
 
													<li>Le Remplacant<br/>
														<br/>
														<span style="color:#999;">Il peut remplacer le titulaire pour une durée maximum de 1 An.</span>
													</li>
											</li>
										</ol>
									</li>
								</ol>
							</li>
 
							<li><a>L'Etudiant en Pharmacie</a>
								<br/>
								<span style="color:#999;">Les études se déroulent sur 6 années pendant lesquelles l'étudiant effectue des stages en officine.
								Une fois sa troisième année validée il a les même prérogatives qu'un préparateur.
								Il est habilité à délivrer des médicaments sous contrôle du pharmacien.
								Une fois la cinquième année validée il peut remplacer le pharmacien pour une durée de 4 mois maximum.</span>
							</li>
							<li><a>Le Préparateur</a>
								<br/>
								<span style="color:#999;">Il doit être titulaire du brevet professionnel de préparateur en pharmacie.
								Le port du badge (Mortier et Pilon) est obligatoire. Ils sont seul autorisés à seconder le pharmacien dans la préparation ou la délivrance des médicaments.
								Ils assument cette tache sous la responsabilité et le contrôle effectif des pharmaciens. Le C.S.P (Code de la Santé Publique) définit pour le préparateur les fonctions suivantes:<br/>
								Préparation, conditionnement, délivrance, conseil, prévention, information, accueil, vente, vigilance, gestion de stock, hygiène.</span>
							</li>
 
							<li><a>L'Apprenti Préparateur</a>
								<br/>
								<span style="color:#999;">Elève en cours d'apprentissage en voie d'obtenir son B.P de préparateur en pharmacie, il ne peut délivrer de médicament même sous le contrôle d'un pharmacien.</span>
							</li>
 
							<li><a>Les Autres Professionels</a>
								<br/>
								<span style="color:#999;">Vendeuses/rs (en parapharmacie), rayonnistes, magasiniers, secrétaires, ne peuvent délivrer de médicament même sous le contrôle d'un pharmacien.
							</li>
 
						</ol>
					</li>
 
					<li id="2" class="contenus"><a>Les Responsabilités</a>
						<br/>
						<span style="color:#999;">En pharmacie trois types de responsabilités légales existent:</span>
						<br/><br/>					
						<ul class="liste-simple">
							<li><b>La responsabilité civile:</b><br/><i>engage des dommages et intérêts à une victime pour des actes involontaires. (Pharmacien titulaire uniquement)</i></li>
							<li><b>La responsabilité pénale:</b><br/><i>engage des peines d'amende ou de prison (toute personne ayant commis l'infraction)</i></li>
							<li><b>La responsabilité disciplinaire:</b><br/><i>Sanctions pouvant être appliqués lors de manquement à la déontologie, la moralité ou la légalité, par l'ordre des pharmaciens.</i></li>
						</ul>						
					</li>
				</ol>
			</div>
 
			<div id="menu_page" class="not_mobile" >
				<ol class="rectangle-list">
					<li class="chapter">Chapitres:</li>
					<li><a href="#professionel" >Les Professionels de la Pharmacie</a></li>
					<li><a href="#responsabilite" >Les Responsabilités</a></li>
					<a class="up" href="#up">Retour en haut de Page</a>
				</ol>
 
				<br/>
			<span class="plan_link" style="position:absolute;bottom:2vh;"><a href="http://lepreparateurenpharmacie.fr/encyclopedie/legislation-pharma/monopole">Cours Suivant</a> > Le Monopole Pharmaceutique</span>
			</div>
		</section>
	</body>
</html>

et le contenu de progress.php avec le script

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="progress-container">
	<span class="caption_progress not_mobile">Progression dans cette matière:</span>
	<ul class="progressbar">
		<a class="active" href="profession"><li><span>Exercice de La Profession en Officine</span></li></a>
		<a <?php if($page_active >= '2'){echo 'class="active"';} ?> href="monopole"><li><span>Le Monopole Pharmaceutique</span></li></a>
		<a <?php if($page_active >= '3'){echo 'class="active"';} ?> href="dispensation"><li><span>Les Produits Commecialisés à l'officine</span></li></a>
		<a <?php if($page_active >= '4'){echo 'class="active"';} ?> href="#"><li><span>Substances Vénéneuses</span></li></a>
		<a <?php if($page_active >= '5'){echo 'class="active"';} ?> href="#"><li><span>Modalités de délivrance</span></li></a>
		<a <?php if($page_active >= '6'){echo 'class="active"';} ?> href="#"><li><span>L'Officine de Pharmacie</span></li></a>
		<a <?php if($page_active >= '7'){echo 'class="active"';} ?> href="#"><li><span>Médicaments à dispensation Particulière</span></li></a>
		<a <?php if($page_active >= '8'){echo 'class="active"';} ?> href="#"><li><span>L'Ordre National Des Pharmaciens</span></li></a>
	</ul>
</div>
 
<button onclick="Back()"><i class="fa fa-arrow-left" aria-hidden="true"></i></button>&nbsp;<button onclick="Next()"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>

et le script qui suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
        var index = 0
        var max = document.querySelectorAll( '.contenus').length
        console.log( max )
        function Back()
        {
            if ( index > 0 )
            {
                index--
                window.location = "#" + index
            }
        }
        function Next()
        {
            if ( index < max )
            {
                index++
                window.location = "#" + index
            }
        }
</script>

merci de votre aide

**chadoum** · 27/05/2016, 09h35

En fait, ton include php ne te sert à rien, tu peux tout faire en html. Reprends ton code de progress.php, mets-le dans ta page html, enlèves le php et reprends ce que je t'avais envoyé pour faire fonctionner les ancres.
Je crois que tu te compliques la vie

**VinceCotta** · 27/05/2016, 23h12

Oui je te crois malheureusement le progress est un fichier de chapitrage dont je me sert pour plusieurs fichiers, du coup si je le change c'est pratique de bosser ainsi. En tout cas j'adhère. Du coup c'est à cause de ca que ca ne marche pas?

**chadoum** · 30/05/2016, 09h23

Ton bout de code js est intégré comment ? Dans l'html ou dans un fichier à part ?

**VinceCotta** · 31/05/2016, 13h20

Si je ne dis pas de bêtises il est inclus dans le html mais dans un include PHP je vérifie ce soir pour confirmer

Bouton pour modifier une ancre

JavaScript

Discussions similaires

Partager

Partager