Une variable javascript dans du css

Version imprimable

bonjour

Je d�bute en javascript et je bloque sur un probl�me.
je sais pas si c'est possible de le faire donc si vous pouvez m'aider �a serai sympa^^.

D�j� je sais pas si c'est ici ou dans la partie css que je devais poster donc si je me trompe excusez moi.

J'ai ce script

dans mon fichier "nav.php"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function Container(con) { var navbase = document.getElementById(con); var lis = navbase.getElementsByTagName("li"); var men = 0; var smen = 0; for ( i = 0; i < lis.length; i++ ) { if ( lis[i].parentNode != navbase ) smen++; else men++; } var test= 1000 / men; navbase.style.width = men * 125 + 'px'; }
et j'ai aussi dans "nav.php"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <body onload="Container('c1');"> <nav id="topNav"> <ul class="conteneur" id="c1"> <li><a href="accueil.php">ACCUEIL</a></li> <li><a href="page2.php">PAGE2</a> <ul> <li><a href="page2_creer.php">Creer</a></li> <li><a href="page2_corriger.php">Corriger</a></li> </ul> </li> <li><a href="page3.php">PAGE3</a> </ul> </nav>
ce que je veux c'est la valeur qui sera dans ma variable "test" soit la taille "width" de mon "nav" en CSS.

mon CSS est dans un fichier a part "nav.css", je pense que �a ne sert a rien de vous montrer mon CSS. Je ne peut pas ajuster ma valeur "width" de mon "nav" sur ce fichier car comme vous pouvez voir la valeur en question est calcul� donc pas fixe.

s'il n'est pas possible de l'ajout� dans le fichier "nav.css" mais de le faire directement dans "nav.pvp" j'ai aucun probl�me.

bref je sais pas si je me suis bien exprim� donc si vous avez des question je vais tenter de mieux clarifier.
Sinon en expliquant en gros ce que je veux c'est "nav{width=".test";} ou .test sera 1000 / men;

merci d'avance pour vos r�ponses.

10/01/2014, 08h04
Bovino

CSS et JavaScript sont deux choses tr�s diff�rentes, il ne peut donc pas y avoir d'interaction entre les deux.
En revanche, tu peux facilement manipuler les styles d'un �l�ment avec JavaScript, mais je ne comprends pas trop ta question puisque tu le fais d�j� :

Code:

navbase.style.width = men * 125 + 'px';

:koi:
10/01/2014, 15h06
grialat

merci d'avoir r�pondu.

bon oui je me suis mal exprim�.
oui ici je manipule les style d'un �l�ment :

Code:

navbase.style.width = men * 125 + 'px';

j'ai vu dans les tutos que c'est facile il faut faire :

Code:

element.navbase.style.width

.
mais je n'arrives pas a chaque fois oo" en gros j'ai pas du bien comprendre.

- j'ai un menu en haut en horizontale, mon nav fait 1000px;
mes onglets (actuellement 6) font une taille de 125px chacun; 125*6=750.
donc il reste de la place libre sur mon nav (250px).

ce que je veux c'est que mes onglets soit adaptatif avec mon nav.
c'est pourquoi j'ai �crit 1000/nombre d'onglets=test et le test doit �tre la taille de mes onglets.

Donc si j'ai 5 onglets leur taille sera de 250px chacun, si j'ai 6 c'est dans les 166.667px etc...

Je peux en effet donner width =166.66.px dans mon CSS mais je trouve que c'est pas vraiment propre car a caque nouvel onglet je vais devoir changer la taille.

comme j'ai d�j� dit, j'ai 6 onglets dans mon css, je leur ai donn� la taille en entier 125px chacun et je me suis retrouv� avec 750px d'onglets, mais seulement a gauche de mon nav. Comme j'ai pas r�ussi � trouver une solution pour agrandir mes onglets dans la totalit� de mon nav.
j'ai d�cid� de centrer mes onglets (alors que c'est pas vraiment �a que je recherche).

ici je centre donc un �l�ment qui est autour de mes onglets et qui fait la taille (nombre d'onglets*125)=750px:

Code:

navbase.style.width = men * 125 + 'px';

pk ne pas simplement avoir fait margin: auto; c'est parce que mes 'li' sont flottants (en tout cas c'est pas vraiment ce que je veux faire).

