Bizarre cet effet

Version imprimable

Bizarre cet effet

Bonjour,

Je cherche à réaliser une interaction simple:
Deux div sont initialement cachés par java-script (et non pas par css). L'utilisateur peut cliquer sur chacun des liens et faire apparaître/ disparaître respectivement les div. Seulement, lorsque les div apparaissent, il y a un décalage qui s'opère (le contenu remonte) Pourquoi ? le code:

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
<ul>
            <li><a href="#">Par nom</a></li>
            <li><a href="#">Dans une section</a></li>
        </ul>
        <div id="searchByName">
            <h1>Recherche par nom</h1>
        </div>
        <div id="searchBySection">
            <h1>Recherche par section</h1>
        </div>
        <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //On cache par défaut les calques
                $('#searchByName').hide();
                $('#searchBySection').hide();
                //Affichage des div si clic user
                $('li a:contains(Par nom)').click(function(){
                    $('#searchByName').slideToggle();
                });
                $('li a:contains(section)').click(function(){
                    $('#searchBySection').slideToggle();
                });
            });
        </script>

Merci,

Je vais avoir du mal à te dire pour quoi mais c'est en rapport avec les mages et la nature 'block' des éléments que tu fais apparaître apparement.

Sans considérer cela comme la solution ultime, je suis parvenu à retirer ce saut en ajoutant des balides "<br />" avant tes deux "<div>" :

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
<ul>
            <li><a href="#">Par nom</a></li>
            <li><a href="#">Dans une section</a></li>
        </ul>
        <br />
        <div id="searchByName">
            <h1>Recherche par nom</h1>
        </div>
        <br />
        <div id="searchBySection">
            <h1>Recherche par section</h1>
        </div>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                //On cache par défaut les calques
                $('#searchByName').hide();
                $('#searchBySection').hide();
                //Affichage des div si clic user
                $('li a:contains(Par nom)').click(function(){
                    $('#searchByName').slideToggle();
                });
                $('li a:contains(section)').click(function(){
                    $('#searchBySection').slideToggle();
                });
            });
        </script>

En espérant avoir été utile :)

26/11/2010, 09h31
yann18

re:

Il pourrait y avoir un rapport effectivement... En tout cas, ces rustines fonctionnent... Merci bien à toi.