Redimenssionner une div avec du javascript

Résolu

Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention -
loicDu28 Messages postés 332 Date d'inscription Statut Membre Dernière intervention - 6 janv. 2011 à 16:14

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>

A voir également:

Redimenssionner une div avec du javascript
Telecharger javascript - Télécharger - Langages
Div c++ - Télécharger - Langages
A javascript error occurred in the main process - Forum Windows
A javaScript error occurred in the main process - Forum Handicap / Accessibilté
Erreur #125 javascript - Forum Mozilla Firefox

9 réponses

Réponse 1 / 9

loicDu28 Messages postés 332 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 2 / 9

Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention 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

Réponse 3 / 9

loicDu28 Messages postés 332 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 4 / 9

Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention 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);

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

Posez votre question

Réponse 5 / 9

loicDu28 Messages postés 332 Date d'inscription Statut Membre Dernière intervention 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!!

Réponse 6 / 9

Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 7 / 9

loicDu28 Messages postés 332 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 8 / 9

Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention 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. :)

Réponse 9 / 9

loicDu28 Messages postés 332 Date d'inscription Statut Membre Dernière intervention 53

Cool si tu as réussit alors ;)

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

Bonne continuation

Discussions similaires

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

javascript:void(0);

comment remplacer un #div/0! par une cellule vide

Faire un echo dans un script JS

Votre réponse

Discussions similaires