Table des matières et points d'ancrage

**JefReb** · 15/06/2013, 14h17

Bonjour à tous,
après avoir posté dans le forum CSS et avoir trouvé une solution pure CSS, je voudrai comprendre pourquoi la solution en JS ne fonctionne pas chez moi avec Dreamweaver et Wampser sur mon PC alors que Jquery fonctionne bien avec lightbox, sexylightbox et autres boxes que j'ai testé.
Je me suis replongé dans mon code et l'ai simplifié beaucoup et il fonctionne parfaitement sur jsfiddle:
http://jsfiddle.net/K9vmr/1/

Par contre, alors que je suis sûr de l'endroit de mon jquery.js à la racine du dossier, il n'est pas pris en compte. J'ai beau utiliser les outils firebug ou voir le code, je ne vois pas le problème.
j'ai codé:

Code :

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

1
2
3
4
5
6
7
8
9
10
<script  language="JavaScript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(".ancre").click(function(){
	var hrefValue = $(this).attr("href").replace('#','');
    var position = $("a[name="+hrefValue+"]").position();
    $('html, body').animate({  
        scrollTop:position.top-200
    }, 'slow');
});
</script>

qui fonctionne pourtant avec les autres lightbox.
Si quelqu'un a le courage (et le temps) de regarder mon code directement avec sa propre bibliothèque jQuery, cela me permettra de dormir ...

Merci d'avance ... Jef

**danielhagnoul** · 16/06/2013, 00h17

Bonsoir

Votre code jQuery fonctionne très bien, mais n'oubliez pas de l'inclure dans un "document ready".

Votre version de jQuery est obsolète, voir : http://www.developpez.net/forums/d13...t-disponibles/.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $( function(){ // forme abrégée de $( document ).ready( function(){ ... });
 
	$( ".ancre" ).on( "click", function(){
		var hrefValue = $( this ).attr( "href" ).replace( '#', '' ),
			position = $( "a[name='" + hrefValue + "']").position();
 
		$( "html, body" ).animate({ "scrollTop" : position.top - 200 }, 'slow');
	});
 
    });
</script>

**JefReb** · 16/06/2013, 09h57

Merci danielhagnoul,
Que veut dire:

n'oubliez pas de l'inclure dans un "document ready"

?
J'ai modifié et codé exactement votre code pour avoir la dernière version en ligne et non pas sur mon disque pour être sûr:

Code :

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

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

J'ai essayé sur mon PC avec Wamp Server Cela ne marche pas.
J'ai mis le fichier dans mon serveur Synology où je teste toutes mes pages html et Php et cela ne marche pas.
J'ai mis le fichier sur mon serveur Internet:
http://www.jefrebaud.fr/sample5.html
Il ne fonctionne pas non plus.

Quand on clique sur un lien tel que "Article 2", le titre "Article 2" doit se placer immédiatement sous le bandeau. Alors que là il se place derrière.
Donc le jQuery ne s'exécute pas car, le code a été mis sur JsFiddle et là il fonctionne!
http://jsfiddle.net/K9vmr/1/

Je ne sais plus quoi faire.

**JefReb** · 16/06/2013, 22h13

N'ayant pas de réponse, sur le document ready et à force de lire les forum anglais, j'ai fini par trouver le pourquoi du comment.
Il suffit de placer le script à la fin du fichier juste avant le </body> pour être sûr qu'il soit bien chargé. C'est du moins ce que j'ai cru comprendre et cela fonctionne parfaitement maintenant.
C'était pas grand chose, mais cela m'a pris pas mal de temps.
Merci à ceux qui o,nt cherché à m'aider.
Jef

**danielhagnoul** · 16/06/2013, 22h25

Bonsoir

