Une variable javascript dans du css

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

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, 09h04

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, 16h06

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, 19h29

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, 20h22

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, 21h15

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/

**grialat** · 10/01/2014, 23h20

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.

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

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

Discussions similaires

Partager

Partager