Panneau latéral coulissant [Merci Ea]

[Daisy Rondelle]

Bonjour,

J'ai suivi ce tuto Panneau latéral coulissant j'ai placé le tchat dedans tout fonctionne très bien sauf une petite chose, est il possible que le panneau ne se referme pas quand on navigue sur le forum ?

merci d'avance à ceux qui voudront bien me répondre

[Daisy Rondelle]

Un UP car j'ai pas encore trouvé

[Ea]

Bonjour,


Vous voulez que l'état ( ouvert ou fermé ) soit sauvé ? Donnez votre code et je peux voir ce qui doit être modifié ^^

Cordialement.

[Daisy Rondelle]

Oui! je voudrais pouvoir tchater et me balader sur les pages du fofo en même temps

mon code

Code:

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); } );

[Daisy Rondelle]

Je viens aux nouvelles car de mon côté je ne trouve toujours pas

[Daisy Rondelle]

j'ai beau faire... le rechargement des pages à chaque fois que l'on clique sur un lien du fofo empêche le panneau latéral de rester ouvert, du coup je me suis fais un p'tit script sous Greasemonkey qui fonctionne...ça! et un peu de css pour que cela apparaisse quand on passe dessus me suffise

Code:

// ==UserScript==
// @author        DaisyRondelle
// @name          Pandabox
// @description    Une Pandabox partout.
// @include http://pptleo.ogameunivers.com/*
// ==/UserScript==


(function(){
  var element = document.getElementById('phpbb');
var p = document.createElement("leo");
  var chat = '<iframe src="Lien de la tchatbox" name="I1" style="position: fixed; top: 10px; right:0px; width: 800px; height: 300px; border: none;"></iframe> <br><br>';
  p.innerHTML = chat;
  element.appendChild(p);
})();

le css

Code:

leo{
opacity : 0.0;
 }
leo:hover {
opacity : 1.0;
 -webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
 -o-transition: opacity 1s ease;
}

si quelqu'un peu améliorer qu'il ne s'en prive surtout pas ^^
tant que l'on en profite

[Ea]

Bonjour,


Si il n'y a pas 24 heures de passé, il faudrait plutôt éditer.

Et sinon par rapport au premier code en le remettant en forme et en utilisant un cookie pour retenir l'état, ça donnerait :

Code:

$(function() {

    // Image à cliquer pour ouvrir
    var img_open= 'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';
    // Image à cliquer pour fermer
    var img_close= 'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png';
   
    // Image de départ
    var img_start= +my_getcookie('cb-opened') ? img_close : img_open;
   
    // Classe de départ
    var class_start= +my_getcookie('cb-opened') ? 'cb-pannel' : 'cb-pannel cb-closed';

    // On ajoute le html et on ajoute la gestion de l'événement du clic
    $('<table class="cb-table"><tr><td><div class="'+class_start+'"><iframe src="/chatbox/index.forum"></iframe></div></td><td class="cb-button"><img src="'+img_start+'" /></td></tr></table>').appendTo('body').find('.cb-button img').click(function(){

        // Si la chatbox était ouverte
        if(+my_getcookie('cb-opened'))
        {
            // On la retire
            $('.cb-pannel', $(this).closest('.cb-table')).addClass('cb-closed');
            // On change l'image du bouton
            $(this).attr('src',img_open);
            // On retire le cookie qui dit qu'elle est ouverte
            my_setcookie('cb-opened','0',0,0)
        }
        // Sinon
        else
        {
            // On l'affiche
            $('.cb-pannel', $(this).closest('.cb-table')).removeClass('cb-closed');
            // On change l'image du bouton
            $(this).attr('src',img_close);
            // On ajoute le cookie qui dit qu'elle est ouverte
            my_setcookie('cb-opened','1',1,0)
        }

    });

});

Ainsi que ce code css :

Code:

.cb-table { position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000; }
    .cb-pannel { width: 800px; height: 400px; }
    .cb-pannel.cb-closed { display: none; }
        .cb-pannel iframe { width: 800px; height: 400px; margin: 0; border: 0; }
    .cb-button { vertical-align: bottom; }

Cordialement.

[Daisy Rondelle]

Génial!

désolé pour le double post et un grand merci pour ton code "détaillé en plus"

c'est beau d'avoir un cerveau