garder la chatbox latérale ouverte

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

Résolu garder la chatbox latérale ouverte

Message par MlleAlys le Lun 9 Mar 2015 - 0:35

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forum-test-phpbb2.forumactif.org/

Description du problème

Re-bonjour, c'est encore moi ^^"

tout d'abord je suis désolée, je suis presque certaine d'avoir déjà croisé ce sujet sur le forum, mais j'ai beau chercher je ne le retrouve pas !!

Je cherche à ce que l'état de la chatbox latérale ("ouverte" ou "fermée") soit maintenu lorsqu'on change de page sur le forum... Il me semble donc qu'il faut créer un cookie, et en changer la valeur à chaque fois que l'utilisateur cliquera pour ouvrir ou fermer la cb, et puis récupérer cette valeur au chargement des pages ?
J'ai cherché sur internet comment faire, j'ai trouvé pleins de codes par ci par là, mais je n'ai pas réussi à en appliquer un avec succès à mon cas... Et je demande donc à nouveau votre aide TT-TT

Merci d'avance !! ^^


Dernière édition par MlleAlys le Lun 9 Mar 2015 - 13:18, édité 1 fois

MlleAlys
+ Hyperactif +

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

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

Résolu Re: garder la chatbox latérale ouverte

Message par Self le Lun 9 Mar 2015 - 2:04

Re MlleAlys Smile !

J'ai remplacé le script de la cb par ceci sur mon forum test et ça semble fonctionner Wink :
Code:
jQuery(document).ready(function () {
   jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 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" id="cbOpen" class="tIndex" tabindex="1" 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>');
});

$(function(){
   if(sessionStorage.getItem('cbopen') == 'true') $('#cbOpen').click();
   $('#cbOpen').on('click', function(){
      if($('#panneau').is(':visible')) sessionStorage.setItem('cbopen', 'true');
      else sessionStorage.setItem('cbopen', 'false');
   });
});

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: garder la chatbox latérale ouverte

Message par MlleAlys le Lun 9 Mar 2015 - 4:20

oh yeah, ça fonctionne !!! o/

Par contre, j'essaye de l'adapter aussi à un système de menu qui s'ouvre au passage de la souris, reste ouvert quand on clique, mais je n'y arrive pas, le menu reste automatiquement ouvert à l'ouverture de la page ^^"
Mais je suppose que le problème vient du fait que quand on clique la div est de toute façon visible puisqu'il y a l'effet hover ? =s Quand je le retire l'ouverture au survol et que je ne laisse que le clic, le code fonctionne ! ^^"
Comment modifier le code pour que ça fonctionne même avec l'effet au survol ? ^^"

http://forum-test-phpbb2.forumactif.org/

voilà les codes :

mis directement dans le template overall_header :
Code:
<span id="liens-rapides">
    <a id="liens-rapides-clic" class="mainmenu" tabindex="1" onclick="afficher_cacher('liens-rapides-liste');">Liens rapides</a>
    <div id="liens-rapides-liste">
        <a href="/t109-chapitre-i-principes-du-forum" tabindex="1">Le principe du forum</a>
        <a href="/carte" tabindex="1">La carte</a>
        <a href="/partenariats" tabindex="1">Coin partenariats</a>
        <a href="/admin" tabindex="1" class="admin">Administration</a>
    </div>
</span> 

code cs avec l'effet hover (c'est un peu le bazar désolée ^^") :
Code:
/*liens rapides*/

#liens-rapides {
position: fixed;
right: 0;
top:0;
display: inline-block;
width: 175px;
height: 30px;
line-height: 30px;
z-index: 890;
}

#liens-rapides .mainmenu:hover {
  cursor: pointer;
}

#liens-rapides div {
position: absolute;
display: none;
left: 0px;
top: 25px;
}

#liens-rapides div a {
display: block;
margin: 10px;
font-size: 10px;
width: 150px;
height: 20px;
line-height: 20px;
}

#liens-rapides:hover div, #liens-rapides:focus div {
display: block;
}

et enfin la fonction javascript pour bloquer au clic :
Code:
function afficher_cacher(id)
{
    if(document.getElementById(id).style.display=="")
    {
        document.getElementById(id).style.display="block";
    }
    else
    {
        document.getElementById(id).style.display="";
    }
    return true;
}


Et j'avais naïvement essayé de faire comme ça :
Code:
$(function(){
  if(sessionStorage.getItem('liens-rapides-clic') == 'true') $('#liens-rapides-clic').click();
  $('#liens-rapides-clic').on('click', function(){
      if($('#liens-rapides-liste').is(':visible')) sessionStorage.setItem('liens-rapides-clic', 'true');
      else sessionStorage.setItem('liens-rapides-clic', 'false');
  });
});

ce qui fonctionne donc si on retire l'ouverture au survol du css ^^"

MlleAlys
+ Hyperactif +

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

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

Résolu Re: garder la chatbox latérale ouverte

Message par Self le Lun 9 Mar 2015 - 11:31

Oui, que l'on clique sur le lien pour cacher ou afficher la div celle-ci est toujours visible à cause du hover, donc le js configure toujours le storage à true.
On va donc prendre l'attribut style de la div, si il est égal à display: block; on configure le storage à true sinon on le configure à false Wink .

Code:
$(function(){
   if(sessionStorage.getItem('liens-rapides-clic') == 'true') $('#liens-rapides-clic').click();
   $('#liens-rapides-clic').on('click', function(){
      if($('#liens-rapides-liste').attr('style') == 'display: block;') sessionStorage.setItem('liens-rapides-clic', 'true');
      else sessionStorage.setItem('liens-rapides-clic', 'false');
      console.log(sessionStorage.getItem('liens-rapides-clic'));
   });
});

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: garder la chatbox latérale ouverte

Message par MlleAlys le Lun 9 Mar 2015 - 13:12

ça fonctionne, merci beaucoup encore une fois !!! \o/
*se prosterne*
xD


Je passe le sujet en résolu ! ^^

MlleAlys
+ Hyperactif +

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

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

Résolu Re: garder la chatbox latérale ouverte

Message par Self le Lun 9 Mar 2015 - 13:18

Cool Very Happy !

Je viens par contre voir que j'avais laissé une ligne qui ne servira pas ^^.
Tu peux donc retirer la ligne suivante du js :
Code:
console.log(sessionStorage.getItem('liens-rapides-clic'));

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: garder la chatbox latérale ouverte

Message par MlleAlys le Lun 9 Mar 2015 - 13:20

ouiap, ça marche !! ^^

Merci encore !! ^^

MlleAlys
+ Hyperactif +

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

MlleAlys 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