Comment déplacer un élément en fonction de la largeur d'une page
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:
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:
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:
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
