11538 sujets

JavaScript, DOM et API Web HTML5

[résolu] Redimensionner un div - ne marche pas dans Firefox

Bonjour,

Prenons le script suivant :


<script type="text/javascript">
function hautcalque()
{
hauteurgauche=document.getElementById('gauche').offsetHeight;
document.getElementById('droite').style.height=hauteurgauche;
}
</script>


Il permet de redimensionner le div "droite" et lui donner la taille du div "gauche"

ça marche pour IE et Opéra mais pas Firefox et je ne comprends pas pourquoi... Une idée ?
Modifié par EricLB (07 Jun 2006 - 14:27)
Merci pour ton lien, mais ce n'est pas avec Internet Explorer que j'ai un problème mais avec Firefox !

Mon problème n'est pas que
a écrit :
offsetHeight n'a pas la même valeur que son height correspondant
, mais que Firefox ne prenne pas la valeur height alors ques les autres navigateurs la prenne.

si je fais un alert :


alert(document.getElementById('droite').style)


Firefox me trouve bien [objectCSSStyleDeclaration]

mais si j'ajouter ".height" -> rien
Modifié par EricLB (24 Mar 2006 - 14:08)
Que veux-tu... Moi aussi j'ai mis dans ce forum une application complète qui marche très bien avec IE et Opeea et pas du tout avec Firefox.
Pourtant ses adeptes sont là à l'admirer.
A part ça :http://www.yoyodesign.org/doc/w3c/css2/visudet.html#the-height-property
a écrit :
Quand les propriétés 'top', 'bottom', 'margin-top' ou 'margin-bottom' ont la valeur spécifiée 'auto', leur valeur calculée devient '0'. La propriété 'height' ne s'applique pas. La hauteur de l'aire du contenu est égale à la taille effective de la police de l'élément. Les espacements, bordures et marges verticales d'une boîte en-ligne non remplacée commencent en haut et en bas de la police, et non pas en haut et en bas de la ligne. Par contre, le calcul de la hauteur de la boîte de la ligne emploie seulement la propriété 'line-height'.
J'avoue que j'ai du mal à suivre le cours de ta pensée...

Quel est le rapport avec mon problème ?

Je ne souhaite pas engager une polémique sur les défauts ou qualités des différentes navigateurs. Chacun sait quoi en penser.

Si tu veux voir le code du div à redimensionner :


#droite{margin-left:170px;}


Aucune valeur "auto" !
Salut,

Je peux pas vraiment t'apporter d'éléments de réponse, si ce n'est que moi aussi j'ai un bug pour redimensionner une iframe sur Firefox. ça marche très bien sur les autres navigateurs...

function Nouveau_Edite()
{
window.document.getElementById('frame_detailid').style.height=140+'px';
window.document.getElementById('frame_detailid').style.width=100+'%';
}

Je pense qu'on a le même soucis... après, pour savoir d'où ça vient c'est une autre paire de manche! Smiley smile
Salut a tous...
j'ai été confronté au même problème , et il n'y a pas que la proprité height de concerné, essayer par exemple d'accèder a la propriété float exemple :

css de base :

#madiv {
float:left;
}

<div id="madiv">du contenu</div>

et dans un bout de script javascript :

<script type="text/javascript">
function changer(){
document.getElementById('madiv').style.float="right";
}

a appelé via un bouton Smiley cligne

hé bien résultat , la div prend bien comme valeur right, mais il ne se passe rien Smiley sweatdrop ...

et il y a d'autre propriété qui ne peuvent , êtrent modifiés en javascript...

coordialement
istrion a écrit :

et il y a d'autre propriété qui ne peuvent , êtrent modifiés en javascript...


Je suis dubitatif sur le fait qu'on ne puisse pas changer certaines propriétés en javascript... Manque de connaissances en la matière je pense. Si un Pro du javascript pouvait nous éclairer Smiley smile )
Bon hé bien je m'excuse , pour l'information donné précédement ...
après avoir analyser pourquoi on ne pouvais pas ajouter directement une valeur a la propriété width , car elle se présente de cette forme : 100px il y a le px a la fin , la méthode consiste donc a récupérer la taille actuelle et d'y ajouter la valeur comme ceci : 


//exemple avec une div de 100px de largeur

var lg_initiale = (document.getElementById("madiv").style.width).length;
// donne 5 ( 100 + px = 5 caractères )

// on récupère uniquement la valeur
var lg_au_format_string = (document.getElementById("madiv").style.width).substr(0,longueur-2);

//on additione les deux valeur en transformant le chiffre en int
lg_au_format_int = parseInt(lg_au_format_string)+100;

// on assigne la nouvelle taille a notre div :
document.getElementById("madiv").style.width = (lg_au_format_int+"px");


coordialement ( je viens a l'instant de trouver la solution ... )

il reste que je ne sais pas pkoi la propriété float , elle malgrès sont affectation ne change rien ... Smiley cligne
EricLB a écrit :
Bonjour,

Prenons le script suivant :


<script type="text/javascript">
function hautcalque()
{
hauteurgauche=document.getElementById('gauche').offsetHeight;
document.getElementById('droite').style.height=hauteurgauche;
}
</script>


Il permet de redimensionner le div "droite" et lui donner la taille du div "gauche"

ça marche pour IE et Opéra mais pas Firefox et je ne comprends pas pourquoi... Une idée ?


Bonjour,
Bonjour,
Istrion, je pense que tu te compliques, mais tu as mis le doigt dessus :
hauteurgauche=document.getElementById('gauche').offsetHeight;
donne la valeur mesurée en pixel sans "px"
Firefox étant celui qui respecte le mieux les standards, a besoin qu'on lui précise l'unité : "px"
document.getElementById('droite').style.height=hauteurgauche+ [#orange]"px"[/#] ;

Modifié par chmel (30 Mar 2006 - 00:56)
istrion a écrit :
Bon hé bien je m'excuse , pour l'information donné précédement ...
après avoir analyser pourquoi on ne pouvais pas ajouter directement une valeur a la propriété width , car elle se présente de cette forme : 100px il y a le px a la fin , la méthode consiste donc a récupérer la taille actuelle et d'y ajouter la valeur comme ceci :

Bonjour,
Ton script peut être simplifié.
En effet, parseInt s'arrête au premier caractère non numérique.
En outre, répéter sans cess document.getElementById finit par utiliser des ressources qui pourraient être économisées car le navigateur doit rechercher à chaque fois dans tout l'arbre du document l'élément correspondant.
L'exemple qui suit déplace la div de 10px vers la droite.

Ce qui nous donne donc :


var div = document.getElementById('madiv');
div.style.width = (10 + parseInt(div.style.width)) + "px";
on va y arriver ^^
mon code n'était la qu'a titre informatif Smiley confused et je suis conscient qu'il n'est pas optimiser ... Smiley cligne

@++ all
Sujet clos
Aller à