Notification popup

Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome
Screenshot of problem : https://i.gyazo.com/11ae59a56968990d18631f86f8efd561.gif
Who the problem concerns : All members
Forum link : http://think-tank.forumotion.com/

Description of problem

Hello,

I would like to make the notifications of the FM Toolbar appear like the image i added above. Can they appear like that? If yes how can i control them via javascript?

I am using this code for the image:

Code:

$(function() {
    var scrollNav = function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 600) $('#btmBox').attr('style','bottom:40px;transition:600ms;right:2px;z-index:20000;');
        if (scroll < 600) $('#btmBox').attr('style','bottom:40px;transition:600ms;right:-60%;z-index:20000;');
    };
   
    scrollNav();
    $(window).scroll(function() { scrollNav() });
});

but i don't want this entire function. I want the notifications to appear that way simply and i figured it could be done via js but i cannot just find out how..

Thanks for any help!

Regards,
Luffy.

Bump

Hey, do you think the default notifications would suffice ? By default, this is how the FA Toolbar notifications are created :

This is an example, so create a new script with placement in all the pages :

Code:

(function() {
  if (!FA.Notifiy) {
    FA.Notify = function(msg) {
   
      var notif = document.createElement('DIV'),
          live = document.getElementById(Toolbar.LIVE_NOTIF);
       
      notif.className = 'fa_notification';
      notif.innerHTML = '<div class="content ellipsis">' + msg + '</div>';
      notif.style.display = 'none';
   
      $(notif).mouseover(function() { $(this).stop(true, true) });
      $(notif).mouseleave(function() { $(this).delay(5000).fadeOut() });
   
      live.insertBefore(notif, live.firstChild);
      $(notif.firstChild).dotdotdot();
   
      $(notif).fadeIn(100, function() { $(this).delay(10000).fadeOut() });
    };
  }
}());

Once this is done, you should be able to create some custom notifications that will eventually fade out.

Code:

$(function() {
  FA.Notify('Hello world !');
});

( This snippet can also be placed in all pages as an example )

If any questions let me know.

I am not really sure how to do this.. xd
I want it to pop out as the one i showed above. To slowly appear from the right side of the forum to the left just hop in to the forum. And then leave the same way. If you visit the forum and scroll down you see the popup with the effect i am talking about.
The code you showed me isn't it the system of the notifications?
If i add that how can i control them afterwards to add the effect i want?

Sorry for the questions lol but i really want this.

Thanks for your time btw.

Yes, it's possible to modify. For what you want, you'll need to add some additional arguments. Use this script instead :

Placement : In all the pages

Code:

(function() {
  if (!FA.Notify) {
    FA.Notify = function(msg, sticky, classname) {
 
      var notif = document.createElement('DIV'),
          live = document.getElementById(Toolbar.LIVE_NOTIF);
     
      notif.className = 'fa_notification' + (classname ? ' ' + classname : '');
      notif.innerHTML = '<div class="content ellipsis">' + msg + '</div>';
      notif.style.display = 'none';
 
      live.insertBefore(notif, live.firstChild);
      $(notif.firstChild).dotdotdot();
     
      if (!sticky) {
        $(notif).mouseover(function() { $(this).stop(true, true) });
        $(notif).mouseleave(function() { $(this).delay(5000).fadeOut() });
        $(notif).fadeIn(100, function() { $(this).delay(10000).fadeOut() });
      } else {
        notif.style.display = 'block';
      }
    };
  }
}());

It'll add a global function to the

Code: FA

object, called

Code: Notify

. It can be invoked like this :

Code: FA.Notify(msg, sticky, classname);

msg : This is a string value which contains the content of the notification. e.g.

Code: 'Hello world !'

sticky : This takes a true or false value, setting it to true will remove the timeout functionality, meaning the notification will display on the screen without disappearing.

classname : This takes a string value which determines a unique classname for the notification. I figured you'd need this to give the effects you're looking for.

Using everything together will give you this :

Code:

$(function() {
  FA.Notify('Hello world !', true, 'static-notif');
});

Then you can use the custom class applied at the end to manipulate the style and position like this :

Code:

.static-notif {
  position:fixed;
  bottom:10px;
  right:10px;
}

This code also works as a fade effect and not the moving one i have on the image. How am i able to edit the element and change its effect from fading to rolling in as the image?

Edit: What i want is the notifications of the fa toolbar to appear the same way as the other box i use on my forum. With that specific effect. The code above shows the notifications with the fade effect. I was told that maybe an animate effect would work.

Thanks for your help anyways!

Hmm.. I see. Then perhaps a callback function would be better than using a custom class.

Replace the FA.Notify script with this one :

Code:

(function() {
  if (!FA.Notify) {
    FA.Notify = function(msg, callback) {
 
      var notif = document.createElement('DIV'),
          live = document.getElementById(Toolbar.LIVE_NOTIF);
   
      notif.className = 'fa_notification';
      notif.innerHTML = '<div class="content ellipsis">' + msg + '</div>';
      notif.style.display = 'none';
 
      live.insertBefore(notif, live.firstChild);
      $(notif.firstChild).dotdotdot();
   
      if (!callback) {
        $(notif).mouseover(function() { $(this).stop(true, true) });
        $(notif).mouseleave(function() { $(this).delay(5000).fadeOut() });
        $(notif).fadeIn(100, function() { $(this).delay(10000).fadeOut() });
      } else {
        callback(notif);
      }
    };
  }
}());

