Calcul d'un max-width

Version imprimable

14/11/2008, 12h11
Esil2008

Calcul d'un max-width
Salut,

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

Code:

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

J'ai essayé aussi
Code:

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

Salut,

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

Cela doit pouvoir s'adapter à des <div>

Code:

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

14/11/2008, 12h39
Bovino

Code:

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

ou

Code:

max-width : document.body.offsetWidth - 400 + 'px';
14/11/2008, 13h19
Esil2008

Merci bq je vais essayer tous ca

Ca marche pas !

Voila le code que j'ai
Code:

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 ?

Citation:
Envoyé par Esil2008
Code:

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 !

14/11/2008, 13h52
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:

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

Pourtant c'est du javascript !

Citation:
Envoyé par Esil2008
Code:

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 ?

14/11/2008, 14h12
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
14/11/2008, 14h19
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:

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:

<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

J'ai fait ca :

Code:

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