11540 sujets

JavaScript, DOM et API Web HTML5

Scroller jusqu'au titre lors de l'ouverture d'une div

Bonjour,

Je vais essayé d'expliquer clairement mon problème.
J'ai 3 images, chacune d'elle permet d'ouvrir une div cachée.
Quand une div s'ouvre, les autres se ferment (afin qu'il n'y ait pas 36 div ouvertes en même temps).
Lors de l'apparition de la div cachée, je veux que ça scrolle jusqu'au titre de la div.

SOUCIS : lorsque la div 1 est déjà affichée et que je clique sur la 2ème image pour faire apparaître la div 2, ça descend 2x trop bas (au lieu de scroller seulement jusqu'au titre) et je n'arrive pas à empêcher ça...

Voici mon code :

<!--images cliquables-->
<a href="#expli01" id="01">image01</a>
<a href="#expli02" id="02">image02</a>
<a href="#expli03" id="03">image03</a>

<!--div cachées qui apparaissent lors du clic sur une image-->
<div style="display:none;" id="expli01">texte d'explication</div>
<div  style="display:none;" id="expli02">texte d'explication</div>
<div  style="display:none;" id="expli03">texte d'explication</div>



	$(document).ready(function(){
			$('#01').click(function() {
				$('#expli01').slideDown(1000);
				$('html, body').animate({
					scrollTop: $("#expli01").offset().top
				}, 1000);
				$('#expli02').slideUp();
				$('#expli03').slideUp();
				return false;
			});
			$('#02').click(function() {
				$('#expli02').slideDown(1000);
				$('html, body').animate({
					scrollTop: $("#expli02").offset().top
				}, 1000);
				$('#expli01').slideUp();
				$('#expli03').slideUp();
				return false;
			});
			$('#03').click(function() {
				$('#expli03').slideDown(1000);
				$('html, body').animate({
					scrollTop: $("#expli03").offset().top
				}, 1000);
				$('#expli01').slideUp();
				$('#expli02').slideUp();
				return false;
			});
		});		
	</script>


Si vous avez une solution, merci de donner des détails (je ne suis qu'une débutante Smiley cligne )
N'hésitez pas à demander + de précisions s'il le faut !
Modifié par AML (16 Dec 2013 - 15:27)
Bonjour,

Sans apporter vraiment de solution, 
<a href="#expli01" id="01">
Les "id" doivent commencer par une lettre, non ??
Un peu de CSS serait aussi le bienvenu Smiley rolleyes ...
Effectivement un id doit commencer par une lettre.
J'ai donc respectivement remplacé mes #01,# 02, #03 par des #img01, #img02 et #img03.

Pour le CSS, à part le "display:none;" des div cachées, le reste n'est pas utile pour répondre à mon problème Smiley smile

Du coup, tu aurais peut-être une solution à proposer ? Ou est-ce que mon problème te paraît encore flou ?
Je ne sais pas si ceci te va :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Down-Up</title>
    <style type="text/css">
	/*<![CDATA[*/
		#nav {position: fixed; top:10px;left:10px;}
		#haut {margin-top:50px;}
		#expli01, #expli02, #expli03 {display:none;height:800px;border:1px solid gray;}
		a:link, a:visited {color:black;}
		a:hover {color:blue}
         /*]]>*/
    </style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
	//<![CDATA[
	$(document).ready(function(){
				$('#img01').click(function() {
					$('#expli01').slideDown(1000);
					$('#expli02').slideUp();
					$('#expli03').slideUp();
					return false;
				});
				$('#img02').click(function() {
					$('#expli02').slideDown(1000);
					$('#expli01').slideUp();
					$('#expli03').slideUp();
					return false;
				});
				$('#img03').click(function() {
					$('#expli03').slideDown(1000);
					$('#expli01').slideUp();
					$('#expli02').slideUp();
					return false;
				});
			});		
	//]]>
   </script>
  </head>
  <body>
	<div id="nav">
		<!--images cliquables-->
		<a href="#expli01" id="img01">image01</a>
		<a href="#expli02" id="img02">image02</a>
		<a href="#expli03" id="img03">image03</a>
	</div>
	<div id="haut"></div>

	<!--div cachées qui apparaissent lors du clic sur une image-->
	<div id="expli01">texte d'explication 1</div>
	<div id="expli02">texte d'explication 2</div>
	<div id="expli03">texte d'explication 3</div>
  </body>
</html>
Désolée mais je ne vois pas trop ce que tu as modifié.

Dans le script tu as enlevé les "$('html, body').animate({ scrollTop: $("#expli02").offset().top }, 1000);.
Donc tu as enlevé l'animation qui permet de scroller jusqu'au titre.
Et tu as également ajouté du CSS.

Mais je ne comprends pas quel élément peux m'aider à scroller jusqu'au titre peu importe l'image cliquée ?
Pourrais-tu expliquer davantage ce que tu entends par "scroller jusqu'au titre" ?
Je ne suis pas certain de bien saisir ...
Bonjour,

Effectivement je crois que c'est la solution à mon problème.
Je n'ai pas le temps de tester ça maintenant mais je te redirais si c'est bien ça !

Merci beaucoup en tout cas !
Bon finalement ça ne fonctionne qu'à moitié :
- quand je clique sur l'image la div s'ouvre mais ça ne scrolle pas jusqu'au titre
- quand je double-clique ça ouvre la div, ça scrolle jusqu'au titre mais si je double-clique sur l'image 2 ça descend trop bas...
Je ne suis pas sûr de bien saisir l'effet que tu souhaites, mais il me semble que tu devrais t'intéresser au plugin jQuery scrollTo(), et NON PAS scrollTop() !

Voici une page intéressante à cet égard : tutoriel scrollTo()

Cordialement,

LDDSoft
AML a écrit :
Bon finalement ça ne fonctionne qu'à moitié :
- quand je clique sur l'image la div s'ouvre mais ça ne scrolle pas jusqu'au titre
- quand je double-clique ça ouvre la div, ça scrolle jusqu'au titre mais si je double-clique sur l'image 2 ça descend trop bas...

Tu parlais de mon LIEN ? Je n'ai pas du tout ce comportement là chez moi.
Modifié par SolidSnake (20 Dec 2013 - 10:51)
Sujet clos
Aller à