Redimenssionner une div avec du javascript

Résolu/Fermé

Absot Messages postés 777 Date d'inscription mardi 28 octobre 2008 Statut Membre Dernière intervention 4 septembre 2020 - 5 janv. 2011 à 14:58
loicDu28 Messages postés 332 Date d'inscription dimanche 11 janvier 2009 Statut Membre Dernière intervention 2 février 2016 - 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
Table de multiplication javascript ✓ - Forum Javascript
Afficher/masquer div javascript onclick ✓ - Forum Javascript
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux

9 réponses

Réponse 1 / 9

loicDu28 Messages postés 332 Date d'inscription dimanche 11 janvier 2009 Statut Membre Dernière intervention 2 février 2016 53
6 janv. 2011 à 10:28

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 mardi 28 octobre 2008 Statut Membre Dernière intervention 4 septembre 2020 44
6 janv. 2011 à 10:34

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 dimanche 11 janvier 2009 Statut Membre Dernière intervention 2 février 2016 53
6 janv. 2011 à 11:29

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 mardi 28 octobre 2008 Statut Membre Dernière intervention 4 septembre 2020 44
6 janv. 2011 à 11:41

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 dimanche 11 janvier 2009 Statut Membre Dernière intervention 2 février 2016 53
Modifié par loicDu28 le 6/01/2011 à 12:00

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 mardi 28 octobre 2008 Statut Membre Dernière intervention 4 septembre 2020 44
6 janv. 2011 à 12:12

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 dimanche 11 janvier 2009 Statut Membre Dernière intervention 2 février 2016 53
6 janv. 2011 à 14:30

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 mardi 28 octobre 2008 Statut Membre Dernière intervention 4 septembre 2020 44
6 janv. 2011 à 15:26

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 dimanche 11 janvier 2009 Statut Membre Dernière intervention 2 février 2016 53
6 janv. 2011 à 16:14

Cool si tu as réussit alors ;)

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

Bonne continuation

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

erreur (#DIV/0) formule MOYENNE.SI.ENS

java script error in the main process

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

Nodejs.exe est-ce un virus

Discussions similaires

Newsletters