Add a similar module in the center of notifications Resolved (small conflict with a second js)

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Opera
Screenshot of problem : https://i.servimg.com/u/f68/11/93/85/24/inform10.png
Who the problem concerns : All members
Forum link : http://altitudetropicale.forums-actifs.com

Description of problem

Hello everyone,
I would like to add a similar module in the center of notifications on the toolbar.

This module should be just prior notifications.

This module contains this html frame.

Code:

<a href="/search?search_id=newposts">Voir les nouveaux messages depuis votre dernière visite</a><br /><a href="/search?search_id=activetopics">Sujets actifs du jour</a><br /> <a href="/search?search_id=egosearch">Voir ses messages</a> <br /><a href="/search?search_id=unanswered">Voir les messages sans réponses</a><br /><a href="/portal?pid=1&tt=1">Les 100 derniers sujets</a><br /><a href="/portal?pid=63">Les 25 derniers sujets : lecture du premier topic</a><br /><a>Les 25 derniers topics par forum</a><br />
        <div class="c2">
            <select onchange="location = this.value" class="c1"><option selected="selected">Choisir la section</option><option value="/portal?pid=54">Vie du site</option><option value="/portal?pid=5">Les plantes</option><option value="/portal?pid=55">Aspects généraux</option><option value="/portal?pid=56">Maladies et ravageurs</option><option value="/portal?pid=57">Visites de jardin</option><option value="/portal?pid=58">Fiches et articles</option><option value="/portal?pid=59">Échanges et bons plans</option><option value="/portal?pid=60">Liens du web</option><option value="/portal?pid=61">Divers</option></select>
        </div>

This is you it possible?

thank you in advance for your help

Hello everyone,
I managed to do what I wanted.
Here javascript

Code:

(function() {
    window.fmtabs = {
        add: function(name) {
            $('#fa_right').prepend('<div class="toolbar_name">' +
                name + '</div>');
        },
        list: function(name, html) {
            $('#fa_right').prepend('<div id="toolbar_list_name_' +
                name + '" class="toolbar_list_name">' + name +
                '</div><div id="toolbar_list_' + name.replace(
                    /\s/g, '_') + '" class="toolbar_list">' +
                html + '</div>');
            $('#toolbar_list_name_' + name.replace(/\s/g, '_')).click(
                function() {
                    if (this.className == "toolbar_list_name")
                        this.className += " active";
                    else this.className = "toolbar_list_name";
                    this.nextSibling.style.left = this.offsetLeft +
                        'px';
                    this.nextSibling.style.top = this.offsetHeight +
                        'px';
                    $(this.nextSibling).slideToggle();
                });
        }
    };
})();
$(window).load(function() {
    fmtabs.list('Informations','<li class="fa_separator"></li><div class="contentText ellipsis"><a href="/search?search_id=newposts">Voir les nouveaux messages depuis votre dernière visite</a></div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/search?search_id=activetopics">Sujets actifs du jour</a><div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/search?search_id=egosearch">Voir ses messages</a> <div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/search?search_id=unanswered">Voir les messages sans réponses</a></div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/portal?pid=1&tt=1">Les 100 derniers sujets</a></div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/portal?pid=63">Les 25 derniers sujets : lecture du premier topic</a></div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><font color="black">Les 25 derniers topics par forum</font><br /> <select onchange="location = this.value" class="c1"><option selected="selected">Choisir la section</option><option value="/portal?pid=54">Vie du site</option><option value="/portal?pid=5">Les plantes</option><option value="/portal?pid=55">Aspects généraux</option><option value="/portal?pid=56">Maladies et ravageurs</option><option value="/portal?pid=57">Visites de jardin</option><option value="/portal?pid=58">Fiches et articles</option><option value="/portal?pid=59">Échanges et bons plans</option><option value="/portal?pid=60">Liens du web</option><option value="/portal?pid=61">Divers</option></select></div>'
    );
    document.getElementById(
        "toolbar_list_name_http://2img.net/i/fa/fdf/questions.png"
    ).innerHTML = "Test";
});


and css

Code:

 #fa_right .toolbar_list_name, #fa_right .toolbar_name {
        display: inline-block;
        line-height: 30px;
        padding: 0px 5px;
        color:rgb(206, 215, 229);
    }
    #fa_right .toolbar_list_name.active {
        background-color: #FFF;
        color: #000;
        border-left: 1px solid #000;
        border-right: 1px soli #000;
    }
    #fa_right .toolbar_list {
        display: none;
        position: absolute;
        list-style-type: none;
        margin: 0px;
        padding: 0px 10px;
        background-color: #FFFFFF;
        min-width: 200px;
        width: auto;
        border: 1px solid #333333;
        line-height: 30px;
        border-top: 0px solid #FFFFFF;
        z-index: 999;
        color: #000000 !important;
    }
    #fa_right .toolbar_list :link, #fa_right .toolbar_list :visited {
        color: black !important;
      font-size: 12px!important;
    }

#fa_right .toolbar_list_name, #fa_right .toolbar_name {
background: url(http://i68.servimg.com/u/f68/11/93/85/24/dalert12.png) no-repeat;
padding-left: 23px;
background-position: 0px 7px;
}
   
#fa_right .toolbar_list {
  display: none;
  position: absolute;
  list-style-type: none;
  margin-left: -170px;
padding: 5px!important;
  background-color: white;
  min-width: 175px;
  width: auto; 
  line-height: 32px;
  border-top: 0px solid #FFFFFF;
  z-index: 999; 
  top: 50px!important;
    border: 1px solid #e0e0e0!important;
  -webkit-border-radius: 5px!important;
  -moz-border-radius: 5px!important;
  border-radius: 5px!important 
}
 
