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.

Notification popup

View previous topic View next topic Go down

Solved Notification popup

Post by Luffy on January 9th 2016, 1:26 am

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! Smile

Regards,
Luffy.

Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by Luffy on January 10th 2016, 10:55 pm

Bump






Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by Ange Tuteur on January 11th 2016, 8:34 pm

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. salut

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Notification popup

Post by Luffy on January 12th 2016, 12:21 am

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.






Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by Ange Tuteur on January 12th 2016, 7:04 pm

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;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Notification popup

Post by Luffy on January 12th 2016, 8:25 pm

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? scratch

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! Smile






Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by Ange Tuteur on January 13th 2016, 6:58 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Notification popup

Post by Luffy on January 13th 2016, 7:00 pm

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!






Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by Ange Tuteur on January 13th 2016, 7:19 pm

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. Think

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Notification popup

Post by Luffy on January 13th 2016, 7:20 pm

@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! Smile






Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by 10spetter10 on January 13th 2016, 7:39 pm

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
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: Notification popup

Post by Luffy on January 13th 2016, 8:01 pm

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






Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by Ange Tuteur on January 13th 2016, 10:07 pm

@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. Wink

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Notification popup

Post by Luffy on January 14th 2016, 9:37 am

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.






Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by Ange Tuteur on January 14th 2016, 6:24 pm

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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Notification popup

Post by Luffy on January 14th 2016, 6:29 pm

@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.






Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by Ange Tuteur on January 14th 2016, 6:57 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. Think

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Notification popup

Post by Luffy on January 14th 2016, 7:01 pm

@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! Smile

Yayy!






Luffy
Manager
Manager

Male Posts : 4236
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Notification popup

Post by Ange Tuteur on January 14th 2016, 7:03 pm

You're welcome. Wink

Topic archived

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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