Flux html/css et javascript

**baylock** · 28/10/2010, 22h56

Bonjour à tous,
J'utilise un javascript permettant d'avoir un système fluide de gestion de div sur ma page HTML (changez à la main la largeur de votre browser sur le lien de test, vous verrez l'effet).
Le problème est que ce script utilise des div ".box" qu'il positionne en absolu et que cela créée un peu le foutoir dans mon flux de la page HTML.
En effet, à cause de ce positionnement, je n'arrive pas à placer ma div "footer" (barre rouge dans l'exemple) en dessous de ma div "content".

Alors voilà, si quelqu'un pouvait me dire comment faire, ce serait super.
J'y ai passé ma journée d'aujourd'hui, sans succès.
J'ai essayé tous les "clearfix" du web, sans succès.
J'ai également essayé de changer dynamiquement (en javascript) la hauteur css de ma div content, ce qui devrait régler le problème de flux, sans succès (un offsetHeight sur la div content ne renvoie aucune valeur).

Voici le lien de test

Et ci-dessous le code complet...

Merci pour votre aide!

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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" xml:lang="fr" lang="fr">
 
	<head>
		<title>Test</title>
 
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<style>
			body 
			{
			    margin:0;padding:0;
			}
			html,body
			{
				height:100%;
			}
			#footer
			{	
				clear:both;
				width:100%;
				height:120px;
				background-color:red
			}
		</style>
 
		<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
			var myFluidGrid = {
				COLNUMBER : 1,COLMARGIN : 10, COLWIDTH : 222,
				doLayout : function() {
					var self = this;var pointer = 0;var arr = [];
					var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
					$('.box').css('position', 'absolute').css('width', this.COLWIDTH  + 'px');
					$('.box').each(function() {
						var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
						$(this).css('left', tempLeft + 'px');
						var tempTop = 0;
						if (arr[pointer]) { tempTop = arr[pointer];	}
						$(this).css('top', tempTop + 'px');
						arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						pointer++;
						if (pointer === columns) { pointer = 0; }
					});
				}
			};
			$(window).ready(function() {myFluidGrid.doLayout();}).resize(function() {myFluidGrid.doLayout();});
		</script>
	</head>
 
	<body>
		<div id="content">
	    	   <div class="box"><img src="medias/images/other/000000001.jpg" height="410" width="224"></div>
	    	   <div class="box"><img src="medias/images/other/000000002.jpg" height="160" width="224"></div>
	    	   <div class="box"><img src="medias/images/other/000000003.jpg" height="310" width="224"></div>
	    	   <div class="box"><img src="medias/images/other/000000004.jpg" height="250" width="224"></div>
	    	   <div class="box"><img src="medias/images/other/000000005.jpg" height="170" width="224"></div>
	    	   <div class="box"><img src="medias/images/other/000000006.jpg" height="450" width="224"></div>
	    	   <div class="box"><img src="medias/images/other/000000007.jpg" height="330" width="224"></div>
	    	   <div class="box"><img src="medias/images/other/000000008.jpg" height="140" width="224"></div>
	    	   <div class="box"><img src="medias/images/other/000000009.jpg" height="390" width="224"></div>
		</div>	
		<div id="footer"></div>	
	</body>
 
</html>

**RomainVALERI** · 29/10/2010, 00h00

Puisque d'une part tu as déjà essayé pas mal de tricks CSS sans succès (wow quelle allitération ^^) et que d'autre part tu postes sur le forum JS, voilà ce que j'aurais à te proposer (vite fait, sans vraiment avoir testé, c'est un premier jet à affiner probablement) :

