Une variable javascript dans du css

**grialat** · 10/01/2014, 05h21

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 :

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

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

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.

**Bovino** · 10/01/2014, 08h04

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 :

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

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

**grialat** · 10/01/2014, 15h06

merci d'avoir r�pondu.

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

Code :

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

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

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

Code :

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

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 :

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

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 :

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

 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.

**SylvainPV** · 10/01/2014, 18h29

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

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

li { width:20% }

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

Code css :

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

1
2
3
nav { display: table; }
ul { display: table-row; }
li { display:table-cell; }

**grialat** · 10/01/2014, 19h22

merci de me r�pondre

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

proposition 1:
donc si je fais

Code css :

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

li { width:20% }

c'est comme si je faisais

Code css :

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

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

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

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.

**SylvainPV** · 10/01/2014, 20h15

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

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

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/

**Watilin** · 11/01/2014, 12h16

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

), mais l� sans indentation c'est carr�ment suicidaire :

Code :

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

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 :

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

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

Une variable javascript dans du css

JavaScript

Vue hybride

Discussions similaires

Partager

Partager