11548 sujets

JavaScript, DOM et API Web HTML5

Dimension d'un div en fonction de la taille d'un autre

Bonjour à tous, je fais actuellement un site sur une base wordpress et j'ai un petit soucis:
Sur chaque page j'ai un div "content" dans lequel se trouve le contenu et un div "sidebar".
Le div "sidebar" est une pellicule de film dans laquelle se trouve soit un menu, soit une liste d'image quand il n'y a pas besoin de menu et c'est avec cette liste d'image que j'ai un problème...
Afin de ne pas avoir d'espace vide en-dessous des images quand le contenu est long, le script qui affiche aléatoirement les images en affiche un certain nombre et les images qui dépasse de la pellicule sont masquées grâce à un "overflow: hidden;" dans le fichier css.
Le problème est que je ne connais pas à l'avance la longueur du contenu donc j'utilise un script pour adapter la taille de la pellicule.
Ce script fonctionne +/- (*) au boulot avec Firefox 2.0.0.15 mais j'ai remarqué que chez moi avec Firefox 3 cela ne fonctionne pas, j'ai donc testé avec Opéra et Konqueror et Safari (version Windows avec Wine) et cela ne fonctionne pas non plus (je n'ai pas de machine windows sous la main pour tester avec IE6-7-8)

(*) Le +/- est du a un autre problème: sur une page le visiteur peut calculer son itinéraire grâce à l'API Google Map mais lorsque l'itinéraire est calculé, la page entière n'est pas rechargée -> le script pour adapter la taille n'est pas appelé et il arrive même souvent que la feuille de route déborde du div "content"...

Si quelque sait pourquoi cela ne fonctionne pas avec les autres navigateurs et/ou a une autre solution je suis intéressé Smiley smile 

<div id="content">
	//contenu généré par wordpress
</div>

<div class="sidebar">
	<div id="pellicule">
		<div id="ppellicule">
			<?php random_pellicule("pellicule-accueil", 8); ?>
		</div>
	</div>
</div>

<script type="text/javascript">
	var divcontent = document.getElementById("content").offsetHeight;
	var divpellicule = document.getElementById("pellicule").offsetHeight;

	if (divcontent<divpellicule ) {
		taille = (divcontent) + "px";
		obj = document.getElementById("ppellicule").style.height = taille;
	}
</script>

Modifié par MyRdDiN (01 Oct 2008 - 18:51)
Hello,

Tout d'abord je pense qu'il y a moyen de régler ton probleme sans passer par javascript, a tu jeté un oeil du coté des colonnes factices (faux column en anglais ?).
Cela consisterait dans ton cas à ajouter une image de fond de pellicule, alignée à droite, au conteneur de ton #content et de ton #sidebar. Ainsi, quelle que soit la taille de l'un ou de l'autre, le conteneur aura toujours la taille du plus grand et la pellicule sera toujours déroulée au maximum, même après modification de la taille de la page par google maps.

Ensuite concernant le problème javascript lui même hmm... ton test ne devrait-il pas plutot être 
if (divcontent>divpellicule ) {

(Si la taille de ton content est superieure à la taille de ta sidebar alors il faut agrandir la sidebar)
Modifié par Tymlis (04 Oct 2008 - 13:35)
Merci pour ta réponse, et désolé pour le retard de la mienne Smiley confused
Malheureusement tes solutions me semblent inapplicable dans mon cas: en effet, comme je l'ai dis plus haut (p-e pas clairement), je génére un nombre suffisant d'images dans la pellicule pour qu'il y en ai assez quelque soit la longueur du contenu et les images superflues sont masquées grâce à l'attribut "overflow:hidden;".

Mais... je pense avoir identifié la source ou une des sources du problème: cela ne semble se produire, avec Firefox 3, que quand les images de la pellicule ne sont pas dans le cache -> je vais tenter avec un préload des images
Sujet clos
Aller à