Fonction javascript et 100%

Version imprimable

Bonjour.

J'ai une fonction javascript comme ceci.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 initialize: function(element, options) { this.options = Object.extend({ width: '300px', height: '200px', changeTransition: Fx.Transitions.Bounce.easeOut, duration: 1000, mouseOverClass: 'active', activateOnLoad: 'first', useAjax: false, ajaxUrl: '', ajaxOptions: {method:'get'}, ajaxLoadingText: 'Loading...' }, options || {}); this.el = $(element); this.elid = element; this.el.setStyles({ height: this.options.height, width: this.options.width });
Sous firefox si je lui passe du 100% en width et height tout marche bien, mais sous IE6, de mettre du 100% fait que cela n'affiche plus rien et génère une erreur.

Comment faire du 100% dans une fonction javascript et sous IE6 donc?

Merci d'avance

04/06/2007, 16h14
marcha

Salut,

Es-tu sur que l'erreur en question est liée à la valeur en % ?

Arrives-tu à reproduire l'erreur sous IE sans prototype avec
juste un js qui aurait:

document.getElementById('...').style.width = '100%';
04/06/2007, 16h15
SpaceFrog

merci de préciser que tu utilise la librairie prototype ???

as tu essayé d'echapper le % ?
04/06/2007, 17h13
masseur

Merci à vous deux pour vos réponses mais je ne suis pas doué en javascript.
Pour étayer mon problème.

Quand je crée un objet de la classe avec des % sous IE rien ne s'affiche alors que dès que je me met en pixel cela s'affiche bien.

Sinon j'utilise mootols couplé à mootabs http://www.silverscripting.com/mootabs/

Si vous voulez d'autres renseignements n'hésitez pas.
02/07/2007, 13h00
yjuliet
Salut.

Quelques points de détail concernant ce genre de problèmes avec IE6 (et 7 aussi, au passage).
- en utilisant pour les dimensions d'un objet dans la feuille de style un pourcentage, ou en l'affectant dynamiquement en JS, le résultat est identique, pas besoin d'un objet créé en JavaScript : lors de l'affichage initial, tout marche quasiment Ok.
EN REVANCHE, si la taille de l'objet doit être dynamiquement modifiée à cause de l'ajout/modification d'un autre objet dont la taille interagit sur l'objet qu'on observe, le comportement devient très étrange.
exemple :
Supposons une page assez simple :
Code:

1 2 3 4 5 6 7 8 <html> <head>...</head> <body> <table> <tr><td><img src="__.png" id="monImage" alt="---"></td></tr> </table> </body> </html>
Code:

1 2 3 4 5 6 #monImage { border: 1px solid red; /* for debug purpose */ background: yellow; width: 100%; height: 32px; }
En ajoutant un autre <td/> à la ligne, la taille du conteneur de l'image s'adapte bien (le cadre de mon image prend les bonnes dimensions), mais le contenu, lui prend ses proportions par défaut, prenant pour référence de taille la hauteur ici donnée en pixels et le reste du cadre rempli par la couleur de fond.

Devant ce problème, j'utilise donc une fonction qui doit me redimensionner systématiquement les images concernée lorsque celà est nécessaire.

ATTENTION, IE ne fait rien si on lui assigne comme nouvelle valeur la même que l'ancienne. Il est donc nécessaire d'opérer en deux phases, tout d'abord, donner une taille différente de la taille voulue aux éléments, puis leur assigner à nouveau la taille souhaitée.

En essayant, j'ai remarqué que IE ne faisait que le premier redimensionnement si je ne mettais pas un "alert('')" entre les deux instructions. Si cette solution est envisageable pour débugger les pages, elle ne me semble pas l'être pour un environnement de recette/production. Peut-être MSIE doit-il effectuer un redraw complet avant de pouvoir modifier à nouveau les valeurs ?

Merci à tous ceux qui pourront apporter d'autres précisions dont je serais preneur ;)