Discussion :

[jocelyn77]

Bonjour à tous, je viens demander de l'aide pour la 3ème fois de la semaine (ce jquery me pose pas mal de prob decidement ) j'ai actuellement un soucis sur ma fonction dont le but et de scroller vers le champ vide détecté apres validation d'un formulaire.
La partie detection se passe bien j'ai fait un test et je recupère aussi correctement la hauteur de mon id mais le scrolling ne se fait pas.Cela doit provenir d'interaction entre les different element de ma fonction mais je ne vois pas comment...

Voici la fonction en jquery:

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
jQuery(function($) {
	$('#form').live("submit", function(){
		if ($.trim($("#initiateur").val()).length == 0) { 	//test une chaine sans caractère plutot qu'un champ vide pour 
			alert('champ ini vide');						//eviter de considérer les espace ou les retour a la ligne.
			$('#initiateur').focus();
			$('#initiateur').css('border-color','#8a1f11');
			hauteur=$('#initiateur').offset().top;
			$('html,body').animate({scrollTop:hauteur},1000);    //on recupere la hauteur de l'id
			return false;
		};
		$('#changement').val();
		if ($.trim($("#changement").val()).length == 0) {
			alert('champ changement vide');
			return false;
		};
	});
	//partie datepicker
	$('#datecreation, #datedebut, #datefin').datepicker({
		dateFormat : 'yy-mm-dd' //permet a la bdd d'interpréter comme format date!
	});
})

et voici le code html:

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
15
16
17
18
19
<form action="verif_modif.php" method="POST" id="form" >
<table class="ombrage" border="0" cellspacing='0' cellpadding='0' width="90%;" style="box-shadow:2px 2px 4px black;" >
<tr>
	<td class="colonne1" ><strong>Initiateur : </strong></td>
	<td class="colonne_colspan" colspan="2" >
		<textarea type="text" name="ini" id="initiateur" rows="5" cols="50" ><?php echo $data['initiateur']; ?></textarea>
	</td>
</tr>
<tr>
	<td class="colonne1" ><strong>Changement : </strong></td>
	<td class="colonne_colspan" colspan="2" >
		<textarea type="text" name="changement" id="changement" rows="5" cols="50" ><?php echo $data['changement']; ?> </textarea>
	</td>
</tr>
<tr>
				<td style="padding-bottom:8px;" colspan="3" class="validation">
					<center><INPUT border="0" src="images/bouton_validation.png" type="image" Value="submit" ></center>
				</td>
</tr>

[kakashi99]

salut,

peux-tu redonner ton code html ?
est-ce que tu as une erreur dans la console javascript ?

[jocelyn77]

Le code html a été ajouté

apres avoir tester quelque trucs je me suis apercu que la methode .focus() actionnait déja un scroll vers l'élément a qui je donne le focus (le champs vide donc) ce qui est plutot cool puisque c'est ce que je recherche mais malheureusement c'est un scroll rapide par defaut du navigateur (ya pas le zoli effet ) et j'ai cherché mais la methode focus ne prend pas de parametre pour gérer se scroll auto.Mais peut ere peut on rajoué une methode sur le focus et eviter d'utiliser la hauteur de l'id + la methode animate()...

et non je n'est pas d'erreur dans ma console (je suis sur firefox)

[kakashi99]

bah, en déplaçant le .focus après le .animate ça marche très bien...

[edit]par contre attention, je te l'ai déjà dit sur l'autre sujet .live() est "deprecated" et supprimée en jQuery 1.9. mieux vaut utiliser .on()

[jocelyn77]

Merci je vais essayer ca, mais le probleme c'est que je suis obligé de rester en jquery 1.7, le .on() y est-il deja intégré?

[jocelyn77]

quand je déplace le focus apres l'animate j'ai effectivement un scroll mais celui du focus (scroll rapide par defaut) et non celui de l'animate