Récupération width dynamique

Version imprimable

Salut tout le monde, Alors voila j'ai un petit problème en JS ... Je cherche a récupérer une largeur totale.

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<figure id="contenu" style="left: 0px;">
<img src="data/images/androgyne/dsc04012jpgeffected.jpg" alt="">
<img src="data/images/androgyne/dsc04032jpgeffected.jpg" alt="">
<img src="data/images/androgyne/dsc04038b.jpg" alt="">
<img src="data/images/androgyne/dsc04049o.jpg" alt="">
<img src="data/images/androgyne/dsc04069j.jpg" alt="">
<img src="data/images/androgyne/dsc04052t.jpg" alt="">
<img src="data/images/androgyne/dsc04244d.jpg" alt="">
<img src="data/images/androgyne/dsc04312d.jpg" alt="">
<img src="data/images/androgyne/dsc03975jpgeffected.jpg" alt="">
<img src="data/images/androgyne/dsc04294jpgeffected copie.jpg" alt="">
<img src="data/images/androgyne/dsc04288q.jpg" alt="">
<img src="data/images/androgyne/dsc04325z.jpg" alt="">
<img src="data/images/androgyne/dsc04327e.jpg" alt="">
</figure>

CSS :

Code:

1
2
3
4
figure {
    white-space: nowrap;
    position: relative;
}

JS :

Code:

var largeur = document.getElementById('contenu').offsetwidth;

Je vous remercie d'avance.

21/02/2012, 15h54
SpaceFrog

colle un overflow visible ?
ou auto et récupères le scrollWidth ?

Pas possible il est affiché en entier mais il y a seulement 480px de visible. Il y a ensuite un js qui le fait slide

Code:

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
function Div() {
    this.sens = 'right';
    this.decal = 1;
    this.timer;
    this.initTimer = function (status) {
        false === status ? clearInterval(this.timer) : this.timer = setInterval('div.move();', 3.260869565);
    }
    this.move = function () {
		var largeur = document.getElementById('contenu').offsetwidth;
        var element = document.getElementById('contenu');
        var pos = parseInt(element.style.left);
        if(pos>=0)
            this.sens = 'left';
        if(pos<=-(largeur))
            this.sens = 'right';
        switch (this.sens) {
        case 'right':
            element.style.left = pos + this.decal + 'px';
            break;
        case 'left':
            element.style.left = pos - this.decal + 'px';
            break;
        }
    }
}
 
function init() {
    div = new Div();
}
var div;

21/02/2012, 16h19
Bovino

De toute façon, JavaScript est sensible à la casse et offsetwidth != offsetWidth...
21/02/2012, 16h24
papaye0

Ha oui ... deja d'une ... ça c'est pas bon ! Merci :)
21/02/2012, 16h51
papaye0

Peut être avec un genre de

Code:

for(i=0;i<ChildId.length;i++)

je vais tenter le coup ... :?

OK; Impossible d'utiliser ma "var largeur" car ma div sort de l’écran donc elle n'est pas prise entièrement ...

J'ai tenté de faire une fonction pour calculer ça depuis les img que ma balise contiens puis l’appliquer et la récupérer.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function TotWidth { var ParentV = document.getElementById('contenu'); var ChildV = ParentV.childNodes; var width = 0; for (i=0; i<=ChildV.length; i++) { var element = document.getElementByTagName(img); if (element) { if (width <= element.offsetWidth) { width = element.offsetWidth } } } ParentV.style.width = width+'px'; }
Mais il y a une erreur de ma part car ça ne marche pas :s

Trouvé ! :ccool:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type='text/javascript'>
				function TotWidth() {
					var ParentV = document.getElementById('contenu');
					var ChildV = ParentV.getElementsByTagName('img');
					var width = 0;
					for (i=0; i<ChildV.length; i++) {
						width = width + ChildV[i].offsetWidth;
					}
					width = width - '910';
					ParentV.style.width = width+'px';
				}
			</script>

Merci.