Fonction javascript et 100%

**masseur** · 04/06/2007, 16h04

Bonjour.

J'ai une fonction javascript comme ceci.

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
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

**marcha** · 04/06/2007, 16h14

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%';

**SpaceFrog** · 04/06/2007, 16h15

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

as tu essay� d'echapper le % ?

**masseur** · 04/06/2007, 17h13

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.

**yjuliet** · 02/07/2007, 13h00

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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 css :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Fonction javascript et 100%

JavaScript

Discussions similaires

Partager

Partager