Discussion :

[Esil2008]

Salut,

Je voudrais calculé la largeur max d'un div de mon application. Pour cela j'essaye de faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

max-width : document.body.clientWidth - 400 px;

J'ai essayé aussi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
max-width : document.body.clientWidth - 400  + 'px';
max-width : document.body.clientWidth-400+px;

aussi avec window.innerWidth

Mais ca marche pas. Pouvez vous me dire comment pourrais je faire cela ?

Merci

[Alexdezark]

Salut,

Voici un script qui s'adresse à des tableaux (<table>) et qui fonctionne

Cela doit pouvoir s'adapter à des <div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function taille(){
largeur=(document.documentElement.clientWidth)-20;
hauteur=(document.documentElement.clientHeight)-20;
document.getElementById("tableau1").style.width=largeur+'px';
document.getElementById("tableau1").style.height=hauteur+'px';
document.getElementById("tableau2").style.width=(largeur-156)+'px';
document.getElementById("tableau2").style.height=(hauteur-6)+'px';
};

Bonne journée

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

max-width : screen.availWidth - 400  + 'px';

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

max-width : document.body.offsetWidth - 400  + 'px';

[Esil2008]

Merci bq je vais essayer tous ca

[Esil2008]

Ca marche pas !

Voila le code que j'ai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.panelgroupTest
{
	height : 500px; 
	max-width : document.body.offsetWidth - 400  + 'px';
	width : expression(document.body.clientWidth > 950  ? document.body.clientWidth-400+'px' : '950px' );
	min-width : 950px;
	overflow: auto  ;
}

le width tout court c'est pour IE et les min max pour FireFox

Est ce qu'il y a quelque chose d'anormales ?

[gwyohm]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.panelgroupTest
{
	height : 500px; 
	max-width : document.body.offsetWidth - 400  + 'px';
	width : expression(document.body.clientWidth > 950  ? document.body.clientWidth-400+'px' : '950px' );
	min-width : 950px;
	overflow: auto  ;
}

Est ce qu'il y a quelque chose d'anormales ?

On ne peut pas intégrer du javascript directement dans du CSS ?!

Ou alors je découvre quelque chose qui va révolutionner ma façon de faire des pages web !

[Esil2008]

Ben, moi je demande une solution qui me permettra de faire cela. J'ai pas prétendu que c'est juste ...

En plus ce code marche très bien sous IE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width : expression(document.body.clientWidth > 950  ? document.body.clientWidth-400+'px' : '950px' );

Pourtant c'est du javascript !

[gwyohm]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.panelgroupTest
{
	height : 500px; 
	max-width : expression(document.body.offsetWidth - 400  + 'px');
	width : expression(document.body.clientWidth > 950  ? document.body.clientWidth-400+'px' : '950px' );
	min-width : 950px;
	overflow: auto  ;
}

le width tout court c'est pour IE et les min max pour FireFox

Est ce qu'il y a quelque chose d'anormales ?

Et bien je ne connaissais pas ; danss ton code, il ne manque pas le expression sur max-width ?

Ensuite j'aurai des questions sur

• Les navigateurs autres que IE ?
• Que se passe-t-il si javascript n'est pas activé ?
• Les performances ?

[Esil2008]

le problème c'est que expression ne marche pas sous FF ni sous Chrome par contre ca marche très bien sous IE et Opera.

Si le javascript n'est pas activé c'est une bonne remarque mais si je fais comme ca c'est que je suis obligé. A la place je devrais avoir simplement un width : 100%; mais ça cause un problème avec un composant d'une implémentation JSF ... Bref c'est casse tête

Sinon côté perf, c'est rien remarqué d'énorme dans le chargement, je peux pas dire plus

[Esil2008]

J'essaye d'implémenter la méthode d'Alexdezark. Cette méthode marche très bien, voila ce que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function taille() {
	largeur= document.body.clientWidth-400 ;
	document.getElementById("panelTest").style.width=largeur+'px';
 
}

Mais je sais pas comment faire appelle à cette méthode dans le style de mon div. J'ai essayé de faire cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<ice:panelGroup id ="panelTest" style="taille();" >

mais ca marche pas.

Vous savez comment on peut faire cela.

Merci

PS : ice:panelGroup c'est une sorte de div

[Esil2008]

J'ai fait ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function taille() {
   largeur= document.body.clientWidth-400 ;
   document.getElementById("panelTest").style.width=largeur+'px';
}
window.onload = taille;

Et ca marche

Merci a vous