Panneau latéral coulissant [Merci Ea]

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

Résolu Panneau latéral coulissant [Merci Ea]

Message par Daisy Rondelle le Mar 22 Mai 2012 - 18:49

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


Dernière édition par Daisy Rondelle le Jeu 24 Mai 2012 - 11:09, édité 1 fois

Daisy Rondelle
*

Messages : 49
Inscrit(e) le : 27/02/2012

http://pptleo.ogameunivers.com/
Daisy Rondelle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau latéral coulissant [Merci Ea]

Message par Daisy Rondelle le Mar 22 Mai 2012 - 20:23

Un UP car j'ai pas encore trouvé Sad

Daisy Rondelle
*

Messages : 49
Inscrit(e) le : 27/02/2012

http://pptleo.ogameunivers.com/
Daisy Rondelle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau latéral coulissant [Merci Ea]

Message par Ea le Mar 22 Mai 2012 - 20:43

Bonjour,


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

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23427
Inscrit(e) le : 04/04/2008

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

Résolu Re: Panneau latéral coulissant [Merci Ea]

Message par Daisy Rondelle le Mar 22 Mai 2012 - 20:56

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

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
*

Messages : 49
Inscrit(e) le : 27/02/2012

http://pptleo.ogameunivers.com/
Daisy Rondelle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau latéral coulissant [Merci Ea]

Message par Daisy Rondelle le Mer 23 Mai 2012 - 6:48

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

Daisy Rondelle
*

Messages : 49
Inscrit(e) le : 27/02/2012

http://pptleo.ogameunivers.com/
Daisy Rondelle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau latéral coulissant [Merci Ea]

Message par Daisy Rondelle le Mer 23 Mai 2012 - 16:41

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

Daisy Rondelle
*

Messages : 49
Inscrit(e) le : 27/02/2012

http://pptleo.ogameunivers.com/
Daisy Rondelle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau latéral coulissant [Merci Ea]

Message par Ea le Mer 23 Mai 2012 - 22:50

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.

Ea
Aidactif
Aidactif

Messages : 23427
Inscrit(e) le : 04/04/2008

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

Résolu Re: Panneau latéral coulissant [Merci Ea]

Message par Daisy Rondelle le Jeu 24 Mai 2012 - 8:31

Génial! I love you

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

c'est beau d'avoir un cerveau Very Happy

Daisy Rondelle
*

Messages : 49
Inscrit(e) le : 27/02/2012

http://pptleo.ogameunivers.com/
Daisy Rondelle 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