Système d'annonce en temps réel (aller plus loin)

[horusbk]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : http://themazerunner-forum.fr/

Description du problème

Bonjour^^

J'ai récemment installé sur mon forum l' système d'alerte en temps réel afin de pouvoir informer mes membres de diverses choses. Je voudrais aller plus loin avec ce système. En effet, j'ai remarqué qu'à chaque fois que je publie une nouvelle annonce, celle-ci remplace automatiquement, la précédente sauf dans le cas ou le membre à masqué l'annonce en cliquant sur la croix.

Mon souhait serait de pouvoir afficher plusieurs annonces en même temps, en colonne sur mon forum. Mais de pouvoir limiter l'affichage d'un certains nombres d'annonces. Dans le cas présent, j'aimerais pouvoir afficher au moins trois annonces maximum.

Vous trouverez un exemple de se que je voudrais obtenir tout en haut en capture d'écran (montage). Merci à ceux qui pourront s'intéresser à mon problème.

Cordialement,
1baptiste

[horusbk]

up

[horusbk]

Up

[horusbk]

up !

[horusbk]

up ! 

[horusbk]

Up

[horusbk]

up !

[horusbk]

up du jour

[horusbk]

up !

[horusbk]

up !

[no_way]

Bonjour, j'ai dû modifier un peu (beaucoup) le script, il fonctionne avec toutes les versions à présent mais nécessite une modification concernant le forum contenant le sujet des alertes, il vous faut mettre "Classer les messages d'un sujet par " à "Date du message (le plus récent en premier)" voici le code javascript modifié:

Code:

function realTime_alert() {
          var topicAlertId="24";
          var howManyAlerts=3;
            jQuery.ajax({
                    url: "/t"+topicAlertId+"-?change_version=invision",
                    success: function(result) {
                        var html = jQuery(result),a,alertBodyContainer=$("<div>",{id:"alertBodyContainer"});
                  var d=function(e){
                      var a,alertBody=$($(".cont_code,code",e).text()),b=[],id=(a=$(e).closest(".post[id^='p']")).length?a[0].id:$(e).closest(".postmain").find(".posthead")[0].id,lS=$.parseJSON(localStorage.getItem('realTimeAlert'))||[];
                      if(lS.indexOf(id)===-1){
                        var $el=$(alertBody);
                        $el.attr("data-pid",id);
                        alertBodyContainer.append($el);
                        }
                  };
                  html.find(".post .codebox").each(function(i,e){
                      i<howManyAlerts&&d(e);
                      });
                  $("#alertBodyContainer").length?$("#alertBodyContainer").html(alertBodyContainer.html()):$("body").append(alertBodyContainer);
                      $('.close',$("#alertBodyContainer")).click(function() {
                                var lS=$.parseJSON(localStorage.getItem('realTimeAlert'))||[];
                                var $itm=$(this).closest('.realTime_alert');
                                $itm.fadeOut();
                                lS.push($itm.attr("data-pid"))&&lS.length>howManyAlerts&&lS.splice(0,1);
                                localStorage.setItem('realTimeAlert',JSON.stringify(lS));
                              });
                    },
            });
            return topicAlertId;
        }
        $(function(){
        if(_userdata["session_logged_in"]) {
          try{
            localStorage.setItem('test','test');
            localStorage.getItem('test')==='test'&&realTime_alert()&&setInterval('realTime_alert();', 30000); // Reactualisation toutes les 30s
            localStorage.removeItem('test');
            }catch(e){}
          }
        });

et voici le code CSS modifié:

Code:

#alertBodyContainer{
position:fixed;
top:50px;
right:20px;
}
.realTime_alert{
background:#FDFDFD no-repeat 10px center;
-webkit-background-size:50px;
-moz-background-size:50px;
-o-background-size:50px;
background-size:50px;
-webkit-box-shadow:0 0 4px rgba(0,0,0,.6);
-moz-box-shadow:0 0 4px rgba(0,0,0,.6);
box-shadow:0 0 4px rgba(0,0,0,.6);
position:relative;
margin-bottom:10px;
min-height:60px;
font-size:13px;
width:200px;
padding:10px 10px 10px 70px;
font-family:Helvetica;
color:#474747;
}
.realTime_alert b{
display:block;
margin-bottom:5px;
font-size:15px;
}
.realTime_alert .close{
position:absolute;
right:10px;
top:5px;
font-size:15px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
height:16px;
width:16px;
text-align:center;
line-height:13px;
cursor:pointer;
}
.realTime_alert .close:hover{
color:#FFF;
background:#666;
}
#ebtzd .tooltip{
opacity:0;
position:relative;
overflow:visible;
z-index:100!important;
display:inline-block;
top:5px;
-webkit-transition-duration:500ms;
-moz-transition-duration:500ms;
-o-transition-duration:500ms;
transition-duration:500ms;
background:rgba(0, 0, 0, .8);
padding:10px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font-family:Helvetica;
letter-spacing:1px;
font-size:13px;
width:300px;
color:#fff;
}

Je vous laisse tester.

[Invité]

Bonjour,

intéressé par cette modification, je constate que la dernière alerte (celle d'aujourd'hui ne s'affiche pas), est ce que c'est maximum 3 annonces affichée, si c'est le cas peut-on en mettre plus ?

Désolé de m'incruster dans la discution.

Cordialement
Romain

[no_way]

Bonjour, alors oui là c'est 3 alertes maxi mais c'est modifiable, il suffit de modifier cette ligne:

Code:

var howManyAlerts=3;

et de modifier 3 par la valeur voulue

[horusbk]

Bonjour et merci @no_way pour votre réponse,

EDIT: vraiment géniale votre modification no_way, c'est exactement ce que je voulais :


Pour ma part je ne peux plus envoyer d'alerte c'est bizarre. L'alerte me dit qu'elle est envoyée mais elle ne s'affiche pas...

Cordialement,
1baptiste

[no_way]

Oui ça me le fait moi aussi et j'ai vu que j'avais fait une erreur, le script originel renvoie l'id du topic je modifie mon premier message, le code Javascript est corrigé.

[horusbk]

Gé-ni-al !
Grand merci @no_way le script est désormais opérationnel. Passer une bonne journée
Je me suis permis de faire une petite modification avec un JS pour créer des alertes depuis le topic en question via un bouton qui ouvre la page HTML.

Cordialement,
1baptiste

[no_way]

Je vous en prie et bonne continuation

[Invité]

Pareillement, un grand merci no-way et merci à 1baptiste d'avoir ouvert le sujet.

Bien cordialement
Romain