Add "Balloon" Animation to UI when it's his/her birthday (similar to twitter)

I know that this feature in twitter is not new, but what if we had this, not just here in the support forum but also in other forums as well? See the news >>> http://www.theverge.com/2015/7/6/8903445/twitter-birthday-ads-relevant-content-marketing

For those who are not familiar with how this works, see the video >>> https://www.youtube.com/watch?v=Y-2FZ87sCjk

So, what are your thoughts?

I have read a suggestion here about custom birthday rank given to members celebrating their birthday. This would have been abused if implemented since they can just change their birthdays to have the ranks forever in their possession. But let's give it a shot.

This would be a good idea. It would be even better than just having an announcement above the chatbox/forum when it's someone's birthday. Makes it seem a little more birthday like.

@Lashton yes! That's what I'm talking about. But I do hope it wouldn't be abused by members, or simply create a feature about that which will prevent users from abusing it (maybe restricting members to edit their birthday once they have inputted it in their profiles?

Yeah that would be a good idea too. It should just be an annual thing anyway so whenever it's your birthday you see the balloons.

There is a side affect which is ads. 

it will help the social network work out which ads it thinks you want to see.

Let's just minus the ads thing. Just the balloon feature itself.

I voted yes!

Hello, that's possible with JavaScript. My partner JoEl-jr wrote a script to do that some time ago.

Code:

// ZONA EDITABLE
const FIELD_ID = 12;
const IMAGE_URL = 'https://i.servimg.com/u/f68/19/52/92/39/evykem10.png';
// FIN ZONA EDITABLE

document.addEventListener('DOMContentLoaded', function () {
  var urlId = window.location.href.replace(/^.*\/\/[^\/]+/, '').substring(0, 2);
  if (urlId === '/u') {
      var birthday = document.querySelector('#field_id-' + FIELD_ID + ' .field_uneditable').innerHTML.split('/');
      var date = new Date();
      if (parseInt(birthday[0]) === date.getDate() && parseInt(birthday[1]) === (date.getMonth() + 1)) {
        var script1 = document.createElement('script');
        var script2 = document.createElement('script');
        var fScript = document.getElementsByTagName('script')[0];
        script1.text = 'var snowsrc="' + IMAGE_URL + '";';
        script2.src = 'https://script.forumactif.com/10825.js';
        fScript.parentNode.insertBefore(script1, fScript);
        fScript.parentNode.insertBefore(script2, fScript);
      }
  }
});

You only need to modify 2 variables.

• field_id: For the exact ID of the field that contains the birthday date.



• Image url: For the url of the balloons that will appear when is the user birthday.

Hope it helps ^^