Redimenssionner une div avec du javascript

Résolu
Absot Messages postés 819 Statut Membre -  
loicDu28 Messages postés 342 Statut Membre -
Bonjour, j'ai un formulaire qui utilise les slides Jquery (2 slides).

Au départ, l'utilisateur est sur le premier slide, il remplit le formulaire et une fois fait, il le valide, il arrive sur le deuxième slide où un traitement du formulaire a été fait et le slide mis à jour avec requête AJAX.

Arrivé ici, l'utilisateur a la possibilité en cliquant sur une flèche, de revenir au premier slide mais le problème est que la hauteur du formulaire (500px) est plus courte que celle du traitement affiché (~700px) donc en dessous du formulaire, j'ai environ 200px vide (blanc).

Je souhaiterais pour éviter ca, de redimensionner la hauteur de la div de mon formulaire au moment où l'utilisateur décide de retourner en arrière.

Je me suis dis qu'il faudrait faire quelque chose de ce type: 
$('#idDelaDiv').css('height', '500');


Mais ca ne fonctionne pas, j'ai essayé tout les id de mes div mais rien ne se passe, je voudrais donc savoir pourquoi.

Voilà le code de ma page: 
<!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>Formulaire</title>
<link rel="stylesheet" href="style.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function()
{
	//Configuration
	//var retour = true;
	var tempsTransition = 1000;
	var currentPosition = 0;
	var slideWidth = 590;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	var interval;

	// Supprime la scrollbar en JS
	$('#slidesContainer').css('overflow', 'hidden');

	// Attribue #slideInner à toutes les div .slide
	slides.wrapAll('<div id="slideInner"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
	'float' : 'left',
	'width' : slideWidth
	});

	// Longueur de #slideInner égale au total de la longueur de tous les slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);



	$('#slidesContainer div.slide input').click(function()
	{
		// Determine la nouvelle position
		if($(this).parent().attr('id') == "slide1")
		{
			currentPosition = 1;
			go();
		}else if($(this).parent().attr('id') == "slide2")
		{
			currentPosition = 0;
			resize();
		}
		// Fais bouger le slide
		$('#slideInner').animate(
		{
			'marginLeft' : slideWidth*(-currentPosition)
		},tempsTransition);
	});

});
		
function resize()
{
	$('#slideInner').css('height', '500');
}

</script>

<html>
<body>

<div id="slideshow">
  
  <div id="slidesContainer">
    
    <div class="slide" id="slide1">
      --- Formulaire --- 	
	<input type="image" src="images/apres.PNG" id="rightControl" class="apres" />
   </div>
    
    <div class="slide" id="slide2">
       <div id="blop">
       </div>
       <input type="image" src="images/avant.PNG" id="leftControl" class="avant" />
   </div>
    
  </div>
</div>
</body>
</html>


9 réponses

Réponse 1 / 9
loicDu28 Messages postés 342 Statut Membre 53
 
Bonjour,

Je pense que tu n'est pas loin en voulant utiliser la méthode .css de jQuery
Mais essaye plutôt de la manière suivante : 
$('#slideInner').css('height', '500px');

Cela donne quel résultat ?

Cordialement.
0
Réponse 2 / 9
Absot Messages postés 819 Statut Membre 44
 
Cela ne fonctionne pas, j'ai toujours mon problème de hauteur.

Voilà ce que j'ai au début:
http://nsa25.casimages.com/img/2011/01/06/110106103714826398.png

Et voilà ce que j'ai après (quand j'y retourne):
http://nsa26.casimages.com/img/2011/01/06/110106103809898175.png
0
Réponse 3 / 9
loicDu28 Messages postés 342 Statut Membre 53
 
Tout d'abord, je crois qu'il y a un bug car je ne voit pas ta réponse enfin bref.
Je vient de faire un test chez moi en utilisant le code 
$('#slideInner').css('height', '500');
bien entendu que j'ai adapté à mon code et cela fonctionne parfaitement chez moi.

As-tu essayé de faire cela : 
$('#slidesContainer div.slide input').click(function()
	{
		// Determine la nouvelle position
		if($(this).parent().attr('id') == "slide1")
		{
			currentPosition = 1;
			go();
		}else if($(this).parent().attr('id') == "slide2")
		{
			currentPosition = 0;
			$('#slideInner').css('height', '500');

		}
		// Fais bouger le slide
		$('#slideInner').animate(
		{
			'marginLeft' : slideWidth*(-currentPosition)
		},tempsTransition);
	});

cela fonctionne t'il ?
Si non, est-tu sur que "slideInner" soit un id ? est-il utilisé en tant qu'id ou que name ailleur dans ton code ?

Cordialement.
0
Réponse 4 / 9
Absot Messages postés 819 Statut Membre 44
 
Bizarre que mon post précédent ne soit pas accessible, voici ce qu'il contenait: 

Cela ne fonctionne pas, j'ai toujours mon problème de hauteur.

Voilà ce que j'ai au début:
http://nsa25.casimages.com/img/2011/01/06/110106103714826398.png

Et voilà ce que j'ai après (quand j'y retourne):
http://nsa26.casimages.com/img/2011/01/06/110106103809898175.png


Sinon oui j'ai bien essayé mais ça ne fonctionne malheureusement pas.

Voilà le code utilisé pour le slideInner: 

// Attribue #slideInner à toutes les div .slide
	slides.wrapAll('<div id="slideInner"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
	'float' : 'left',
	'width' : slideWidth
	});

	// Longueur de #slideInner égale au total de la longueur de tous les slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
loicDu28 Messages postés 342 Statut Membre 53
 
C'est bon le problème d'affichage est résolu, je pense que c'étais un problème de connexion enfin bref!!
est-tu sûr de passer dans ta boucle 
else if($(this).parent().attr('id') == "slide2") 
  { 
   currentPosition = 0; 
   resize(); 
  }
??
Pour tester cela, met par exemple un alert à l'intérieur comme ceci : 
else if($(this).parent().attr('id') == "slide2") 
  { 
     alert("a");
   currentPosition = 0; 
   resize(); 
  }


Cordialement.


Si ton problème est résolu n'oublie pas de changer son statu en "Résolu"!!
Surtout tiens au courant tes interlocuteurs!!
0
Réponse 6 / 9
Absot Messages postés 819 Statut Membre 44
 
Oui je suis sûr de bien aller dans ma boucle puisque sinon mon slide ne bougerais pas.

J'ai quand même vérifié avec des alerts dans chaque parties et ça fonctionne bien.
0
Réponse 7 / 9
loicDu28 Messages postés 342 Statut Membre 53
 
C'est bizarre que cela ne réalise pas ton .css

As-tu firebug d'nstaller sur le PC ?
Si oui, regade ce que vaux la taille de ton slideInner avant et après ?!

Cordialement.
0
Réponse 8 / 9
Absot Messages postés 819 Statut Membre 44
 
J'ai réussi à trouver comment faire, à la place de: 

$('#slideInner').css('height', '500');


J'ai mis: 

 
slides.wrapAll('<div id="slideInner"></div>')
			// Float left to display horizontally, readjust .slides width
			.css({
			'height' : '720px'
			});


Ca fonctionne, c'est donc résolu, je te remercie de ton aide. :)
0
Réponse 9 / 9
loicDu28 Messages postés 342 Statut Membre 53
 
Cool si tu as réussit alors ;)

De rien, je t'est aidé avec plaisir ^^

Bonne continuation
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses