Discussion :

[simnitch]

Bonjour,
j'ai réaliser une liste d'élément générés dynamiquement avec twig dont la taille se modifie lors du survol, le problème étant que lorsque je survol un élément, les éléments positionnés en dessous se décalent lieu de rester positionnés à gauche (car le height de l'élément survolé grandi) .
ma question est donc la suivante : comment forcer les éléments positionnés en dessous à rester à gauche ?

merci par avance !

html:

Code html :

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

1
2
3
4
5
6
7
<ul class="ma-liste">
{% for élément in éléments %}
   <li id="conteneur">
       <div id="contenu"></div>
   </li>
{% endfor %}
</ul>

css :

Code css :

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

1
2
#contener{width:25%; float:left; margin-top:10px; margin-bottom:10px;} 
#contenu{ width:95%;}

Javascript :

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
$('.ma-liste li').mouseover(function(){
        if (current && $(this).index() != current.index()){
            current.find('#contenu').stop().css({ width : '100%'
        }).animate({
            width : '95%'
        }, 'slow');
        }
        if (current && $(this).index() == current.index()){
            return null;
        }
        $(this).find('#contenu').stop().css({
            width : '95%'
        }).animate({
            width : '100%'
        }, 'slow');
        current = $(this);
    });
});

[SpaceFrog]

Code :

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

1
2
3
4
5
{% for élément in éléments %}
   <li id="conteneur">
       <div id="contenu"></div>
   </li>
{% endfor %}

Un id DOIT ÊTRE UNIQUE SUR LA PAGE

=> soit tu incrémentes les id
=> soit tu mets un class

[simnitch]

merci pour cette info,
j'ai changé mes id en class mais cela ne change pas le fait que mes éléments positionnés au dessous de l'élément survolé ne restent pas à leurs position initiale...

[SpaceFrog]

current = ?

[simnitch]

var current = null;