[Help codeur] Coder un Slide-in

.

bonjour a tous,


jaimerai tant avoir un Slide-In, mais je sais pas si on peut surcoder par dessus un template dont
on a pas les sources (via notre groupe forumactif). ON peut cependanty activer des pages html,
et inserer des code javascript,  donc ma question est :

serait-il possible techniquement de coder un tel widget via une page html ou un code javascript ?

(fenetre pop-up qui indique celui qui vient de se connecter, le message qui vient d'etre posté et
dans quel sujet, etc...)

Bon, je sais, c'est pointu ! voila ce que cela pourrait donner visuellement :




Le site RealityGaming a un equivalent, sur le groupe XenForo...

Un grand merci pour vos aides...



.

deux discussions sur le forum du groupe :


la customisation de la toolbar du forum (sorte de slide-in basique !)

http://forum.forumactif.com/t365099-customisation-de-la-toolbar


le codage d'un slide-in :

http://forum.forumactif.com/t365085-coder-un-slide-in

.

bon !

apparemment c'ets possible, mais je comprends rien a ce qui ete fait.
donc la j'aurai besoin d'un sacre coup de main huhu....



.

j'ai retrouve le sujet que j'avais realise a l'epoque, ou il semble avoir des pistes deja pour coder,
c'est ici :

http://forum.forumactif.com/t301051p30-statistiques-aimeriez-vous-un-slide-in-sur-votre-forum



