Discussion :

[pierrot10]

Bonjour,
Je viens chercher de l'aide que je commence à patauger.

J'ai un menu avec 8 éléments qui contienne la class="item".

Code html :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<ul class="nav navbar-nav menu">
 
							<li id="l-1" class="item active">
								<a href="#">Accueil</a>
								<span></span>
							</li>
 
							<li id="l-2" class="item">
								<a href="#">Carte et menu</a>
								<span></span>
							</li>
 
							<li id="l-3" class="item">
								<a href="#">Evénements</a>
								<span></span>
							</li>
 
							<li id="l-4" class="item">
								<a href="#">La Yourte</a>
								<span></span>
							</li>
 
							<li id="l-5" class="item">
								<a href="#">La Buevette</a>
								<span></span>
							</li>
 
							<li id="l-6" class="item">
								<a href="#">Galerie</a>
								<span></span>
							</li>
 
							<li id="l-7" class="item">
								<a href="#">Contact</a>
								<span></span>
							</li>
 
							<li class="dropdown item" id="more">
								 <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<strong class="caret"></strong></a>
								 <span></span>
								<ul class="dropdown-menu">
 
 
									<li class="divider"></li>
									<li>
										<a href="#">FR</a>
									</li>
									<li>
										<a href="#">EN</a>
									</li>
 
								</ul>
							</li>
 
						</ul>

Vous contasterez que le dernier est un dropdown-menu (bootsrtap). Il est là pour contenir les li qui le précède si la largeur de la page diminue.

Premierement, j'ai cette fonction qui va calculer la taille de tous les li.item (y compris le dernier)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function menuWidth(){
	var widthItemMenuTotal = 0;
	$('ul.menu li.item').each(function() {
		// Pour du Debug, affiche la largeur du li
    	$(this).children('span').text($(this).width());
 
    	// Calcul la largeur total
    	widthItemMenuTotal += $(this).outerWidth();
    	// Debug, affiche le
    	$('.ws2').text(widthItemMenuTotal);
	});
}

Ici je souhaite qu'il me déplace l'avant dernier des li dans le dropbox-menu si la page a une largeur etre 1100px et 1200px.
J'arrive à la déplacer. Simplement une fois dépalcer, et que le navigateur change sa largeur alors qu'il est encore entre 1100px et 1200px, il va encore déplacer le 7ème qui est maitenu le li qui a la class dropdown-menu. Evidement, ca bug car il ne peut pas déplacer un élément dans lui-même

Comment puis-je faire pour qu'il déplace le li que s'il n'a pas encore été déplacé?

• #li-7, entre 1100 et 1200px (l'avant dernier)
• #li-6, entre 1000 et 1099 (L'avant avant dernier)
• #li-5, entre 900 et 999 (L'avant avant avant dernier)
• ainsi de suite

Je n'aimerais pas utiliser l'attribut id (li-6) comment référence, car il peut avoit plus ou moins de li (c'est un menu et on peut ultérieurement ajouter des pages, donc des éléments du menu...)

J'ai essayé ceci

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
18
19
20
21
22
23
24
25
26
27
28
 
function addID(){
        var addId=0;
	$('ul.menu li.item').each(function() {
    	  $(this).attr("id",addId);
    	  addId++;
	});
}
 
function ajustMenu() {
	// Calcul le nombre de li contenant la class item
	var nbItem = $(".item").lenght;
 
	// Si entre 1100 et 1200px
	if($(window).width() > 1100 && $(window).width() < 1200)
    {
    	var i = nbItem-1;
    	$(".item:nth-child("+ i +")").prependTo( "#more .dropdown-menu" );
    }
}
 
addID();
$(window).on('load resize', function() {
   ajustMenu(); // au chargement de la page + au redimensionnement de la fenêtre
   menuWidth();
  // menuWidth()
 
});

Premierement
Comment puis-je adapter mon code pour qu'il agisse que si le li.item est pas encore déplacé?

Deuxièmenet
Evidement, ca bug, que si je mets mon navigateur à 1150px, que je rafraichi ma page ensuite. Il va déplacé l'avant dernier li (soit le #li-6).
Mais si ensuite, le diminue la largeur de petit pixel, il va mettre #li-5 dans le dropdown-menu, car à ce moment se trouve en vant derniere position car il ne tient pas encompte les li avec la class item qui sont enfant à dropdown-menu.

Enfin
la fonction menuWidth, ne fonctionne pas pour les li qui sont enfants à dropbox-menu

Voyez-vous ce que je souhaite faire?
Avez-vous des questions pour mieux comprendre mon exercise, dans le cas ou je n'avais pas été assez claire?

merci

[pierrot10]

En fait, je pense que le premier problème que je dois résoudre, c'est comment compter le nombre de li.item, quelque soit leur position dans la page.

Ils seront de toute manière enfant à .menu.