Table des matières et points d'ancrage

Version imprimable

1 pièce(s) jointe(s)

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:

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 ...:D
Merci d'avance ... Jef

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:

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>

16/06/2013, 09h57
JefReb

Merci danielhagnoul,
Que veut dire:

Citation:

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:

<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.
16/06/2013, 22h13
JefReb

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

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:

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>

17/06/2013, 08h36
SpaceFrog

Citation:

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
17/06/2013, 10h37
danielhagnoul

Citation:

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 :faq: 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.
17/06/2013, 11h12
NoSmoking

Bonjour,

Citation:

je me demande s'il est vraiment utile que j'y consacre à nouveau une bonne dizaine d'heures.

diantre tu bosses fort :mouarf:

On peut lire le code suivant : scrollTop:position.top-200, pourquoi ne pas récupérer plutôt la hauteur de la bannière?
17/06/2013, 21h22
JefReb

Mea culpa,
Oui, je n'ai pas forcément lu tous les topics et les faqs du site.
Quand j'ai un problème, je cherche un peu partout pour essayer de comprendre et quand je n'y arrive plus, et ben j'ose poser la question. J'essaye d'être clair et de donner des exemples simples qui demande aussi du temps. Parfois, cela apporte la solution et parfois non.
Donc je suis désolé, si par ignorance, certains y passent beaucoup de temps.
La première fois, on m'a reproché de ne pas utiliser [code], [url] ou autre, j'ai fait attention.
La deuxième fois en mettant un exemple simple on me dit d'utiliser jsfiddle. Bon d'accord, je m'y suis mis et je m'aperçois que certains le détestent et cela m'a masqué en partie mon problème puisque cela marchait sur jsfiddle, mais pas sur un serveur.
Un autre me dit d'utiliser Codepen, avec un exemple qui ne marche pas.
J'ai essayé, pareil.
Je veux bien prendre des claques, mais permettez un peu que les novices, même si je n'en suis pas tout à fait un, comprennent, apprennent à utiliser les outils et à poser les questions.
Je me suis peut être compliqué la vie, mais il n'est pas forcément facile de trouver sa solution dans les faq.
Un autre regard est quelquefois plus rapide à condition de bien poser la question et mettre un code simple en ligne.
Merci à danielhagnoul pour sa réponse que j'ai mis immédiatement dans mon code.
Pour NoSmoking qui m'a déjà dépanné, a-t-il une solution différente pour récupérer la hauteur de la bannière et modifier le script?
Merci
Jef

Code:

1 2 3 $('html, body').animate({ scrollTop:position.top -$('#bandeau').height() }, 'slow');
mais là il faut que tout ce qui est au dessus soit contenu dans #bandeau!

18/06/2013, 20h37
JefReb

Merci NoSmoking, je vais essayer de suite ...
Jef