Panneau coulissant à droite

[Space Sapien]

Bonjour

J'ai voulu réutiliser le code de mon panneau de gauche pour faire un second panneau mais à droite cette fois-ci, je ne sais pas où je me trompe mais le résultat n'est pas le même et ne me plait vraiment pas...

Panneau de gauche, parfait :

Spoiler:

Code:

 
$(document).ready(function () {
$('body').append('<table style="position: fixed; bottom: 50px; left:0px;z-index:10000;"><tr><td>
<div id="panneleft" scrolling="no" style="margin-left:-200px;width: 200px; height: 200px;marginwidth="0" marginheight="0" frameborder="0">
     
        BLABLABLA
                                                                                       
        </div></td>
<td style="vertical-align: bottom;">
<img id="M14_open"src="http://i19.servimg.com/u/f19/11/26/21/37/open10.png"style="cursor:pointer;"/>
<img id="M14_close"src="http://i19.servimg.com/u/f19/11/26/21/37/close10.png"style="display:none;cursor:pointer;"/>
</td></tr></table>');
 
});
//Fonction pour l ouverture
$(function(){
$('img#M14_open').click(function(){
$(this).hide();
$('#panneleft').animate({marginLeft: '0px'}, "slow");
$('#M14_close').show();
});
});
 
//Fonction pour la fermeture
$(function(){
$('img#M14_close').click(function(){
$(this).hide();
$('#panneleft').animate({marginLeft: '-=200px'}, "slow");
$('img#M14_open').show();
});
});
 

Panneau de droite, raté :

Spoiler:

Code:

$(document).ready(function () {
$('body').append('<table style="position: fixed; bottom: 100px; right:0px;z-index:10000;"><tr><td>
<div id="pannel" scrolling="no" style="margin-right:-200px;width: 200px; height: 200px;marginwidth="0" marginheight="0" frameborder="0">
   
Blabla
                                                                                     
        </div></td>
<td style="vertical-align: bottom;">
<img id="M14_open"src="http://i19.servimg.com/u/f19/11/26/21/37/open10.png"style="cursor:pointer;"/>
<img id="M14_close"src="http://i19.servimg.com/u/f19/11/26/21/37/close10.png"style="display:none;cursor:pointer;"/>
</td></tr></table>');
 
});
//Fonction pour l ouverture
$(function(){
$('img#M14_open').click(function(){
$(this).hide();
$('#pannel').animate({marginRight: '0px'}, "slow");
$('#M14_close').show();
});
});
 
//Fonction pour la fermeture
$(function(){
$('img#M14_close').click(function(){
$(this).hide();
$('#pannel').animate({marginRight: '-=200px'}, "slow");
$('img#M14_open').show();
});
});

( J'ai conscience qu'il faudra que je change l'identifiant des images du panneau de droite si je veux les deux panneaux en simultané, mais pour le moment je test avec seulement le panneau de droite active )

Comme vous pouvez le voir, avec le panneau de droite, l'image qui sert de bouton recouvre le début du panneau, alors que ce n'est pas le cas avec celui de gauche et je ne parviens pas à comprendre pourquoi il y'a cette différence.

Merci d'avance

[MlleAlys]

Bonjour ^^

C'est parce que vous n'avez pas inversé les cellules dans le tableau
Le panneau est un tableau avec une cellule pour le contenu, et une pour l'image. Dans le cas où le panneau est à gauche, la cellule du contenu est donc celle de gauche, donc la première. Mais pour mettre le panneau à droite, la cellule du contenu doit être à droite de celle de l'image, donc en deuxième position :

Code:

$(document).ready(function () {
$('body').append('<table style="position: fixed; bottom: 100px; right:0px;z-index:10000;">
  <tr>
    <td style="vertical-align: bottom;">
      <img id="M14_open"src="http://i19.servimg.com/u/f19/11/26/21/37/open10.png"style="cursor:pointer;"/>
      <img id="M14_close"src="http://i19.servimg.com/u/f19/11/26/21/37/close10.png"style="display:none;cursor:pointer;"/>
    </td>
    <td>
      <div id="pannel" scrolling="no" style="margin-right:-200px;width: 200px; height: 200px;marginwidth="0" marginheight="0" frameborder="0">
 
Blabla
                                                                                   
        </div>
    </td>
  </tr>
</table>');
 
});
//Fonction pour l ouverture
$(function(){
$('img#M14_open').click(function(){
$(this).hide();
$('#pannel').animate({marginRight: '0px'}, "slow");
$('#M14_close').show();
});
});
 
//Fonction pour la fermeture
$(function(){
$('img#M14_close').click(function(){
$(this).hide();
$('#pannel').animate({marginRight: '-=200px'}, "slow");
$('img#M14_open').show();
});
});

[Space Sapien]

Merci beaucoup, c'est vrai que tout de suite ça paraît évident xD