garder la chatbox latérale ouverte
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
garder la chatbox latérale ouverte
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 - 12:18, édité 1 fois
MlleAlys- Membre actif
- Messages : 5747
Inscrit(e) le : 12/09/2012
Re: garder la chatbox latérale ouverte
Re MlleAlys !
J'ai remplacé le script de la cb par ceci sur mon forum test et ça semble fonctionner :
J'ai remplacé le script de la cb par ceci sur mon forum test et ça semble fonctionner :
- 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');
});
});
Re: garder la chatbox latérale ouverte
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 cs avec l'effet hover (c'est un peu le bazar désolée ^^") :
et enfin la fonction javascript pour bloquer au clic :
Et j'avais naïvement essayé de faire comme ça :
ce qui fonctionne donc si on retire l'ouverture au survol du css ^^"
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- Membre actif
- Messages : 5747
Inscrit(e) le : 12/09/2012
Re: garder la chatbox latérale ouverte
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 .
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 .
- 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'));
});
});
Re: garder la chatbox latérale ouverte
ça fonctionne, merci beaucoup encore une fois !!! \o/
*se prosterne*
xD
Je passe le sujet en résolu ! ^^
*se prosterne*
xD
Je passe le sujet en résolu ! ^^
MlleAlys- Membre actif
- Messages : 5747
Inscrit(e) le : 12/09/2012
Re: garder la chatbox latérale ouverte
Cool !
Je viens par contre voir que j'avais laissé une ligne qui ne servira pas ^^.
Tu peux donc retirer la ligne suivante du js :
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'));
Re: garder la chatbox latérale ouverte
ouiap, ça marche !! ^^
Merci encore !! ^^
Merci encore !! ^^
MlleAlys- Membre actif
- Messages : 5747
Inscrit(e) le : 12/09/2012
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum