Latest topics
» [HELP] About Profile Cover Code
by omarpop23 Yesterday at 06:39

» bloquer un membre
by berlingo Fri 17 Nov 2017, 18:19

» IconSkouliki Graphics
by skouliki Fri 17 Nov 2017, 03:54

» [IN PROGRESS] Can this code work on pun version
by skouliki Thu 16 Nov 2017, 03:50

» Auto-suggest @mentions as You Type
by skouliki Wed 15 Nov 2017, 14:56

» [TUTORIAL] [ALL VERSIONS] Warning before posting
by demon99 Wed 15 Nov 2017, 08:12

» About Add Reply & New Topic button (popup form)
by omarpop23 Mon 13 Nov 2017, 20:31

» Hello everyone this is Adam from France
by Adam Mon 13 Nov 2017, 13:32

» Add a login popup for the toolbar
by Ape Sun 12 Nov 2017, 18:41

» Post a message automatically when locking a topic
by ThunderTB Sun 12 Nov 2017, 13:51

» Control pannel issue
by Ange Tuteur Sun 12 Nov 2017, 09:49

» BUG... forum members birthday's
by Ape Sat 11 Nov 2017, 11:44

» Display a Preview of Groups on Hover
by ThunderTB Fri 10 Nov 2017, 21:56

» Search box only visible on hover
by Ange Tuteur Mon 06 Nov 2017, 09:57

» [GAME] Animal Game
by SLGray Sun 05 Nov 2017, 15:04

Recent Tutorials
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Popup chatbox for your forumotion toolbar

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 14 Jan 2015, 18:03

Hi everyone !

This was a project I was working on a few months back, but eventually ran out of ideas and put it aside. It's for appending a chatbox to the toolbar, so you can access the chat anywhere... from your toolbar ! I codenamed it "fa_chat" since the toolbar is the "fa_toolbar", by the way, fa = forumactif in case you're wondering.


This was developed on phpbb3, but it should work on every version. Wink


Features

It has a few features, nothing too extensive. I'll go over some of them below.

  • Shows the total members in the chat

    The features below are optional
  • Ability to change the mod icon. e.g. @
  • The button will light up when new messages are written, while you have the chat closed.
  • You can remove the timestamps.
  • You can hide the message logs. e.g. User A log in, User A logged out

You also have the choice of changing the size of the chatbox, using pixels or percent.


Installation

To install fa_chat, make sure you have the fa_toolbar enabled. Go to Administration Panel > Modules > Toolbar > Configuration. Tick "Yes" for "Activate the toolbar" and save.

Next go to Administration Panel > Modules > JavaScript codes management. Make sure JavaScript code management is enabled, and create a new script.

Title : You can place anything, or just write "fa_chat" if you can't think of anything Razz
Placement : In all the pages
Paste the following code :
Code:
$(function(){$(function(){
  var config = {
    width : '700px',
    height : '350px',
    mod_icon : 'default',
    msgnotif : true,
    timestamp : true,
    connection_logs : true
  },
  fa_chat = cre('IFRAME'), fa_button = cre('A'), fa_members = cre('SPAN'), fa_style = cre('STYLE'), fa_right = getId('fa_right'), frame,
      css = '#fa_chat_button{line-height:30px;padding:0 5px;color:#FFF;cursor:pointer;} .fa_actif{background:#FFF !important;color:#000 !important;} .fa_new{background:#FF8 !important;color:#000 !important;} #fa_chat{background:#FFF;width:'+config.width+';height:'+config.height+';border:1px solid #000;border-top:none;position:absolute;top:30px;right:39px;}';

  if (!fa_right || !_userdata.session_logged_in) return;
 
  // set stylesheet
  fa_style.type = 'text/css';
  if (fa_style.styleSheet) fa_style.styleSheet.cssText = css;
  else fa_style.appendChild(document.createTextNode(css));
  document.getElementsByTagName('HEAD')[0].appendChild(fa_style);
 
  // members attributes
  fa_members.id = 'fa_members';
  fa_members.innerHTML = '(0)';
 
  // fa_button attributes
  fa_button.innerHTML = 'Chat ';
  fa_button.id = 'fa_chat_button';
  fa_button.className = 'rightHeaderLink';
  fa_button.appendChild(fa_members);
  fa_right.insertBefore(fa_button,fa_right.lastChild);
 
  // fa_chat attributes
  fa_chat.id = 'fa_chat';
  fa_chat.src = '/chatbox/index.forum';
  fa_chat.style.display = 'none';
  fa_right.insertBefore(fa_chat,fa_right.lastChild);
 
  fa_chat.onload = function() {
    if (fa_chat.contentDocument) frame = fa_chat.contentDocument;
    else if (fa_chat.contentWindow) frame = fa_chat.contentWindow.document;
    var memb_thn = getLength('chatbox_members','LI'), memb_now = memb_thn,
        msg_thn = getLength('chatbox','P'), msg_now = msg_thn;
   
    // set some data..
    fa_members.innerHTML = '('+memb_thn+')';
   
    // kill the interval if archives are enabled
    var a = frame.getElementsByTagName('A');
    for (i=0; i<a.length; i++) if (/archives/.test(a[i].href)) a[i].onclick = function() { window.clearInterval(fa_chat_refresh) };
   
    // execute code in an interval
    fa_chat_refresh = window.setInterval(function() {
      // START chat members
       memb_now = getLength('chatbox_members','LI'), msg_now = getLength('chatbox','P');
      if (memb_now > memb_thn || memb_now < memb_thn) {
        memb_thn = memb_now;
        fa_members.innerHTML = '('+memb_now+')'
      }
      // END chat members
     
      // START chat notification
      if (config.msgnotif) {
        if (msg_now > msg_thn || msg_now < msg_thn) {
          if (!/fa_new/.test(fa_button.className) && chatState(/none/) && !/none/.test(frame.getElementById('chatbox_option_autorefresh').style.display)) fa_button.className += ' fa_new';
          msg_thn = msg_now;
        }
      }
      // END chat notification
     
      // START timestamp
      if (!config.timestamp) {
        var date = frame.getElementsByTagName('SPAN'),i;
        for (i=0; i<date.length; i++) if (/date-and-time/.test(date[i].className) && date[i].style.display != 'none') date[i].style.display = 'none';
      }
      // END timestamp
     
      // START connection logs
      if (!config.connection_logs) {
        var logs = frame.getElementsByTagName('SPAN'),i;
        for (i=0; i<logs.length; i++) if (/red/i.test(logs[i].style.color) || /green/i.test(logs[i].style.color)) if (!/none/.test(logs[i].parentNode.parentNode.style.display)) logs[i].parentNode.parentNode.style.display = 'none';
      }
      // END connection logs
     
      // START mod icon
      if (config.mod_icon.toLowerCase() != 'default') {
        var s = frame.getElementsByTagName('STRONG'),i;
        for (i=0; i<s.length; i++) if (/@/.test(s[i].innerHTML) && s[i].innerHTML.length === 1 && !/msg/.test(s[i].parentNode.parentNode.className)) s[i].innerHTML = config.mod_icon;
      }
      // END mod icon
    },1);
  };

  // toggle chat display
  fa_button.onclick = function() {
    if (/welcome/.test(fa_right.className)) removeClass(fa_right, /welcome/);
    if (/notification/.test(fa_right.className)) removeClass(fa_right, /notification/);
    if (chatState(/none/)) {
      fa_chat.style.display = 'block';
      fa_button.className += ' fa_actif';
      if (/fa_new/.test(fa_button.className)) removeClass(fa_button, /fa_new/);
      frame.getElementById('chatbox').scrollTop = 99999;
    } else hideChat();
  };
 
  // hide chat when toolbar options clicked
  getId('fa_welcome').onclick = function() { hideChat() };
  getId('fa_notifications').onclick = function() { hideChat() };
  getId('fa_hide').onclick = function() { hideChat() };
 
  // chatbox functions
  function hideChat() { if (chatState(/block/)) fa_chat.style.display = 'none'; removeClass(fa_button, /fa_actif/) };
  function chatState(reg) { return reg.test(fa_chat.style.display) };
  function getLength(id, tag) { return frame.getElementById(id).getElementsByTagName(tag).length };
 
  // basic functions
  function getId(id) { return document.getElementById(id) };
  function cre(el) { return document.createElement(el) };
  function removeClass(el, reg) { el.className = el.className.replace(reg,''); };
})});


Modifications

At the top of the script you will see a few settings. So you know what they do, I advise you to read the following.

Some options are boolean which means you can use 1, 0, true, false to enabled and disable them. Just for reference :
1, true = enabled
0, false = disabled


width : Change the width of the chatbox. You can use px, percent, etc..

height : Change the height of the chatbox. Again, you can use px, percent, etc..

mod_icon : This option allows you to change the mod icon. Write "default" to use the regular @ icon. Otherwise you can write whatever you want.


The options below can be enabled or disabled with true or false

msgnotif : Allows you to toggle the message notification. i.e.. when the button turns yellow on a new message. Enabled by default

timestamp : Allows you to toggle the display of timestamps. Enabled by default

connection_logs : Allows you to toggle the display of connection logs. ( e.g. User A has logged in ) Enabled by default



That is everything ! If you have any questions or comments, feel free to leave them below.

Have a great day, and enjoy. Smile


Notice
Tutorial written by Ange Tuteur.
Reproduction not permitted without consent from the author.