div#toolbar_list_Informations:before {
  content: url(http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png);
  position: relative;
  left: 66%;
  top: -15px;
}
#fa_toolbar #fa_right .fa_separator {
  width: 100%!important;
 
} 
   
div#toolbar_list_name_Informations:hover {
  background-color: #799700;
}   

The result

I run against a conflict with this second js. avatars no longer appear.

Code:

$(window).load(function(){$('#notif_list').show().css('opacity', '0');
function loko() { $('#fa_toolbar > #fa_right > #notif_list li .contentText').each(function (notifFace) {
        var notifFaceurl = $(this).find('a[href*="/u"]').attr('href');
        $(this).prepend('<span class="notifFaceavatar" id="notifFaceavatar' + notifFace + '"></span>');
        $('#notifFaceavatar' + notifFace).load(notifFaceurl + ' table.forumline tbody tr td.row1.gensmall img:eq(0)');
    });

}; setTimeout(function(){
loko(); $('#notif_list').hide().css('opacity', '1');
}, 1000); $('#fa_notifications').click(function(){ $('#notif_list').css('opacity', '1').toggle(); });
});

Code:

#fa_toolbar #fa_right #notif_list:-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
border-radius: 10px !important;
background-color: #F5F5F5 !important;
}
#fa_toolbar #fa_right #notif_list:-webkit-scrollbar {
width: 12px !important;
background-color: #F5F5F5 !important;
}
#fa_toolbar #fa_right #notif_list:-webkit-scrollbar-thumb {
border-radius: 10px !important;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3) !important;
background-color: #555 !important;
}
#fa_toolbar #fa_right #notif_list {
overflow: hidden;
height: 400px !important;
overflow-x: hidden !important;
}
#fa_toolbar #fa_right #notif_list:hover {
overflow: scroll !important;
overflow-x: hidden !important;
}
#fa_toolbar #fa_right #notif_list li.unread {
background-color: #EEEFF4 !important;
}
#fa_toolbar #fa_right #notif_list li .contentText {
color: #333 !important;
height: 50px !important;
}
.notifFaceavatar {
float:left !important;
margin:0 5px !important;
padding:2px !important;
}
.notifFaceavatar img {
height: 45px !important;
width: 45px !important;
}
#fa_toolbar #fa_right #notif_list {
border: 1px solid #e0e0e0 !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
#fa_toolbar #fa_right #notif_list li.see_all {
text-align: center !important;
background-color: #f7f7f7 !important;
-webkit-border-bottom-right-radius: 5px !important;
-webkit-border-bottom-left-radius: 5px !important;
-moz-border-radius-bottomright: 5px !important;
-moz-border-radius-bottomleft: 5px !important;
border-bottom-right-radius: 5px !important;
border-bottom-left-radius: 5px !important;
}
#fa_toolbar #fa_right #notif_list a  {
color: #3B5998 !important;
}
#fa_toolbar #fa_right #notif_list li a.delete {
    background: url('http://i.imgur.com/b5E2MD2.jpg') no-repeat !important;
}
#fa_toolbar #fa_right #notif_list li a.delete:hover {
    background: url('http://i.imgur.com/ydpwRs2.jpg') no-repeat !important;
}
#fa_toolbar #fa_right #notif_list li {
border-top: 1px solid #dddddd !important;
border-left: 0px !important;
border-bottom: 0px !important;
border-right: 0px !important;
}
#fa_toolbar #fa_right #notif_list li hr {
border: 0px !important;
}

Before I activates the first js


after


If anyone sees what could create that cares !!!
@Ange tuteur may be ?
Thank you in advance for your assistance.

Solved :

Code:

(function() {
  window.fmtabs = {
      add: function (name) {
        $('#fa_right').prepend('<div class="toolbar_name">' + name + '</div>');
      },
      list: function (name, html) {
            $('#fa_right').prepend('<div id="toolbar_list_name_' + name + '" class="toolbar_list_name">' + name + '</div><div id="toolbar_list_' + name.replace(/\s/g, '_') + '" class="toolbar_list">' + html + '</div>');
            $('#toolbar_list_name_' + name.replace(/\s/g, '_')).click(function() {
              if (this.className == "toolbar_list_name") this.className += " active";
              else this.className = "toolbar_list_name";
              this.nextSibling.style.left = this.offsetLeft + 'px';
              this.nextSibling.style.top = this.offsetHeight + 'px';
              $(this.nextSibling).slideToggle();
            });
      }
  };
})();
$(window).load(function () {
    fmtabs.list('Informations', '

<li class="fa_separator"></li><div class="contentText ellipsis"><a href="/search?search_id=newposts">Voir les nouveaux messages depuis votre dernière visite</a></div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/search?search_id=activetopics">Sujets actifs du jour</a><div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/search?search_id=egosearch">Voir ses messages</a> <div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/search?search_id=unanswered">Voir les messages sans réponses</a></div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/portal?pid=1&tt=1">Les 100 derniers sujets</a></div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><a href="/portal?pid=63">Les 25 derniers sujets : lecture du premier topic</a></div>
<li class="fa_separator"></li>
<div class="contentText ellipsis"><font color="black">Les 25 derniers topics par forum</font><br /> <select onchange="location = this.value" class="c1"><option selected="selected">Choisir la section</option><option value="/portal?pid=54">Vie du site</option><option value="/portal?pid=5">Les plantes</option><option value="/portal?pid=55">Aspects généraux</option><option value="/portal?pid=56">Maladies et ravageurs</option><option value="/portal?pid=57">Visites de jardin</option><option value="/portal?pid=58">Fiches et articles</option><option value="/portal?pid=59">Échanges et bons plans</option><option value="/portal?pid=60">Liens du web</option><option value="/portal?pid=61">Divers</option></select></div>


');
 
});

Thanks for posting the solutions.

Topic solved and archived