The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

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

View previous topic View next topic Go down

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

Post by fascicularia on January 27th 2016, 3:55 pm

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Opera
Screenshot of problem : https://i68.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


Last edited by fascicularia on January 28th 2016, 2:17 pm; edited 3 times in total

fascicularia
Forumember

Posts : 121
Reputation : 1
Language : french

Back to top Go down

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

Post by fascicularia on January 28th 2016, 12:38 pm

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://illiweb.com/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.

fascicularia
Forumember

Posts : 121
Reputation : 1
Language : french

Back to top Go down

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

Post by fascicularia on January 28th 2016, 2:17 pm

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>


');
 
});

fascicularia
Forumember

Posts : 121
Reputation : 1
Language : french

Back to top Go down

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

Post by SLGray on January 28th 2016, 7:49 pm

Thanks for posting the solutions.

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum