11488 sujets

JavaScript, DOM et API Web HTML5

Ne pas remonter en haut de la page lors d'un clic

Salut,

voici mon problème, j'ai une galerie d'image contenant assez bien d'images, ce qui fait que la page qui affiche les images et très grande.

Quand je clic sur une image, j'affiche des informations juste en dessous de celle-ci, seulement voilà, quand je clic sur une image qui se trouve tout en bas (après avoir scrollé la page), celle-ci remonte tout en haut et donc, je dois re-scroller vers le bas pour voir les infos que j'ai affiché.

Comment puis-je faire pour que le scroll reste au même endroit ?

J'ai déjà essayé avec un "return false" mais ca ne fonctionne pas ...
Non même pas, en fait j'utilise jqueryUI pour arranger les images dans l'ordre qu'on veut et donc chaque images se présentent comme suit :


<div class='smallImg' id='01' onclick='javascript:void(0)'>

	<img src='../images/01.jpg' width='150' onclick='javascript:void(0)'/>
	
	<div class='imgControle' onclick='javascript:void(0)'>
		<a href=' onclick='javascript:void(0)'' class='deleteImg' title='Supprimer'> </a>
	</div>

</div>


Ce qui affiche :

- une DIV "smallImg" qui sert pour le "drag and drop" de jquery
- l'image en question
- une div 'imgControle' avec un lien pour supprimer l'image

Le problème survient dès que je clic sur la div principale, sur l'image ou sur le lien pour supprimer l'image.

Je sais que ceci est du Javascript mais je ne sais pas si la solution (si il en existe une) à ce problème est du html ou du javascript (ou les deux) c'est pourquoi je poste ici.
Je pense avoir trouvé la solution, en fait, sur la derniere ligne, si je n'ai qu'une seule image, au moment ou je la clic, l'espace qu'elle occupait n'existe plu et donc, visiblement, la hauteur de la page change ou du moins, celle de la div qui contient toutes les images ...

J'ai donc défini la hauteur de la DIV principale, c'est à dire la DIV qui contient toutes les images et j'ai mis un overflow: auto; dessus et le problème semble réglé.


J'ai essayé en faisant ne laissant juste que la DIV principale donc : 


<div id='imgList'>
	<div class='smallImg'  onclick='javascript:void(0)'></div>
</div>


Avec ceci comme CSS :


.smallImg {
	position: relative;
	padding: 3px;
	margin: 0 10px 10px 0;
	float: left;
	width: 150px;
	height: 246px;
	background: #EEE;
	border: 1px solid #CCC;
	text-align: center;
}


Et ceci dans le HEAD pour appeler la fonction "sortable" de Jquery :


$("#imgList").sortable({ 
	cursor: 'move', 
	distance: 0, 
	revert: true, 
	tolerance: 'pointer', 
	});


Et le problème est toujours la Smiley bawling
Modifié par jultoys (28 Apr 2009 - 14:07)
Sujet clos
Aller à