donc quand je test quelque chose du genre

Code:

li.style.width = 1000/ nbr d'onglets + 'px';

�a ne semble pas marcher.

j�esp�re avoir �tais plus claire, je sais que pour certain mon probl�me peut sembler tr�s facile mais comme je voulais dit je suis un d�butant en js et par fois m�me des truck simple je met du temps � r�soudre merci de votre compr�hension.
10/01/2014, 18h29
SylvainPV
Donc le but est de calculer la largeur des li pour qu'elles remplissent toute la ligne. Je propose :
- si le nombre d'onglets est fixe, utiliser des pourcentages:

Code:

li { width:20% }

- si le nombre est variable, utiliser l'affichage en mode cellules de tableau :
Code:

1 2 3 nav { display: table; } ul { display: table-row; } li { display:table-cell; }
10/01/2014, 19h22
grialat
merci de me r�pondre

mon nav est fixe est fait 1000px;
mes onglets sont les li.

proposition 1:
donc si je fais

Code:

li { width:20% }

c'est comme si je faisais

Code:

li { width:200px }

mais comme j'ai expliqu� le nombre de mes onglets peuvent varier donc si j'ai 6 onglets.
c'est comme si j'avais le nav avec 1000px et les li (20%+6=120%) ou (200px*6=1200px) ce qui est incoh�rent.

proposition 2:
j'avais pensai faire un truk du genre :
Code:

1 2 3 nav { display: table; } ul { display: table-row; } li { display:table-cell; }
mais la taille de mon nav est de 1000px;

-Avec cette m�thode c'est pas mes li qui s�adapte a mon nav mais l'inverse.
donc mon nav prend la taille total de mes li.
-De plus je veux que la taille mes onglets soit les m�me, alors qu'ici mes onglets prennent la taille en fonction du texte qu'ils contiennent.
10/01/2014, 20h15
SylvainPV
Tu peux tr�s bien fixer la largeur de nav � width:1000px tout en �tant en display:table. Si tu tiens � avoir une largeur fixe peu importe le contenu de l'onglet, alors rajoute table-layout: fixed
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 nav { display: table; width: 1000px; table-layout: fixed; } nav ul { display:table-row; } nav ul li { display: table-cell; width: 100%; }
Exemple : http://jsfiddle.net/r9yrM/687/
10/01/2014, 22h20
grialat

merci beaucoup �a m'a beaucoup aid�.

j'ai du faire quelque modification dans mon code et �a semble marcher c'est pas exactement ce que je voulais, mais pas loin.

Le reste je devrais me d�brouill� seul.
11/01/2014, 12h16
Watilin
Citation:

Envoy� par grialat

Je d�bute en javascript

Quelques conseils pour l'avenir :

JavaScript, ce n'est pas du C embarqu�. On n'a pas de limite sur la taille du code ou sur les noms de variables. Pour avoir du code plus facile � relire, pour les autres et pour toi, choisis des noms de variables explicites. Au lieu de men et smen par exemple, �cris menu et sousMenu. Au lieu de con, mets container. Oh tiens, �a rentre en conflit avec le nom de ta fonction. Mais au fait, elle fait quoi exactement ta fonction ? Est-ce que son nom seul permet d'avoir une id�e de ce qu'elle fait ? Non. Je te conseille d'utiliser toujours un verbe � l'infinitif pour nommer tes fonctions. Par exemple, ajusterNav pourrait convenir.

Autre chose: les if sans accolades c'est d�j� moyen (et je ne jetterais pas la premi�re pierre :aie:), mais l� sans indentation c'est carr�ment suicidaire :
Code:

1 2 3 4 if ( lis[i].parentNode != navbase ) smen++; else men++;
Un jour de fatigue tu vas rajouter une ligne sans faire attention et l� ce sera la cata. Ne prends pas de raccourcis, mets toujours des accolades et indente correctement :
Code:

1 2 3 4 5 if ( lis[i].parentNode != navbase ) { smen++; } else { men++; }