Code javascript :

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
22
var myFluidGrid = {
   COLNUMBER : 1,COLMARGIN : 10, COLWIDTH : 222, actualHeight : 0,
   doLayout : function() {
      this.actualHeight = this.COLMARGIN * 2;
      var self = this;var pointer = 0;var arr = [];
      var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
      $('.box').css('position', 'absolute').css('width', this.COLWIDTH  + 'px');
      $('.box').each(function() {
         var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
         $(this).css('left', tempLeft + 'px');
         var tempTop = 0;
         if (arr[pointer]) { tempTop = arr[pointer];	}
         $(this).css('top', tempTop + 'px');
         arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
         self.actualHeight += $(this).outerHeight();
         pointer++;
         if (pointer === columns) { pointer = 0; }
      });
      $("content").style.height = this.actualHeight + "px";
   }
};
$(window).ready(function() {myFluidGrid.doLayout();}).resize(function() {myFluidGrid.doLayout();});

edit :

Hmm.. non ça n'ira pas : ça va additionner les tailles de toutes les images : il faut compter chaque colonne séparément et stocker les hauteurs dans un tableau, pour ensuite utiliser la valeur la plus élevée au moment du redimensionnement du div #content ^^ Yapuka...

**RomainVALERI** · 29/10/2010, 00h14

Bon ben finalement j'avais deux minutes ^^

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
22
var myFluidGrid = {
   COLNUMBER : 1,COLMARGIN : 10, COLWIDTH : 222, actualHeight : 0,
   doLayout : function() {
      this.actualHeight = 0;
      var self = this;var pointer = 0;var arr = [];
      var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
      $('.box').css('position', 'absolute').css('width', this.COLWIDTH  + 'px');
      $('.box').each(function() {
         var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
         $(this).css('left', tempLeft + 'px');
         var tempTop = 0;
         if (arr[pointer]) { tempTop = arr[pointer];	}
         $(this).css('top', tempTop + 'px');
         arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
         if (arr[pointer] > self.actualHeight) self.actualHeight = arr[pointer];
         pointer++;
         if (pointer === columns) { pointer = 0; }
      });
      $("content").style.height = this.actualHeight + "px";
   }
};
$(window).ready(function() {myFluidGrid.doLayout();}).resize(function() {myFluidGrid.doLayout();});

Et pas besoin de faire un tableau

j'en avais un déjà tout prêt devant les yeux (arr[]) et je l'utilisais même pas

**baylock** · 29/10/2010, 00h40

Merci RomainVALERI pour ta bonne humeur et ton aide!
Malheureusement, ta solution laisse désespérément mon footer en haut de page...
Tu peux voir sur le lien test, c'est bien ton dernier script qui s'y trouve.
Ou alors j'ai loupé un truc?

PS: Le mieux que j'ai réussi à faire jusqu'ici est de mettre la barre de footer à la hauteur de la dernière div "box". Cela dit, ça ne me sert à rien...
Apparemment, il est aisé d'obtenir la hauteur d'une "box" mais moins aisé d'obtenir celle de la div "content".

Merci en tous cas, et si t'as d'autres idées, je suis preneur!
Crois-moi, je déteste qu'on m'apporte des solutions toutes faites mais j'ai passé plus de 12h sur ce code sans trouver de réponses (pas que ce soit impossible mais le javascript et moi, ça fait deux).
En ce qui concerne une solution CSS/HTML, tous les clearfix du web, overflow:auto/hidden, clear:both, display:inline-block etc...n'y changent rien.

Merci!

**baylock** · 29/10/2010, 02h18

AAAAAH!
Merci RomainVALERI!!

En modifiant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('content').style.height = this.actualHeight + "px";

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#content').css('height',this.actualHeight + "px");

Ta syntaxe a l'air bonne pourtant (hormis le "#" manquant de la div) mais, pour une raison que j'ignore, une fois jquery activé, il semble privilégier l'autre syntaxe...

En tous cas, ça fait trop plaisir de voir cette barre rouge se taper en dessous de manière dynamique quand elle est restée collée au dessus de l'écran pendant des heures!

Merci mille fois pour ton adaptation éclairée du script; je l'ai relu, je l'ai compris et ça a beau être simple, c'est vraiment bien pensé. Merci et bonne continuation!

Flux html/css et javascript

JavaScript

Discussions similaires

Partager

Partager