This will replace the sticky and classname arguments will a callback function instead.

Now try this example snippet :

Code:

$(function() {

  FA.Notify('Hello world !', function(notif) {
    $(notif).attr('style','position:fixed;bottom:40px;display:block;transition:600ms;right:2px;z-index:20000;');

    // delay
    window.setTimeout(function() {
      $(notif).attr('style','position:fixed;bottom:40px;transition:600ms;right:-60%;z-index:20000;');
    }, 10000);
  });

});

It should perform similar to your example since I took what you had in the first post. If you have any questions let me know.

This will work on the fa_toolbar notifications right? Because i don't want to create my own notifications but i want to edit the existing ones!

Oh, no that's for customized notifications.. by default I'm not sure if you'll be able to modify how the default notifications disappear. Regardless, I'll try to take a look to see if I can find a solution.

@Ange Tuteur yes i want this effect for the default ones.I don't want to change their system. I just want them to appear and disappear that way!

Thanks for your time!

If it is just the appearance you can try adding this css:

Code:

#fa_toolbar #fa_right #notif_list {
  position: fixed !important;
  left: auto !important;
  right: 0px !important;
  bottom: 40px !important;
  margin-right: -30% !important;
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  display: block !important;
}
#fa_toolbar #fa_right.notification #notif_list {
  margin-right: 0% !important;
}

@10spetter10 i am talking about the notification popup window. The one that appears once you get tagged or if someone connects.

@Luffy give this a try :

Code:

(function() {
  document.write('<style>#live_notif{overflow:hidden}.fa_notification{margin-left:330px}</style>');
 
  FA.Notif = {
    Check : function() {
      for (var a = $('.fa_notification'), i = 0, j = a.length; i < j; i++) {
        if (!/none/.test(a[i].style.display) && !/faUnbound/.test(a[i].className)) {
          a[i].className += ' faUnbound';
          $(a[i]).stop(true, true).off('mouseover mouseleave');

          $(a[i]).fadeIn(102, function() {
            $(this).mouseover(function() { $(this).stop(true, true) });
            $(this).mouseleave(function() {
              $(this).delay(5000).animate({
                marginLeft : '330px'
              }, 600);
            });

            $(this).attr('style', 'margin-left:330px;').animate({
              marginLeft : '0px'
            }, 600, function() {
              $(this).delay(10000).animate({
                marginLeft : '330px'
              }, 600);
            });
          });
        }
      }
    },

    Int : null
  };

  FA.Notif.Int = window.setInterval(FA.Notif.Check, 1000);
}());

Place it in all the pages of course.

It should unbind the default events and stop the queued animations. It might be a tad delayed, but let me know if it's what you want.

Well this didn't do anything @Ange Tuteur xd
I was waiting for a couple of minutes and nothing appeared. Only the number at the notification field on the toolbar. This made the notifications disappear.. xd.

Weird, it worked for me. Try replacing the script with this :

Code:

(function() {
  document.write('<style>#live_notif{overflow:hidden}.fa_notification{margin-left:330px;width:310px;}</style>');
 
  FA.Notif = {
    Check : function() {
      for (var a = $('.fa_notification'), i = 0, j = a.length; i < j; i++) {
        if (!/none/.test(a[i].style.display) && !/faUnbound/.test(a[i].className)) {
          a[i].className += ' faUnbound';
          $(a[i]).stop(true, true).off('mouseover mouseleave');
 
          $(a[i]).fadeIn(102, function() {
            $(this).mouseover(function() { $(this).stop(true, true) });
            $(this).mouseleave(function() {
              $(this).delay(5000).animate({
                marginLeft : '330px'
              }, 600);
            });
 
            $(this).attr('style', 'margin-left:330px;').animate({
              marginLeft : '0px'
            }, 600, function() {
              $(this).delay(10000).animate({
                marginLeft : '330px'
              }, 600);
            });
          });
        }
      }
    },
 
    Int : null
  };
 
  FA.Notif.Int = window.setInterval(FA.Notif.Check, 1000);
}());

Then try sending yourself a private message in a different tab, and switch back to a tab that's idle on the forum. Make sure to refresh the idle tab after installing the script before trying that.

@Ange Tuteur i did these steps before also! Now i am sending me a pm from an other user on an other browser but still it just shows me that i have a new notification. You can try it yourself and check this if you want! I'll send you the information via pm.

I found the problem. The live_notif container was being hidden off screen.

In short, I changed this :

Code:

#live_notif {
    position: fixed!important;
    bottom: 30px!important;
    transition: 0.8s;
    right: -330px!important;
}

to this :

Code:

#live_notif {
    position: fixed!important;
    bottom: 30px!important;
    transition: 0.8s;
    right: 2px!important;
}

It should work now, let me know.

@Ange Tuteur yes this works perfectly!

Thank you so so much for your huge help!

You may add this to archives as it is now solved!

Yayy!

You're welcome.

Topic archived

If there are any problems with it you can let me know.