Sujet Précédent Sujet Suivant

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:

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.
0
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
0
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.
0
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);
0

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!!
0
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.
0
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.
0
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. :)
0
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
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

Bonjour,

je cherche une fonction javascript qui permettrait d'arrondir un nombre à deux chiffres après la virgule (un peu comme number_format du php), car la fonction round() ne permet d'arrondir qu'à l'unité!

Merci
Ciao

JérémyConfiguration: Windows Vista
Firefox 2.0.0.14

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

Bonjour

je viens d'acheter un ordi et depuis 2 jours j'ai ce message :



Pouvez vous me dire ce que je dois faire.
Sachant que je me sens pas douée dans l'informatique. En gros merci d'être précis et détaillé dans vos retours.

D'avance merci pour votre aide

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

Bonjour,
merci me dire c'est quoi ce message :"javascript:void(0);"
comment faire pour l'eviter

merci

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

Bonjour,

Je réalise un tableau dans lequel certaine cellule comporte des #div/0! Par une cellule vide.

Y a t il une possibilité ?

Merci à vous

Configuration: iPad / Safari 7.0

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

Bonjour,

Je souhaite si c'est possible de faire un écho dans un /script>

Je m'explique j'ai récupéré un code permettant de me crée un diagramme.

Qui sont deux % qui au total fait 100%.

Actuellement ces données sont fixe dans le script mon but et de pouvoir faire un "écho" dans le script avec les valeurs calculer précédemment. Pour les calculs aucun problème !

Mais la question est comment je peux faire pour écrire ces résultats a la place des données actuelles ?

Le code :

try { // Percent Chart 2 var ctx = document.getElementById("percent-chart2"); if (ctx) { ...

6 réponses