(j'avais vu grand de memoire, pas 112 pour mais seulement 47, face a 5 contre)....


.

.

en fait, j'ai reflechi depuis, et certains messages dans les sujets deja crees sur le forum d'aide de forumactif m'ont fait reflechir.

idealement, et je crois meme que c'est le plus simple et le plus propre (mais a verifier),
serait de rajouter 3 choix dans les options notifications de la Toolbar (que je viens d'activer).

- un nouveau message dans un sujet (suivi et non suivi)
- la connexion d'un inscrit au forum (ami ou pas)
- activer le slide-in

(Pour cela, j'ai active la Toolbar tout en haut de page pour que se rendre compte.
cliquer sur notifications, pour acceder au tableau choix des alertes que l'on prefere...).

Ensuite seulement, creer un pop up (donc le slide-in) qui reprend le choix de l'inscrit qui effectivement qui va apparaitre et disparaitre en fade...



.

Oui c'est une bonne idée.

j'ai trouve ca comme source :

http://www.supportduweb.com/post-730-script-slide-in.html
http://www.html.am/html-codes/marquees/slide-in-text.cfm
http://www.vuleticd.com/products/wordpress-plugins/slide-in-popup/


je continue a chercher....



.

Salut,

Si j'ai bien compris, tu as juste un problème de Javascript (et CSS) pour dessiner ton pop-up : javascript te permet d'écrire à la volée les infos dont tu as besoin sur la page courante et Css te permet de créer la forme de la balise souhaitée.
Par contre, je ne connais pas trop ce que te permet de faire ton framework : donne t'il des outils pour gérer des évènement comme la réception de message ou toutes choses que tu souhaite faire ?

en fait, il y a deux probleme dont un qui esmble etre le plus gros :

1.
coder un pop-up qui va afficher les infos
(apparition et disparition en fade)
cette partie semble la plus evidente je dirais car bien connue (voir les scripts des slide-in de publicite apr exemple...)

2.
afficher dans ce pop-up les informations des notifications du forum
(ca, c'est la grosse epine dans le pied, car on a pratiquement pas d'infos sur les variables utilisees par forumactif)


Pour infos, ces notifications dans leurs majorite existent deja, avec une panneau pour choisir, dans ce qui est appelee la Toolbar (la barre tout en haut de page, bouton : notifications).

Chaque inscrit choisit les notifications qu'il souhaite, et elles seront affichees sous le bouton notifications avec a cote le nombre de nouvelles notifications.

A cela, j'aurai bien aime rajoute dans la liste 3 nouvelles notifications :

- notification d'un nouveau message dans un sujet (suivi et non suivi)
- notification d'un inscrit venant de se connecter (ami et non ami)
- activation du slide-In

En parallele, dans le slide-in, avoir les notifications du choix de l'inscrit,
cependant je pense que ce'ts complique, donc je suis entrain de voir quel serait le meilleur choix en fixe (qui sera le meme pour tous les inscrits sans possiblite de perosnnaliser le choix des notifications apparaissant dans le slide-in)....


voila en gros....

ENsuite, je suis entrain de chercher des infos sur les variables, j'ai ouvert 2 sujets sur le forum d'aide, un pour la codification d'un slide-in, l'autre sur la customisation de la toolbar (mais peu ou pas de reponses pour l'isntant...).


.

j'ai trouve peut-etre une piste interessante, un code pour modifier la notification sujet, dans l'affichage des notifications de la Toolbar....

le tuto ici :

http://forum.forumactif.com/t346838-titre-dans-la-notification-de-sujet-suivi

le code :

Code:


        $(function(){
        
         var texte_milieu = " a posté dans ";
          var si_titre_vide = "ce sujet";
        
         if(typeof(compileNotif)!="function")return;var d=compileNotif;Toolbar.compileNotif=compileNotif=function(b){var a=d(b);if(b.text.type==FA.Notification.NOTIF_TOPIC_WATCH){var c=a.match(/^(.*) a écrit un message dans (<a href="\/t[0-9]+(p[0-9]+)?-([^#?"]*)[^"]+">)[^<]+<\/a>$/);c&&(b=c[1]+texte_milieu+c[2],a=c[4],a="topic"==a||/^[\s-]*$/.test(a)?si_titre_vide:a.replace(/-/g," ").replace(/(^\s+|\s+$)/g,""),a=b+a+"</a>")}return a}
        
       });


.

Je ne pense pas que ce bout de code (assez merdique à lire) puisse être utile.

Si j'ai bien compris il parcours juste ta page à la recherche du texte à changé dans la barre de notification.
Il faudrait peut être regardé ce que l'objet notification utilisé pour construire la barre amène comme propriété.

oui mais ca on ne peut pas. n'oublies pas que nous sommes sur un template d'un groupe,
on a pas acces aux fichiers.

seuls des bouts de scripts permettant des modifications peuvent peut-etre nous donner suffisamment d'indications pour pondre un script en javascript certainement, et qui va modifier la toolbar, parce que on aura les variables, enfin, c'est ce que j'ai cru comprendre en tout cas....


.




.

Oui, on peut toujours rêvé

Du coup ton code peut être sympa. Si j'ai bien compris, les infos que tu cherches sont dans la barre de notification ?
Donc l'idée serait de s'inspiré du script que tu as cité pour récupéré les infos sur les nouveaux post et les mettre dans un pop-up...

C'est si simple à dire ... Je ne sais pas si c'est vraiment si simple à faire.

tout a fait !

le probleme est que pour associer le pop-up avec les infos nouveau message dans tel sujet,
faut qu'on puisse trouver les variables de ces infos....

ainsi que rajouter les 3 choix dans le panneau notifications aussi...

(en plus, je viens de me rappeler que on pouvait cliquer sur l'alerte apparaissant dans le pop-up pour aller
au sujet concerne (comme si c'etait pas assez simple, hop, on rajoute une couche !)



.

Dans l'astuce qu'il propose il traite les infos au moment de l'affichage. Il lit la page qui va être affiché et la modifie avant qu'elle soit réellement affiché. On pourrait faire la même chose et il n'y a pas besoin de connaitre les variables du template.

Par contre, pour ajouter l'option qui vas bien ca risque d'être un peu plus compliqué... Il faut y réfléchir

ok. ca devient plus concret la du coup.

en fait, je sais pas trop ce qui sera possible, donc je prefere poster ce a quoi je pense idealement,
et on simplifiera selon les difficultes rencontrees, ca me parait plus coherent.

donc voici ce que je vois une fois fini :

DANS LE PANNEAU NOTIFICATIONS



quand au slide-in, je suppose que la fenetre pop-up pourra etre reglee pour son positionnement, l'imagette ainsi que la duree d'apparition dans le script javascript a rajouter via notre module gestion des codes javascript....

.

Pour les configurations je n'ai franchement pas d'idée pour le moment.
Le problème c'est qu'il ne me semble pas que tu puisse sauvegarder les choix des utilisateurs... Peut être en créant un cookies avec javascript mais ca commence à être pas super propre...

ou alors, autre solution :

si on peut donc rajouter les deux options dans le panneau toolbar (nouveau message dans un sujet, nouveau connecte inscrit), et ensuite on dit que toutes les alertes choisies dans la toolbar vont apparaitre dans le slide-in, ce ui fait que la colonne slide-in dans le panneau des notifications existe plus, ca evitera d'avoir a sauvegarder pour le slide-in.....



.

autre info :

le code source du slide-in chez Xooit (puisque c'ets la que je l'ai decouvert..)

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FORUM TEST :: Le forum de la communauté française</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ]]>"')}*/ //--><!--</script>--><!--//--><script type="text/javascript" src="http://img.xooimage.com/files3/5/9/0/common-10e272e.js"></script></head>
<body topmargin=10 leftmargin=0 marginheight=10 marginwidth=0 >
<table width="860" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="23" background="http://img.xooimage.com/files6/b/g/bgtopsoftmetal-358da.jpg"> </td>
</tr>
<tr>
<td background="http://img.xooimage.com/files6/b/g/bgsoftmetal-358d8.jpg"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html dir="ltr"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="alternate" type="application/rss+xml" title="Global" href="/rss.php" /><link rel="alternate" type="application/rss+xml" title="Global, sujets et réponses" href="/rss.php?t=1" /><meta name="google-site-verification" content="OEwpZA40AkMHcBb7DSSJltmq3i2tW1waWlv1Y8B_-NA" /><meta name="language" content="fr"><link rel="search" title="FORUM TEST" type="application/opensearchdescription+xml" href="/opensearchdescription.php"> <link rel="top" href="./index.php" title="FORUM TEST Index du Forum" ><link rel="search" href="./search.php" title="Rechercher" ><link rel="help" href="./faq.php" title="FAQ" ><link rel="author" href="./memberlist.php" title="Membres" >
<title>FORUM TEST :: Le forum de la communauté française</title>
<link rel="stylesheet" href="http://img.xooimage.com/files5/s/o/softmetal-358db.css" type="text/css">

<script language="Javascript" type="text/javascript">
<!--
if ( 0 )
{
window.open('privmsg.php?mode=newpm', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
}
//-->
</script>
</head>
<body text="#000000" link="#006699" vlink="#5493B4">
<a name="top"></a> <table width="780" cellspacing="0" cellpadding="10" border="0" align="center">

<tr>
<td class="logobg"><table width="780" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" width="80%" valign="middle"><p><span class="newtitle">FORUM TEST
- </span><span class="newtitle">Le forum de la communauté française</span></p>
<p><span class="gen"><img src="http://img.xooimage.com/files5/l/o/logo_phpbb-358dc.gif" width="788" height="80"><br />
  </span> </p>
<table cellspacing="0" cellpadding="2" border="0">
<tr>
<td align="center" valign="top" nowrap="nowrap"><p><span class="mainmenu"> <a href="faq.php" class="mainmenu"><img src="http://img.xooimage.com/files4/i/c/icon_mini_faq-358dd.gif" width="67" height="28" border="0" alt="FAQ" hspace="3" /></a></span><span class="mainmenu">
<a href="search.php" class="mainmenu"><img src="http://img.xooimage.com/files9/i/c/icon_mini_search-358de.gif" width="67" height="28" border="0" alt="Rechercher" hspace="3" /></a>
<a href="memberlist.php" class="mainmenu"><img src="http://img.xooimage.com/files6/i/c/icon_mini_members-358df.gif" width="67" height="28" border="0" alt="Membres" hspace="3" /></a>
<a href="groupcp.php" class="mainmenu"><img src="http://img.xooimage.com/files6/i/c/icon_mini_groups-358e0.gif" width="67" height="28" border="0" alt="Groupes" hspace="3" /></a>


<span class="mainmenu"><a href="profile.php?mode=editprofile" class="mainmenu"><img src="http://img.xooimage.com/files2/i/c/icon_mini_profile-358e2.gif" width="67" height="28" border="0" alt="Profil" hspace="3" /></a>
</span></p>
<p><span class="mainmenu"><a href="privmsg.php?folder=inbox" class="mainmenu"><img alt="Vous n’avez pas de nouveaux messages" src="http://img.xooimage.com/files8/m/s/msg_outbox-358cd.gif" width="28" hspace="3" height="28" align="ABSMIDDLE" border="0" />Vous n’avez pas de nouveaux messages</a>
<a href="login.php?logout=true" class="mainmenu"><img alt="Déconnexion [ Admin ]" src="http://img.xooimage.com/files2/i/c/icon_mini_login-358e3.gif" width="28" hspace="3" height="28" align="ABSMIDDLE" border="0" />Déconnexion [ Admin ]</a> </span>
</p></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>
<script src="/toolbarxooit/?style=11&welc=Bienvenue+Admin&u=http%3A%2F%2Fgoon.forum-box.com%2Findex.php&fav=&hs="></script><!-- ]]>"')}*/ //--><!--</script>--><!--//--><script type="text/javascript"><!--
 dechex=function(dec){ var strhex = '0123456789ABCDEF'; return strhex.charAt(Math.floor(dec/16)) + strhex.charAt(dec%16); }; myGetComputedStyle=function(elem,cssRule,defaultValue){ if (!elem) return defaultValue; var value=defaultValue; if (document.defaultView && document.defaultView.getComputedStyle){ value=document.defaultView.getComputedStyle(elem, '').getPropertyValue(cssRule); } else { value=elem.currentStyle[cssRule.camelize()]; } if(value=='transparent'||value=='rgba(0, 0, 0, 0)'){ if(elem.parentNode==document){return '#FFFFFF';}; return myGetComputedStyle(elem.parentNode,cssRule,defaultValue); } if(/^#[0-9a-f]{3}$/i.test(value))value='#'+value.substr(1,1)+value.substr(1,1)+value.substr(2,1)+value.substr(2,1)+value.substr(3,1)+value.substr(3,1); else if(m=value.match(/rgba?\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*(,\s*([0-9]+))?\)/i)) { value='#'+dechex(m[1])+dechex(m[2])+dechex(m[3]); } else if(cssRule.match(/color/i) && !value.match(/^#[0-9a-f]{6}$/i)) { if (!window['namedcolors']) { new Ajax.Request('/js/namedcolors.1.js',{method:'GET',asynchronous:false,onSuccess:function(t){window.namedcolors=eval(t.responseText);}}); } if (window['namedcolors'] && namedcolors[value.toLowerCase()]) { value='#'+namedcolors[value.toLowerCase()]; } } return value; }; s=function(_s){if(_s.substr(0,1)=='#')return _s.substr(1,6);return _s;}; guess_colors=function() { var ei='guessColors'+(new Date).getTime(); document.write('<span id="'+ei+'" style="display:none"><a href="#'+ei+'">.</a>.</span>'); var e=document.getElementById(ei); e.style['display']='inline'; var a=e.firstChild; google_color_border=google_color_bg=myGetComputedStyle(e,'background-color','#FFFFFF'); google_color_link=google_color_url=myGetComputedStyle(a,'color','#006699'); google_color_text=myGetComputedStyle(e,'color','#000000'); var s=e.style;s['display']='none';s['visibility']='hidden'; }; google_color_border=google_color_bg=google_color_link=google_color_url=google_color_text='';google_ad_channel+='+7007032353';try{guess_colors();}catch(e){google_color_border=td_color2;google_color_bg=td_color2;google_color_link=body_link;google_color_url=body_link;google_color_text=body_text;google_ad_channel+='+8096539285';};var cs=["border","bg","link","url","text"];for(var i=0,il=cs.length;i<il;++i){var k="google_color_"+cs[i];window[k]=s(window[k]);};

--></script><?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table width="860" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="35" background="http://img.xooimage.com/files6/b/g/bgsoftmetal-358d8.jpg"> </td>

</tr>
<tr>
<td background="http://img.xooimage.com/files6/b/g/bgsoftmetal-358d8.jpg"><table width="94%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" cellspacing="0" cellpadding="2" border="0" align="center">
<tr>
<td align="left" valign="bottom"><span class="gensmall">

Dernière visite le 09/03/2014 16:17:45<br />

La date/heure actuelle est 10/03/2014 08:56:39<br /></span><span class="nav"><a href="index.php" class="nav">FORUM TEST Index du Forum</a></span></td>
<td align="right" valign="bottom" class="gensmall">

<a href="search.php?search_id=newposts" class="gensmall">Voir les nouveaux messages depuis votre dernière visite</a><br /><a href="search.php?search_id=egosearch" class="gensmall">Voir mes messages</a><br />

<a href="search.php?search_id=unanswered" class="gensmall">Voir les messages sans réponses</a></td>
</tr>
</table>
<table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">
<tr>
<th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> Forum </th>
<th width="50" class="thTop" nowrap="nowrap"> Sujets </th>
<th width="50" class="thTop" nowrap="nowrap"> Messages </th>
<th class="thCornerR" nowrap="nowrap"> Derniers Messages </th>
</tr>

<tr>
<td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="f2-go-on-le-forum-de-la-communaute-francaise-de-go.htm" class="cattitle">FORUM TEST</a></span></td>
<td class="rowpic" colspan="3" align="right"> </td>
</tr>

<tr>
<td class="row1" align="center" valign="middle" height="50"><img src="http://img.xooimage.com/files6/f/o/folder_big-358c2.gif" width="46" height="25" alt="Pas de nouveaux messages" title="Pas de nouveaux messages" /></td>
<td class="row1" width="100%" height="50">

<span class="forumlink"> <a href="f1-go-on-le-forum-de-la-communaute-francaise-de-go.htm" class="forumlink">FORUM TESTING</a><br />
</span> <span class="genmed">aucune....


<br />

</span><span class="gensmall">  </span>

</td>
<td class="row2" align="center" valign="middle" height="50"><span class="gensmall">1</span></td>
<td class="row2" align="center" valign="middle" height="50"><span class="gensmall">1</span></td>
<td class="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall"><a href="p3.htm" title="Testing">Testing</a><br />09/03/2014 16:28:07<br /><a href="profile.php?mode=viewprofile&u=2" style="color:#FFA34F;font-weight:bold" class="username-coloured user-id-2">Admin</a> <a href="p3.htm"><img src="http://img.xooimage.com/files1/i/c/icon_latest_reply-da17.gif" alt="Voir le dernier message" title="Voir le dernier message" border="0" /></a></span></td>
</tr>


</table>
<table width="100%" cellspacing="0" border="0" align="center" cellpadding="2">
<tr>
<td align="left"><span class="gensmall"><a href="markf" class="gensmall">Marquer tous les forums comme lus</a></span></td>
<td align="right"><span class="gensmall">Toutes les heures sont au format GMT + 1 Heure</span></td>
</tr>
</table>
<table width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline">
<tr>
<td class="catHead" colspan="2" height="28"><span class="cattitle"><a href="viewonline.php" class="cattitle">Qui est en ligne ?</a></span></td>
</tr>
<tr>
<td class="row1" align="center" valign="middle" rowspan="2"><img src="http://img.xooimage.com/files7/f/o/folder_new_hot-358c5.gif" alt="Qui est en ligne ?" /></td>
<td class="row1" align="left" width="100%"><span class="gensmall">Nos membres ont posté un total de <b>1</b> message<br />Nous avons <b>2</b> membres enregistrés<br />L’utilisateur enregistré le plus récent est <b><a href="profile.php?mode=viewprofile&u=3">LDL</a></b></span>

</td>
</tr> <tr> <td class="row1" align="left"><span class="gensmall">Il y a en tout <a href="viewonline.php"><b>2</b></a> utilisateurs en ligne : 2 Enregistrés, 0 Invisible, 0 Invité et 0 Moteur de recherche


  [ <span style="font-weight:bold;color:#FFA34F"><a href="groupcp.php?g=1" class="groupname" style="color:#FFA34F">Administrateur</a></span> ]

  [ <span style="font-weight:bold;color:#006600"><a href="groupcp.php?g=2" class="groupname" style="color:#006600">Modérateur</a></span> ]

<br />Le record du nombre d’utilisateurs en ligne est de <b>2</b> le 09/03/2014 08:43:01<br />Utilisateurs enregistrés : <a href="profile.php?mode=viewprofile&u=2" style="color:#FFA34F;font-weight:bold" class="username-coloured user-id-2">Admin</a>, <a href="profile.php?mode=viewprofile&u=3">LDL</a>

<br /><br />2 utilisateurs enregistrés – dont 0 invisibles – se sont connectés ces dernières 96 heures: <a href="profile.php?mode=viewprofile&u=2" style="color:#FFA34F;font-weight:bold" class="username-coloured user-id-2">Admin</a>, <a href="profile.php?mode=viewprofile&u=3">LDL</a>

<br /><br />Anniversaires du jour: Aucun anniversaire aujourd’hui<br />Anniversaires des 7 prochains jours: Aucun</span></td> </tr> </table> <table width="100%" cellpadding="1" cellspacing="1" border="0">
<tr>
<td align="left" valign="top"><span class="gensmall">Ces données sont basées sur les utilisateurs actifs des 60 dernières minutes</span></td>
</tr>

</table>

<br clear="all" />
<table class="foldersline" cellspacing="3" border="0" align="center" cellpadding="0">
<tr>
<td width="20" align="center"><img src="http://img.xooimage.com/files5/f/o/folder_new_big-358c3.gif" alt="Nouveaux messages"/></td>
<td><span class="gensmall">Nouveaux messages</span></td>
<td>  </td>
<td width="20" align="center"><img src="http://img.xooimage.com/files6/f/o/folder_big-358c2.gif" alt="Pas de nouveaux messages" /></td>
<td><span class="gensmall">Pas de nouveaux messages</span></td>
<td>  </td>
<td width="20" align="center"><img src="http://img.xooimage.com/files3/f/o/folder_locked_big-358c4.gif" alt="Forum Verrouillé" /></td>
<td><span class="gensmall">Forum Verrouillé</span></td>

</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" background="http://img.xooimage.com/files6/b/g/bgsoftmetal-358d8.jpg"> </td>
</tr>
</table>
</body>
</html>
<br />
<div class="panel bg2"><div class="inner"><span class="corners-top"><span></span></span>
<table class="forumline forum-table" border="0" cellspacing="1" width="100%">
<tr>

<th class="thTop" nowrap="nowrap" colspan="3"> Chat </th>
</tr>
<tr class="bg2">
<td class="row3" style="padding:3px" colspan="3">
<div id="chatTopic" class="genmed" style="font-weight:bold">
<div id="chatArchiveLink" style="display:none;float:right">
<a href="javascript:void(0);">[Archives]</a>
</div>

</div>
</td>
</tr>
<tr class="bg1" style="width:100%">
<td class="row1" style="padding:0;width:100%">
<div id="chatList" style="height:100px;overflow:auto;width:100%">

<table id="chatMsgContainer_table" class="forumline" border="0" cellspacing="1" width="100%" style="border:0">
<tbody id="chatMsgContainer">
</tbody>
</table>
</div>
</td>

<td id="chatGripTd" class="row2" style="width:3px;cursor:w-resize"> </td>
<td class="row1" style="vertical-align:top">
<div id="chatConnectedDiv" style="width:100%;height:150px;overflow:auto"></div>
</td>

</tr>
<tr class="bg2">
<td class="row1" colspan="3">
<img src="http://img.xooimage.com/files5/d/6/7/grip-115818.gif" width="11" height="11" alt="resize" style="cursor:n-resize;float:right;padding-top:10px" id="chatVGrip" title="Redimensionner le chat" /><img src="http://img.xooimage.com/files10/5/e/a/window-115821.gif" style="cursor:pointer;padding-top:10px;padding-right:3px;width:11px;height:11px;float:right;" onclick="window.open('/chat2.php','_blank','menubar=no,toolbar=no,resizable=yes,scrollbars=yes');" title="Ouvrir le chat dans une nouvelle fenêtre" id="chatPopupButton" /><input id="chatButtonF" type="button" class="liteoption button2" style="background-position:center;background-repeat:no-repeat" title="Jouer un son lors de l’arrivée d’un nouveau message" value=" " /><input id="chatButtonG" type="button" class="liteoption button2" style="font-weight:bold" title="Mettre vos messages en gras par défaut. Vous pouvez aussi utiliser le BBCode normal pour formater votre message." value=" G " /><input id="chatButtonI" type="button" class="liteoption button2" style="font-style:italic" title="Mettre vos messages en italic par défaut. Vous pouvez aussi utiliser le BBCode normal pour formater votre message." value=" I " /><input id="chatButtonC" type="button" class="liteoption button2" style="background:url(http://img.xooimage.com/files5/c/o/color-58b80.gif) no-repeat center" title="Modifier la couleur par défaut de vos messages. Vous pouvez aussi utiliser le BBCode normal pour formater votre message." value=" " /><input type="text" id="chatMsg" class="post inputbox" style="width:70%" maxlength="100" /><input type="button" value="Envoyer" onclick="xooitChat.sendMsg();" class="mainoption button2" /> <input type="button" value="Smilies" onclick="xooitChat.showSmilies();" class="mainoption button2" />

</td>
</tr>
</table>
<span class="corners-bottom"><span></span></span></div></div>
<br />
<script type="text/javascript" src="http://img.xooimage.com/files98/a/f/f/chat3_french-41ae77f.js"></script><script type="text/javascript"> loadXooitChat=function(){ try{ xooitChat = new xooitChatClass("row1","row2",1,[1,1,1,1],2,1,0,1,"75af12cf503ba3ef622b01f6cb546eb4",false,5000,'goon.forum-box.com'); }catch(e){ throw(e); } }; setTimeout(loadXooitChat,1); </script><noscript><p style="background-color:InfoBackground;color:InfoText;padding:1em;"><!-- google_ad_section_start(weight=ignore) --><span class="genmed">Vous devez réactiver le Javascript dans votre navigateur internet pour utiliser cette fonctionnalité</span><!-- google_ad_section_end --></p></noscript>
 
<script type="text/javascript">
var autocompleteerror;
try {
  // takes a text field and an array of strings for autocompletion
  function autocomplete(input, data) {
 var word = input.value.split(' ');
 word = word[word.length-1].toLowerCase();

    if (word.length) {
 var preword = input.value.substr(0, input.value.length - word.length);
      var candidates = []
      // filter data to find only strings that start with existing value
      for (var i=0; i < data.length; i++) {
        if (data[i].toLowerCase().indexOf(word) == 0 && data[i].length > word.length)
          candidates.push(data[i])
      }
      
      if (candidates.length > 0) {
        // some candidates for autocompletion are found
        if (candidates.length == 1) input.value = preword + candidates[0]
        else input.value = preword + longestInCommon(candidates, input.value.length)
        return true
      }
    }
    return false
  }
  
  // finds the longest common substring in the given data set.
  // takes an array of strings and a starting index
  function longestInCommon(candidates, index) {
    var i, ch, memo
    do {
      memo = null
      for (i=0; i < candidates.length; i++) {
        ch = candidates[i].charAt(index)
        if (!ch) break
        if (!memo) memo = ch
        else if (ch != memo) break
      }
    } while (i == candidates.length && ++index)
    
    return candidates[0].slice(0, index)
  }
  
  function getData() {
  var e;
 var ret = [];
 for (var a in xooitChatConnectedUsers){ ret.push(a); }
    return ret;
  }
  
  
  function startAutoComplete()
  {
 var autocompleteerror;
   try {
  var input = document.getElementById('chatMsg')
  
  // catch TAB keypresses in text input
  input.onkeydown = function(e) {
 var autocompleteerror;
 try {
 if (window.event) e = window.event;
 
    if (e.keyCode == 9)
     {
 autocomplete(this, getData());
 if (e.preventDefault) e.preventDefault(); else e.returnValue = false;
 }
 }catch(autocompleteerror){autocompleteerror = true;};
  };
 }catch(autocompleteerror){autocompleteerror = true;};
  }
  setTimeout("startAutoComplete()", 100);
}catch(autocompleteerror){autocompleteerror = true;};
</script>
 

<!-- //--> <!-- ]]>"')}*/ //--><!--</script>--><!--//-->
<script type="text/javascript"><!--
(function(){
var f = window.onresize || function(){};
window.onresize = function(){
 document.cookie="ww=" + window.innerWidth + "; expires=Thu, 18 Dec 2015 12:00:00 GMT; path=/";
 f();
};
document.cookie="ww=" + window.innerWidth + "; expires=Thu, 18 Dec 2015 12:00:00 GMT; path=/";
})();
--></script><?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FORUM TEST :: Le forum de la communauté française</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table width="860" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="35" background="softmetal/bgsoftmetal.jpg"> </td>
</tr>
<tr>
<td background="http://img.xooimage.com/files6/b/g/bgsoftmetal-358d8.jpg"><table width="94%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>

<div align="center"><span class="copyright"><br /><a href="/index.php">Index</a> | <a href="admin/?rci=75af12cf503ba3ef622b01f6cb546eb4" rel="nofollow"><b>Panneau d’administration</b></a> | <a href="http://xooit.xooit.com" target="_blank">Forum gratuit d’entraide</a> | <a href="http://www.xooit.com/fr/annuaire/" target="_blank">Annuaire des forums gratuits</a> | <a href="/report-violation.php?url=http%3A%2F%2Fgoon.forum-box.com%2Findex.php">Signaler une violation</a> | <a href="http://www.xooit.com/fr/cgu.html" target="_blank">Conditions générales d'utilisation</a><script type="text/javascript">
function chatimwith(userId)
{
 alert("La messagerie interactive n'est pas activee sur votre compte.");
}

</script>
<script type="text/javascript" src="http://img.xooimage.com/files28/5/5/9/kloiscommunicator1-1c051cd.js"></script>
<script type="text/javascript">
KLOISCommunicator.iconSrc = "";
KLOISCommunicator.init();
</script>
<script type="text/javascript" src="/activity.tplscript.php?1394438199"></script>
<style type="text/css">
#mainDivForCloseCIMDIV {
 /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
  position: absolute; left: 0px; top: 0px;
}
body > div#mainDivForCloseCIMDIV {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
  position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<style type="text/css">
div#mainDivForCloseCIMDIV {
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
  left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]-->
<script type="text/javascript">

var xooitCheckActivityMessagesActif = true;
(function(){
 function xooitCheckActivityMessages()
 {
 if (xooitCheckActivityMessagesActif)
 {
 var e;
 try {
 if (KLOISCommunicator.ismain())
 {
 var d;
 if (d = document.getElementById('xooitCheckActivityMessagesScript'))
 d.parentNode.removeChild(d);
 var v = new Date();
 v = v.getHours() + 'x' + v.getMinutes() + 'x' + v.getSeconds();

 var lastuid = KLOISCommunicator._getValue('activitymessage');

 if (lastuid)
 {
 v += '&lastuid=' + lastuid;
 }

 var scriptElement = document.createElement("script");
 scriptElement.src = "/activity.check.php?" + v;
 scriptElement.type="text/javascript";
 scriptElement.id = 'xooitCheckActivityMessagesScript';

 xooitCheckActivityMessagesActif = false;
 
var b = document.getElementsByTagName("body")[0];
 if (b.firstChild != null) b.insertBefore(scriptElement, b.firstChild);
 else b.appendChild(scriptElement);
 }
 }catch(e){};
 setTimeout(xooitCheckActivityMessages, 6000);
 }
 else
 setTimeout(xooitCheckActivityMessages, 3000);
 }
 setTimeout(xooitCheckActivityMessages, 2000);
})();
KLOISCommunicator.on('activitymessage', function(uid, title, message, url){
 var msg = {};
 msg.uid = uid;
 msg.title = title;
 msg.msg = message;
 if (url) msg.url = url;
 else msg.url = false;
 XOOITACTIVITYMESSENGER.push(msg);
});
</script>
<script type="text/javascript">



(function(){


document.xooitImgOverOutT = [];
document.xooitImgOverOutO = [];
document.xooitImgOverOut = function(oo, img, delayed)
{

 if (delayed)
 {
 var img = document.xooitImgOverOutO[img];
 if (oo == 'over')
 {
 img.firstChild.style.display = '';
 }
 else
 {
 img.firstChild.style.display = 'none';
 }
 }
 else
 {
 // Cherchons l'objet correspondant...
 var imgn = -1;
 for (var a = 0; typeof document.xooitImgOverOutT[a] != 'undefined'; a++)
 {
 if (img === document.xooitImgOverOutO[a])
 {
 imgn = a;
 break;
 }
 }
 if (imgn == -1)
 {
 document.xooitImgOverOutO[a] = img;
 imgn = a;
 }
 
clearTimeout(document.xooitImgOverOutT[imgn]);

 document.xooitImgOverOutT[imgn] = setTimeout(function(){
 document.xooitImgOverOut(oo, imgn, true);
 }, 5);
 }
}

document.xooitDisableClick = false;

 var elts = document.getElementsByClassName('xooitImgPrevent');
 for (var i = 0; i < elts.length; i++)
 {
 
elts[i].onclick = function(e){
 document.xooitDisableClick = true;
 window.open('/report-violation.php?url=http%3A%2F%2Fgoon.forum-box.com%2Findex.php&pic=' + escape(this.parentNode.nextSibling.src));
 return false;
 };
 }
})();
</script>
 
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-489995-2");
pageTracker._trackPageview();pageTracker._setVar("member");
} catch(err) {}</script><br />
<!--
We request you retain the full copyright notice below including the link to www.phpbb.com.
This not only gives respect to the large amount of time given freely by the developers
but also helps build interest, traffic and use of phpBB 2.0. If you cannot (for good
reason) retain the full copyright we request you at least leave in place the
Powered by phpBB  line, with phpBB linked to www.phpbb.com. If you refuse
to include even this then support on our forums may be affected.
The phpBB Group : 2002
// -->
Powered by <a href="http://www.phpbb.com/" target="_phpbb" class="copyright">phpBB</a>  © 2001, 2014 phpBB Group<br />Traduction par : <a href="http://www.phpbb-fr.com/" target="_blank" class="copyright">phpBB-fr.com</a></span><br></div>
<div align="center"><span class="copyright">SoftMetal theme by <a href="http://www.macthink.net/" class="copyright">Macthink</a></span></div></td>
</tr>
</table>
</td></tr></table><!-- //--> <!-- ]]>"')}*/ //--><!--</script>--><!--//-->

<script type="text/javascript"><!--
var apicitDatas = '4/xoo/xoo1124450';
var apicitMoreParams = '';
var apicitCheckDieseValue = true;
apicitMoreParams += "&bd=24120238";apicitMoreParams += "&xy=y10";
document.write('<sc' + 'ript type="text/javascript" src="http://apicit.net/loader.v7.js"></sc' + 'ript>');
document.write('<sc' + 'ript type="text/javascript" src="/js/kwchecker10.4.js"></sc' + 'ript>');
--></script><!-- //-->
</body>
</html>
<tr>
<td height="40" background="http://img.xooimage.com/files5/b/g/bgbottomsoftmetal-358d9.jpg"> </td>
</tr>


Vous pouvez vous inscrire sur la version beta, pour tester :

http://goon.forum-box.com/index.php


Je pense que le script pour la messgerie d'activite (slide-in) est celui-ci (si je ne me trompe pas) :

Code:

<script type="text/javascript">

var xooitCheckActivityMessagesActif = true;
(function(){
   function xooitCheckActivityMessages()
   {
      if (xooitCheckActivityMessagesActif)
      {
         var e;
         try {
            if (KLOISCommunicator.ismain())
            {
               var d;
               if (d = document.getElementById('xooitCheckActivityMessagesScript'))
                  d.parentNode.removeChild(d);
               var v = new Date();
               v = v.getHours() + 'x' + v.getMinutes() + 'x' + v.getSeconds();

               var lastuid = KLOISCommunicator._getValue('activitymessage');

               if (lastuid)
               {
                  v += '&lastuid=' + lastuid;
               }

               var scriptElement = document.createElement("script");
               scriptElement.src = "/activity.check.php?" + v;
               scriptElement.type="text/javascript";
               scriptElement.id = 'xooitCheckActivityMessagesScript';

               xooitCheckActivityMessagesActif = false;
   
               var b = document.getElementsByTagName("body")[0];
               if (b.firstChild != null)      b.insertBefore(scriptElement, b.firstChild);
               else                                    b.appendChild(scriptElement);
            }
         }catch(e){};
         setTimeout(xooitCheckActivityMessages, 6000);
      }
      else
         setTimeout(xooitCheckActivityMessages, 3000);
   }
   setTimeout(xooitCheckActivityMessages, 2000);
})();
KLOISCommunicator.on('activitymessage', function(uid, title, message, url){
   var msg = {};
   msg.uid = uid;
   msg.title = title;
   msg.msg = message;
   if (url) msg.url = url;
   else msg.url = false;
   XOOITACTIVITYMESSENGER.push(msg);
});
</script>

.

Il y a pas mal à lire. Je n'ai pas trop le temps pour me pencher dessus sérieusement. Mais je pourrais regarder un petit bout de code de temps en temps.

up.


je relance le sujet.  je sais que c'est pas evident, et c'est un gros travail de s'sy plonger,
en meme temps ca serait tellement bien qu'on ait ca ! on serait les seuls a l'avoir....

j'y crois beaucoup comme un enorme plus pour le forum !



.

Bon franchement ca dépasse mes compétences, mais il y a une gestion des events et listeners dans phbb.
Par exemple: https://wiki.phpbb.com/Event_List#core.submit_post_end

wich says: This event is used for performing actions directly after a post or topic

Après faut pouvoir écouter un évenement php...

Tu peux modifier tes fichiers php?

.


non, je peux pas....
je peux rajouter des pages html, je peux inserer des scripts javscript,
mais je peux pas toucher au php....




.

.

bon !
je crois que c’est du bon cette fois-ci.

un nouveau code est apparu pur rajouter le titre du sujet alerte, dans la barre de notification.
on a donc tous les codes je pense pour récupérer le code nouveau message d'un sujet,
et l'adapter pour une alerte pop-up personnalisé, ce qui devrait nous donner notre fameux slide-in !

voici le code, pour les inities, si vous pouvez me donner votre avis :

Code:

       $(function(){
        
         var texte_milieu = " a posté dans ";
          var si_titre_vide = "ce sujet";
        
         if(typeof(compileNotif)!="function")return;var d=compileNotif;Toolbar.compileNotif=compileNotif=function(b){var a=d(b);if(b.text.type==FA.Notification.NOTIF_TOPIC_WATCH){var c=a.match(/^(.*) a écrit un message dans (<a href="\/t[0-9]+(p[0-9]+)?-([^#?"]*)[^"]+">)[^<]+<\/a>$/);c&&(b=c[1]+texte_milieu+c[2],a=c[4],a="topic"==a||/^[\s-]*$/.test(a)?si_titre_vide:a.replace(/-/g," ").replace(/(^\s+|\s+$)/g,""),a=b+a+"</a>")}return a}
        
       });

source :

http://forum.forumactif.com/t346838-titre-dans-la-notification-de-sujet-suivi

.

Bon j'ai un peu analyser cette toolbar, et ce qu'il en ressort, est peut être plus simple qu'il n'y parait.

Alors le maximum d'information qu'on pourra récupérer c'est les dix derniers (ce qui devrait suffir)

Forumactif utilise le format JSON et la librairie jquery 1.7.2.

voici le fichier au format JSON : https://go-on.forumactif.com/notification.forum

Donc au final au s'en fout un peu du code de forumactif, il suffit de repartir sur cette base pour développer le code avec jquery (il y aura encore quelques petit soucis probablement mais bon...)

En espérant avoir donné du courage à Nimporte ou à climu ou à encore une autre personne.   

ps: le code de la toolbar se trouve dans
https://illiweb.com/rs3/48/frm/jquery/notif/FA.js
et
https://illiweb.com/rs3/48/frm/jquery/toolbar/FAToolbar.js