Bonjour tout-le-monde ! Je rencontre un petit souci que mes recherches Google n'ont pas pu résoudre. J'ai un calendrier php comme ceci
Nom : d8739a18a2.png
Affichages : 70
Taille : 28,4 Ko


Lorsque l'utilisateur clique sur un mois, le calendrier change les dates affichées avec un slideUp() et un slideDown(). Le soucis c'est que ces animations sont décalées et ne se font pas sur le calendrier en lui même. Voici une image de ce décalage :
Nom : decalage.png
Affichages : 75
Taille : 46,0 Ko


Comme vous pouvez le voir, l'animation se fait sur le côté droit, le tableau en-dessous remonte au fil du slide bref, c'est pas beau à voir.

Voici le code HTML de la page :
Code php : 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<div id="reservation" class="tab_content">
<?php
require ('php/date.php');
// Initialisation de l'objet
$date = new Date();
$year = date('Y');
$events = $date->getEvents($year);
// Utilisation de l'objet dans la variable $date
$dates = $date->getAll($year);
?>
    <div class='periods'>
        <div class="year"><?php echo $year; ?></div>
        <!-- Affichage des mois -->
        <div class="months">
            <ul>
<?php foreach ($date->months as $id=>$m): ?>
                <li>
                    <a href="#" id="linkMonth<?php echo $id+1 ?>"><?php echo utf8_encode(substr(utf8_decode($m),0,3)); ?></a>
                </li>
<?php endforeach; ?>
            </ul>
        </div>
        <br />
        <br />
        <hr/>
<?php $dates = current($dates); ?>
<?php foreach ($dates as $m => $days): ?>
        <!-- Affichage du tableau -->
        <div class="month_relative" id="month<?php echo $m; ?>">
            <table id="table_days" class="table_days">
                <!-- Tête du tableau -->
                <thead>
                    <tr>
                        <!-- Affichage des jours -->
<?php foreach ($date->days as $d): ?>
                        <th><?php echo substr($d,0,3); ?></th>
<?php endforeach ?>
                    </tr>
                </thead>
                <!-- Corps du tableau -->
                <tbody>
                    <tr>
<?php $end = end($days); foreach ($days as $d => $w): ?>
<?php $time = strtotime("$year-$m-$d");?>
<?php if ($d == 1): ?>
                        <td class="padding" colspan="<?php echo $w-1; ?>"></td>
<?php endif ?>
                        <td>
                            <div class="relative">
                                <!-- Jour -->
                                <div class="daytitle" id="daytitle">
                                    <?php echo $date->days[$w-1]; echo $d; echo $date->months[$m-1];?>
                                </div>
                                <ul class="events">
<?php if(isset($events[$time])): foreach($events[$time] as $e): ?>
                                    <li><?php echo $e; ?></li>
<?php endforeach; endif; ?>
                                </ul>
                                <div class="day"><?php echo $d; ?></div>                                                                                                              
                            </div>                                  
                        </td>
                        <!-- Lorsqu on rencontre le 7ème jour de la semaine, on rouvre un <tr> -->
<?php if ($w == 7): ?>
                    </tr><tr>
<?php endif ?>
<?php endforeach ?>
<?php if ($end != 7): ?>
                        <td class="padding" colspan="<?php echo 7-$end; ?>"></td>
<?php endif ?>
                    </tr>
                </tbody>   
            </table>
        </div>                            
<?php endforeach ?>
        <div class="day_event">
            <p class="date">Dates à afficher</p>
        </div>
    </div>                    
    <div class="clear"></div>
    <br>
    <br>
    <table id="table_reservation" class="table_reservation" align="center">
<?php 
$query = mysqli_query($bdd, "SELECT numReservation, dateDebut, dateFin, nomObjet, nomReservataire, complete FROM objet, reservataire, reservation WHERE objet.numObjet = reservation.numObjet AND reservation.numReservataire = reservataire.numReservataire ORDER BY dateDebut");
$cptColonne = 7;
$cptLigne = mysqli_num_rows($query);
?>
        <!-- Tête du tableau -->
        <thead>
            <tr>
                <th class="small">Numéro</th>
                <th class="normal">Nom matériel</th>
                <th class="normal">Début</th>
                <th class="large">Fin</th>
                <th class="large">Utilisateur</th>
                <th class="normal">Terminée</th>
            </tr>
        </thead>
        <!-- Corps du tableau -->
        <tbody>
<?php for($i = 1; $i <= $cptLigne; $i++) { 
    while($donnees = mysqli_fetch_array($query)) {?>
            <tr>
                <td><?php echo $donnees['numReservation']; ?></td>
                <td><?php echo $donnees['nomObjet']; ?></td>
                <td><?php echo utf8_encode($donnees['dateDebut']); ?></td>
                <td><?php echo $donnees['dateFin']; ?></td>
                <td><?php echo $donnees['nomReservataire']; ?></td>
                <td id="complete" data-num="<?php echo $donnees['numReservation'];?>"><?php if($donnees['complete'] == 1) {echo 'Oui';} else {echo 'Non';}?></td>
            </tr>                                
    <?php }
} ?>
        </tbody>
    </table>
    <br>
</div>


Et voici le script gérant les animations du changement de mois :

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
$('.months li:first a').addClass('selected');
$('.month_relative').hide();
$('.month_relative:first').show();
$('.months a:first').addClass('active');
var current = 1;
$('.months a').click(function() {
	var month = $(this).attr('id').replace('linkMonth','');
	if(month != current) {
		$('#month'+current).slideUp();
		$('#month'+month).slideDown();
		$('.months a').removeClass('active');
		$('.months a#linkMonth'+month).addClass('active');
		current = month;
		console.log(month);
	}
	return false;
});


Si quelqu'un peut m'aider, je lui en serais très reconnaissant ! Merci d'avance