Discussion :

[AML26]

Bonjour,
Je fais apparaître une div cachée avec .show(), jusque là c'est bon.
Maintenant j'aimerais qu'à l'ouverture de la div, la page descende au niveau du titre de cette div ;
comme le système des ancres en HTML5 où, lorsque l'on clique sur un mot, la page défile jusqu'à une div précise.

Voici mon code actuel :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<!--Code HTML5, image sur laquelle je clique afin d'afficher ma div-->
<a href="#expli01" id="01">
	<div class="view view-ninth marge_gauche">
		<img src="img/welsons_nb.png"/>
 	</div>
</a>
<!--Code HTML5, div qui s'ouvre au clic-->
<div id="expli01"  title="title01" class="marge_expli">
content
</div>

Code :

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

1
2
3
4
5
6
$(document).ready(function(){
	$('a#01').click(function() {
		$('div#expli01').show(1000);
		return false;
	});
});

J'ai essayé ça mais ça ne fonctionne pas :

Code :

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

1
2
3
4
5
6
$(document).ready(function(){
	$('a#01').click(function() {
		$('div#expli01[title="'+this.title01+'"]').show(1000);
		return false;
	});
});

Si vous avez une solution, ce serait super

[Bovino]

Code :

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

$('div#expli01[title="'+this.title01+'"]')

Ton sélecteur est inutilement compliqué (et donc difficile à parser pour jQuery).
Comme un identifiant doit être unique dans la page, $('#expli01') est amplement suffisant.

Sinon, pour ta question, inutile d'utiliser jQuery pour untruc que JavaScript fait nativement :

Code :

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

HTMLElement.scrollIntoView();

[danielhagnoul]

Bonjour

Exemple :

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
<img id="img01" src="../images/imageTest.png"/>
 
<div id="expli01">
	<p>
		Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page 
		avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les 
		années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser 
		un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais 
		s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. 
		Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant 
		des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications 
		de mise en page de texte, comme Aldus PageMaker.
	</p>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$( "#img01" ).on( "click", function(){
	var jObj = $( "#expli01" );
 
	jObj.show( 1000 );
 
	$( "html, body" ).animate({ 
		"scrollTop": jObj.offset().top 
	}, 1000 );
 
	return false;
});

[AML26]

Merci d'avoir répondu si rapidement.

Bovino, j'ai essayé "HTMLElement.scrollIntoView();" comme ça :

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
	$(document).ready(function(){
		$('a#01').click(function() {
			$('div#expli01').show(1000);
			$('div#expli01').scrollIntoView();
			return false;
		});

Je l'ai essayé aussi avant le show.
Mais je suppose qu'il faut l'intégrer d'une autre manière parce que ça ne marche pas.

Et pour danielhagnoul, j'ai essayé :

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
<script type="text/javascript">
$(document).ready(function(){
        $( "#a01" ).on( "click", function(){
	var jObj = $( "#expli01" );
 
	jObj.show( 1000 );
 
	$( "html, body" ).animate({ 
		"scrollTop": jObj.offset().top 
	}, 1000 );
 
	return false;
        });
        });
</script>

Mais ça ne marche pas non plus.

Alors est-ce que vous pourriez précisez ou et comment insérer tout ça ?
Ce serait vraiment sympa
Merci d'avance !

[SpaceFrog]

javascript natif != jquery
tu ne peux pas appliquer des methodes natives js à un objet jquery

Et apriori tu n'as pas compris ce que t'as dit Bovinon plus haut .. un id est unique
$('div#expli01').
$('#expli01')ensuite pour passer de JQ à DOM

$('div#expli01').get(0).scrollIntoView();ou
$('div#expli01')[0].scrollIntoView();

[AML26]

Merci pour ta réponse mais je n'ai toujours pas compris où je dois placer ça :

Code :

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

$('div#expli01').get(0).scrollIntoView();

ou

Code :

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

$('div#expli01')[0].scrollIntoView();

Si vous pouviez reprendre le code de mon 1er message afin de m'indiquer concrètement ce que je dois remplacer et corriger, ce serait gentil !

[Bovino]

je n'ai toujours pas compris où je dois placer ça

Ben... à l'endroit qui correspond au moment où tu veux faire le scroll...

[AML26]

Dans le code HTML5 ?

Code html :

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

1
2
3
4
5
6
7
8
9
10
<!--Code HTML5, image sur laquelle je clique afin d'afficher ma div-->
<a href="#expli01" id="01">
	<div class="view view-ninth marge_gauche">
		<img src="img/welsons_nb.png"/>
 	</div>
</a>
<!--Code HTML5, div qui s'ouvre au clic-->
<div id="expli01"  title="title01" class="marge_expli">
content
</div>