jsfiddle que je déteste utiliser, utilise automatiquement un environnement HTML, JS, jQuery correct. Ce n'est pas le cas de votre fichier sample. Voilà une page de test correcte, testez vous-même, il suffit de copier-coller :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Jean-Francois Rebaud">
	<title>Accueil</title>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script>
		"use strict";
 
		$( function(){
 
			$( ".ancre" ).on( "click", function(){
				var hrefValue = $( this ).attr( "href" ).replace( "#", "" ),
					position = $( "a[name='" + hrefValue + "']" ).position();
 
			    $( "html, body" ).animate({ "scrollTop" : position.top-200 }, "slow" );
			});
 
		});
	</script>
	<style>
		body 	            { width:960px; margin:0 auto; }
		#bandeau 		    { position:absolute; left:0; top:0; right:0; 
		                      width:960px; height:205px; margin:0 auto;
		                      text-align:center; z-index:10; background-color:#F60; }
		html>body #bandeau  { position:fixed; } 
		#hornav 		    { position:absolute; left:0; top:122px; width:960px; height:35px; padding:0; background-color:#FF3; text-align:center; }				  
		#page               { width:auto; height:auto; min-height:600px; padding-top:210px; padding-bottom:50px; color:#000058;
		                      border: 1px solid orange; }
		#contenu            { width:800px; height:auto; margin:0 auto 10px auto; padding:10px; z-index:1; 
		                      border: 1px solid blue; }
		.matiere			{ width:450px; height:auto; margin:30px auto; padding:5px;
							  font-style:italic; color: #009; background-color:#6F9;}
		.matiere li 		{ color: #001abd; }
		.matiere li a	    { text-decoration:none; }
		.matiere li a:hover { color:#ff0000; white-space:nowrap; text-decoration:underline; }
		.titreh1            { width:620px; margin:0 auto; padding-top:0px; } 
		.titreh2            { width:620px; margin:0 auto; padding-top:8px; } 
		.titrepage 		    { position:absolute; top:160px; left:150px; width:620px; height:45px;
							  margin:0 auto; padding:0; }
	</style>
</head>
<body> 
	<a name="debut"></a>
 
	<div id="bandeau" class="largeur">
	    <h1 class="titreh1">Titre du Site</h1>
	    <h2 class="titreh2">Titre section</h2>
	    <div id="hornav">
	        <p>Menu Menu Menu Menu Menu Menu Menu Menu</p>
	    </div>
	    <h2 class="titrepage">Titre de la page</h2>
	</div><!-- fin du bandeau -->
 
	<div id="page">
 
		<div id="contenu">
 
	    	<div class="matiere">
	        	<ul>
	            	<li><a class="ancre" href="#syn1">Article 1</a></li>
	            	<li><a class="ancre" href="#syn2">Article 2</a></li>
	            	<li><a class="ancre" href="#syn3">Article 3</a></li>
	        	</ul>
	    	</div>    
 
			<a name="syn1"></a><h2>Article 1</h2>
	    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.</p> 
			<a name="syn2"></a><h2>Article 2</h2>   
			<p>Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat.</p>
			<a name="syn3"></a><h2>Article 3</h2>
			<p>Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede.</p>
		</div><!-- Fin de contenu --> 
 
	</div><!-- Fin de page -->  
</body>
</html>

**SpaceFrog** · 17/06/2013, 08h36

N'ayant pas de réponse, sur le document ready et à force de lire les forum anglais, j'ai fini par trouver le pourquoi du comment.

Il y en a qui se compliquent vraiment la vie a aller chercher ailleurs ce qu'ils ont à portée de main ...

http://www.developpez.net/forums/d11...s/#post5094379

**danielhagnoul** · 17/06/2013, 10h37

Envoyé par SpaceFrog

Il y en a qui se compliquent vraiment la vie a aller chercher ailleurs ce qu'ils ont à portée de main ...

Bonjour SpaceFrog, renvoyons plutôt a la

http://javascript.developpez.com/faq/jquery/

Tout membre de DVP est censé : avoir lu les règles générales et les règles du forum, avoir consulté la FAQ et les tutoriels avant de poser une question accompagnée de ses codes HTML, CSS et JS. Les codes serveur sont interdits, mais on ne voit plus que cela. Les codes doivent normalement accompagner la question, mais il est de plus en plus courant de devoir consulter des sources externes.

La rédaction de la FAQ jQuery m'a demandé pas mal de travail, avec l'arrivée à maturité de la branche 2 il est temps d'actualiser cette FAQ, mais lorsque je vois le peu de cas que la plupart des forumeurs en font, je me demande s'il est vraiment utile que j'y consacre à nouveau une bonne dizaine d'heures.

Table des matières et points d'ancrage

jQuery

Vue hybride

Discussions similaires

Partager

Partager