Last edited by Ange Tuteur on Tue 15 Mar 2016, 06:22; edited 3 times in total
avatar
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 1147
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile https://fishcrazyaquatics.4umotion.com/ https://www.facebook.com/pages/Fish-Crazy-Aquatics/4726729494127

PostFISH CRAZY on Wed 14 Jan 2015, 22:47

Install your new chat box on the toolbar nice work thanks
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 14 Jan 2015, 23:03

Thanks, you're welcome. ^^

If there's any problems, you can let me know. Wink
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1907
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Thu 15 Jan 2015, 07:41

whoa now THAT is what I call out of the box thinking Very Happy
I will think of using that when I apply the toolbar on my forum Razz
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 15 Jan 2015, 08:36

Thanks, it fits pretty well with the rest of the toolbar options. Sorta what I was going for, and the features I added work nice too. I ran outta ideas, and eventually forgot about it until today. No use keeping something in my dusty documents when some people can use it, and give me ideas down the road. I should dig more, maybe I forgot about something else lol!
avatar
brandon_g

Title :
Gender : Unspecified
Age : 20
Posts : 447
Points : 1691
Reputation : 63
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Thu 15 Jan 2015, 21:53

Dang Ange you release this 3 days after I make the official switch to AWC. Crying or Very sad Neutral study
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 15 Jan 2015, 22:09

@brandon_g wrote:Dang Ange you release this 3 days after I make the official switch to AWC. Crying or Very sad Neutral study
Whoopsie ! Razz

Don't worry, It depends on which one you prefer. I used AWC a long time back and thought it was neat. Nowadays I like making my own stuff and sharing it with people. Smile
avatar
brandon_g

Title :
Gender : Unspecified
Age : 20
Posts : 447
Points : 1691
Reputation : 63
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Thu 15 Jan 2015, 22:24

I really only switched as a solution to the disable the timeout feature. I feel fm will never fix this. They really could check the suggestions section a little more....

Anyway, do you think you can add disable the timeout feature to your toolbar?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 15 Jan 2015, 22:51

I haven't thought about that, but I'll probably wait for the moment, because they still have to work on the chatbox.
avatar
brandon_g

Title :
Gender : Unspecified
Age : 20
Posts : 447
Points : 1691
Reputation : 63
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Thu 15 Jan 2015, 23:06

Work on the chatbox? Who fm? That would be a nice miracle... Very Happy
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 15 Jan 2015, 23:22

Yes, unfortunately they are busy with a lot of other things at the moment. Sad If not soon, then maybe in the future.
avatar
brandon_g

Title :
Gender : Unspecified
Age : 20
Posts : 447
Points : 1691
Reputation : 63
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Thu 15 Jan 2015, 23:43

You mean they are considering that suggestion you think?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 16 Jan 2015, 05:04

I can't say, but I know that the chatbox most likely has a lower priority than the other problems on their list. Only the future will tell, for now, we just have to be patient. Smile
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1907
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Fri 16 Jan 2015, 08:36

Hey Ange, can you perhaps add a "resizing" feature in this one? I think it'll be really cool if you do so...
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 16 Jan 2015, 15:33

@Rhino.Freak wrote:Hey Ange, can you perhaps add a "resizing" feature in this one? I think it'll be really cool if you do so...
Thanks for the idea ! Smile

I've never tried that before, so I'll have to give it a try. I'm thinking something with the mousedown event and math based on the cursor movement. I should probably save it to a cookie too. bounce
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1743
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Wed 04 Feb 2015, 14:50

great project i liked so much
one thing i like to ask
can i change the word (chat) to any other word or it is works as the forum language ?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 04 Feb 2015, 19:24

@Michael_vx wrote:great project i liked so much
one thing i like to ask
can i change the word (chat) to any other word or it is works as the forum language ?
Find this :
Code:
fa_button.innerHTML = 'Chat ';

And replace Chat with whatever you want. Wink
avatar
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 42
Posts : 65
Points : 1337
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Thu 21 May 2015, 11:03

ange see this:



why?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 22 May 2015, 14:04

This was released before the chatbox update, so I'm assuming one of the nodes that was used for manipulation is no longer available. In short, the script is currently incompatible with the current chatbox version.
avatar
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 42
Posts : 65
Points : 1337
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Fri 22 May 2015, 14:22

Ange, this code works ok with new FM chat, only this var not work

Code:
msgnotif : true

the error console stop in "false"

sorry my english is poor
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 15 Sep 2015, 19:53

I'll have you guys know that this plugin isn't stable anymore, or at least some options are not fully compatible with the new chatbox. As such, I wouldn't recommend using it unless you're desperate to try this out. Razz

However, fear not.. I am working on something better to extend upon the default chat. Zen



Still the same, with some improvements. No more notification blocking and useless options. Cool

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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