Panneau coulissant à droite

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Panneau coulissant à droite

Message par Space Sapien le Dim 29 Mar 2015 - 19:44

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 Smile


Dernière édition par Space Sapien le Lun 30 Mar 2015 - 9:09, édité 1 fois

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau coulissant à droite

Message par MlleAlys le Dim 29 Mar 2015 - 23:18

Bonjour ^^

C'est parce que vous n'avez pas inversé les cellules dans le tableau Wink
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();
});
});

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau coulissant à droite

Message par Space Sapien le Lun 30 Mar 2015 - 9:08

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

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum