Step-By-Step Extra Emoticons Popup Addon

[Stephen Gemme]

This will show you how to add a small box next to your BB codes that allows a popup box for storing more emoticons. I am doing this on a standalone version but it should work on all versions. 

Update: I have integrated this onto my PHPbb3 server and it is also working with no problems.

Easy steps first: Put the emoticons in the correct folder for your chat to recognize (/img/emoticons), and make sure that config.js array's have been configured correctly with proper names and whatnot. 

While you're in config.js, you're going to have to create another array which tells the chat where the images are placed. Your options are display under the text area, display in the popup, or display both. But first, we have to make sure we have the container declared for the emoticons to be placed in.

In Config.js.

Find:

// The ID of the emoticons container:
 emoticonsContainer: 'emoticonsContainer',

Add After:

// The ID of the emoticons container:
        emoticonsContainerPopUp: 'emoticonsContainerPopUp',

Find:

emoticonFiles: new Array(
'Example1.png',
'Example2.jpg',
'Example3.gif'
),

Add After:

// Defines whether the associated emoticon will display (3 will only display outside popup, 2 will always display, 1 will display in the pop up, 0 is hidden):
emoticonDisplay: new Array(
 1,
 2,
 3
),

Now we have to declare the array and allow the CSS to get data from it.

Open chat,js

Find:

this.emoticonFiles                      = config['emoticonFiles'];

Add After:

this.emoticonDisplay            = config['emoticonDisplay'];

Find:

initEmoticons: function() {
  this.DOMbuffer = "";

Add After:

var emoticonDisplayPopUpCount=0;

Find:

 this.emoticonCodes[i] = this.encodeSpecialChars(this.emoticonCodes[i]);

Add After:

if(this.emoticonDisplay[i] == 2 || this.emoticonDisplay[i] == 3){
            if(this.dom['emoticonsContainer']) {
                    this.updateDOM(
                        'emoticonsContainer',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                        + '"/></a>'
                    );
            }
 }
 if((this.emoticonDisplay[i] == 1 || this.emoticonDisplay[i] == 2) && (this.emoticonDisplay[i] != 3)){
            emoticonDisplayPopUpCount++;
            if(this.dom['emoticonsContainerPopUp']) {
                    this.updateDOM(
                        'emoticonsContainerPopUp',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                       
                         + '" height="'
                        + 25
                        + '" width="'
                        + 25
                       
                        + '" style="padding: 10px"/></a>'
                    );
            }
        }

^^ What you can see being done here is that it's determining from the array that we set up, where the emoticons should be placed. Either in the container we're going to create, or the page, or nowhere. You can change the display size of the emotes from within here as well. 

Find and Remove:

this.DOMbuffer = this.DOMbuffer
 + '<a href="javascript:ajaxChat.insertText(\''
 + this.scriptLinkEncode(this.emoticonCodes[i])
 + '\');"><img src="'
 + this.dirs['emoticons']
 + this.emoticonFiles[i]
 + '" alt="'
 + this.emoticonCodes[i]
 + '" title="'
 + this.emoticonCodes[i]
 + '"/></a>';
}
if(this.dom['emoticonsContainer']) {
  this.updateDOM('emoticonsContainer', this.DOMbuffer);
 }
 this.DOMbuffer = "";

^^ This code is not needed as the code we entered in the step prior to this has already added the emoticons to their respectable places and therefore does not need to be called.

Now that everything is declared, we need a place to put all of it, and a button to activate the box we put the emoticons in. 

Open Global.css

Find:

#content #colorCodesContainer {
  position:absolute;
 left:20px;
  bottom:55px;
 padding:3px;
  z-index:1;
}

Add After:

#content #emoticonsContainerPopUp {
  position:absolute;
 left:450px;
 bottom:125px;
 padding:3px;
 z-index:1;
}

Find:

#content #colorCodesContainer a {
  display:block;
 float:left;
 width:20px;
 height:20px;
}

Add After:

#content #emoticonsContainerPopUp a {
  display:block;
 float:left;
  width:60px;
 height:30px;
}

That creates the box for which we'll be adding the emoticons to in Chat.js. Now let's make that button!

Open LoggedIn.html

Find:

<div id="bbCodeContainer">

Add *At the last spot in before the </div>*:

<input type="button" value="More Smilies" onclick="ajaxChat.showHide('emoticonsContainerPopUp', null);" />

Find:

<div id="colorCodesContainer" style="display:none;" dir="ltr"></div>

Add After:

<div id="emoticonsContainerPopUp" style="display:none;" dir="ltr"></div>

Update - 2nd box Added!

I've just finished up a request to make an extra box with my container so that people with many emotes can separate them into two popup boxes. The steps are identical as the original post. 

Add your container to global.css, name it what you'd like (I called mine emoticonsContainerPopUp2)

#content #emoticonsContainerPopUp2 {
    position:absolute;
    left:450px;
    bottom:125px;
    padding:3px;
    z-index:1;
}

and

#content #emoticonsContainerPopUp2 a {
    display:block;
    float:left;
    width:60px;
    height:30px;
}

Add the container to config.js so the HTML knows where to find it. 

// The ID of the emoticons container:
        emoticonsContainerPopUp2: 'emoticonsContainerPopUp2',

Add the Div for the button, and the div for the actual container to LoggedIn.HTML

(goes INSIDE id="bbCodeContainer")

<input type="button" value="Images/gifs" onclick="ajaxChat.showHide('emoticonsContainerPopUp2', null);" />

(goes OUTSIDE id="bbCodeContainer")

<div id="emoticonsContainerPopUp2" style="display:none;" dir="ltr"></div>

My "initEmoticons" function now looks like this:

initEmoticons: function() {
 this.DOMbuffer = "";
        for(var i=0; i<this.emoticonCodes.length; i++) {
            // Replace specials characters in emoticon codes:
            this.emoticonCodes[i] = this.encodeSpecialChars(this.emoticonCodes[i]);
            if(this.emoticonDisplay[i] == 2 || this.emoticonDisplay[i] == 3){
            if(this.dom['emoticonsContainer']) {
                    this.updateDOM(
                        'emoticonsContainer',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                        + '"/></a>'
                    );
            }
            }
            if((this.emoticonDisplay[i] == 1 || this.emoticonDisplay[i] == 2) && (this.emoticonDisplay[i] != 3)){
            if(this.dom['emoticonsContainerPopUp']) {
                    this.updateDOM(
                        'emoticonsContainerPopUp',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                        
                         + '" height="'
                        + 25
                        + '" width="'
                        + 25
                        
                        + '" style="padding: 10px"/></a>'
                    );
            }
        }
        if((this.emoticonDisplay[i] == 4)){
            if(this.dom['emoticonsContainerPopUp2']) {
                    this.updateDOM(
                        'emoticonsContainerPopUp2',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                        
                         + '" height="'
                        + 25
                        + '" width="'
                        + 25
                        
                        + '" style="padding: 10px"/></a>'
                    );
        
        }
        }
        
        }
    },

Then assign whichever emoticons you'd like in the 2nd box with the correct value (I used 4) in your config.js file and you're good to go. 

Happy Coding!

[Fabian Wilson]

See this old email from Stephen I think he figured it out.

---------- Forwarded message ----------
From: Stephen Gemme <r3d4u...@gmail.com>
Date: Wed, Oct 23, 2013 at 8:45 AM
Subject: [ajax-chat:937] Step-By-Step Extra Emoticons Popup Addon
To: ajax...@googlegroups.com

This will show you how to add a small ox next to your BB codes that allows a popup box for storing more emoticons. I am doing this on a standalone version but it should work on all versions. 

Easy steps first: Put the emoticons in the correct folder for your chat to recognize (/img/emoticons), and make sure that config.js array's have been configured correctly with proper names and whatnot. 

While you're in config.js, you're going to have to create another array which tells the chat where the images are placed. Your options are display under the text area, display in the popup, or display both. But first, we have to make sure we have the container declared for the emoticons to be placed in.

In Config.js.

Find:

// The ID of the emoticons container:
 emoticonsContainer: 'emoticonsContainer',

Add After:

// The ID of the emoticons container:
        emoticonsContainerPopUp: 'emoticonsContainerPopUp',

Find:

emoticonFiles: new Array(
'Example1.png',
'Example2.jpg',
'Example3.gif'

);

--
You received this message because you are subscribed to the Google Groups "AJAX-chat" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ajax-chat+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Cecil Bergwin]

Thanks gents, this looks exactly what I asked for, my previous chat room mods were very similar and hoping in what you have provided here is perfect. I'll be sure to get back to you once done or with any issues which I greatly appreciate your input.

Kind Regards
Cecil B

[Ran zid]

Hi everyone , this was also exactly what I was looking for , but not to sound to stupid .. how do you select which emoticons to display? ive gone through the step by step and it works flawlessly but it only currently shows happy face and sad face .. nothing else :/ do I need to declare a whole new batch of emoticons? or will it take it all from the existing bunch? 

thanks for any help 

[Stephen Gemme]

IInside config.js is an array that you have to create (emoticonsDisplay). For each new emoticon, you have to add an entry into this (just like how the phrases are connected to the file names).

1 means they only show up in the container, 3 means they only show up under the about box, 2 means they show up in both places.

[Cecil Bergwin]

Hello folks,

I seem to have a little problem with "count" of smileys, currently as standard you have 23 standard smilies, now I can 1,2,3 where appropriate and get these to display in my external window all fine.

However... when I add my own i.e 24 smilies. A, it appears in the list with the others regardless of option 1,2,3 - B, when I select 3 as an option it appears both at the start before smilie 1 and also at the end on the main list ? which is slightly confusing to say the least... On choosing 2 or 3 it appears both ends 0 makes it appear only on the standard bar but I don't want it to display at all on the bar only in my custom window.

I intend to used the standard 24 on the bar as per standard (no mods) and then my custom smilies... not to appear on the bar but "only" in my custom external window which is working fine apart from when I add more ?

Any help on this appreciated, as my custom smilies are larger than standard and really want the normal 23 and my own on window execution and visual.

Cheers again... up for a few hours working so will keep my eyes on this thread in the hopes of a reply before I sleep (big ask i know) but many thanks.

[Stephen Gemme]

Are you clearing your cache in between tests, and have you followed my above instructions correctly? The arrays are added to the containers in order from X=0 to X=Length - so adding more to the array shouldn't alter how it functions at all. 

Are you sure that you're updating all 3 arrays with the correct number of elements and they're associated with the correct files? What happens if you remove the first couple elements and then add yours, so the number in the arrays is the same but the elements have changed? 

Sorry, just trying to see what could be going on.

[Cecil Bergwin]

Hey Stephen, Much appreciate the quick response.

Yes buddy. Cache cleared every time (fell through that loop many times hehe)

Removed all but 4 standard smilies, added a 5th of my own, all 3 arrays edited correctly to my knowledge as when 1 is wrong nothing appears which I found out the other night.

Option 2 or 3 gives the 5th smilie (custom) at both front/rear i.e position 1 and 5
Option 1 makes it appear in the external window correctly (would like it not be shown inline with the standard list though if you know what I mean)

I tried adding or removing an array in case i was 1 behind or in front but as I mention above nothing appears so I'm pretty confident I'm editing arrays properly.

Thanks again buddy... all eyes peeled

[Cecil Bergwin]

//    1 will display in the pop up

I'm guessing that this option should "only" appear in external window yes ? what I'm after, just thought I'd check in case this is a secondary issue I may have to remove of standard bar.

[Stephen Gemme]

Right, so 1 will yield the smilies ONLY in the popup menu. 2 should ONLY display outside the window, and 3 will do both. 

I feel as though your if-else statements may be the root of the issue. If 2 AND 3 yield the same result, then they aren't being processed correctly in the if-else clause in chat.js. 

I just noticed that my code above may look a little odd because of how it interpreted the tabs, but it is correctly analyzing the arrays. If the emoticonDisplay for the smilie is a 2 or a 3, we will add it to the emoticons container in the order in which the files are added to the array. In all but case: 3, we will ALSO be adding the smilies to the emoticonsContainerPopup. We need no more cases because case 3 is satisfied in the first if-else. 

From the sounds of it, option 3 is being called more than it needs to be from your if-else statements. Could you please post your if-else statements from chat.js for me? Perhaps it's a silly mistake that you're over looking - I've done it enough times in the past to know that sometimes you just need another set of eyes. 

I've edited the original post slightly to be more easily readable in that section.

[Ran zid]

ok maybe im just being stupid here ... so this bit of code:

// Defines whether the associated emoticon will display (3 will only display outside popup, 2 will always display, 1 will display in the pop up, 0 is hidden):
emoticonDisplay: new Array(
 1,
 2,
 3

),

this is where im putting say smile.gif?  if im creating a new arrey called emoticonsdisplay wouldnt I need to declare the filename and location and then another for the phrazes?  

I realise im being very n00bish with all this but could someone provide some example code as im still very lost with this

 

[Stephen Gemme]

No. This entire array is ONLY filled with "1" "2" or "3" - Each entry corresponds with the same value entry of the other arrays. 

// Defines the list of allowed emoticon codes:

emoticonCodes: new Array(

':popcorn:',

':runs:',

':cry:',

':P',

':love:',

  ),

  // Defines the list of emoticon files associated with the emoticon codes:

emoticonFiles: new Array(

'popcorn.gif',

'runs.gif',

'cry.png',

'stroke.png',

'love.png',

),

// Defines whether the associated emoticon will display (3 will only display outside popup, 2 will always display, 1 will display in the pop up, 0 is hidden):

    emoticonDisplay: new Array(

    3,

    3,

    1,

    2,

    1

),

Each entry into the EmoticonCodes array MUST correspond to the same value in BOTH the emoticonFiles and emoticonDisplay arrays. 

So what the above code is saying is:

:popcorn: is the keyword, and when that is entered into chat "popcorn.gif" will be used because it's at the same position in the emoticonFiles array as :popcorn: is in it's own array. 

emoticonDisplay will set the value of 3 to :popcorn: and popcorn.gif because it, too, is in the same position in the array. 

Get what I'm saying?

[Ran zid]

aha! got it now thank you for your patience, I was thinking id need to create new arrays for the emoticons rather than pulling them in from the existing lot

I didnt get that in your array telling the emoticons where to be that you would add the choice 1 2 or 3  in the same order as the emoticons.

anyway finally got it fixed just need to make them a bit smaller now which is nicely in the css , thank you again for your outstanding work this looks awesome :)

[Stephen Gemme]

Glad I could help and I'm glad it looks good. Happy coding. :D

[Ran zid]

just as im a cheeky bugger , I thought id update as im thinking if other special people like me come into the same problems then it will be ok as I will have shamed myself for their benifit.

anyway, ive changed the sizes of the emoticons that display in the popup but they are still spaced very far apart , and I cant seem to find any option to put them closer together, is this possible?

[Stephen Gemme]

You can change the sizing of the emoticons in the chat.JS file as well. My code currently looks like this:

            if((this.emoticonDisplay[i] == 1 || this.emoticonDisplay[i] == 2) && (this.emoticonDisplay[i] != 3)){

            emoticonDisplayPopUpCount++;

            if(this.dom['emoticonsContainerPopUp']) {

                    this.updateDOM(

                        'emoticonsContainerPopUp',

                        '<a href="javascript:ajaxChat.insertText(\''

                        + this.scriptLinkEncode(this.emoticonCodes[i])

                        + '\');"><img src="'

                        + this.dirs['emoticons']

                        + this.emoticonFiles[i]

                        + '" alt="'

                        + this.emoticonCodes[i]

                        + '" title="'

                        + this.emoticonCodes[i]

                        

                         + '" height="'

                        + 25

                        + '" width="'

                        + 25

                        

                        + '" style="padding: 10px"/></a>'

                    );

And (a section of) my popup looks like this:

Please note: the background on mine is transparent, and that screenshot was taken with the shoutbox and chatlist showing - so please disregard the random lines.

[Ran zid]

hi so , ive changed the 25x25 part to a smaller 16x16 in line with the rest of my emoticons but I dont have the "box" you seem to have

it currently looks like :

ive only used the  current emoticon set as i haven't uploaded the new ones yet, so what have I done wrong?

[Cecil Bergwin]

Hello again,

Only just got chance to test again.....Just went back to square 1 and still similar results and now baffling lol reading back through to no avail at current. Still same issues (did i mentioned I'm using via drupal integration) would that matter.

Please find attached image and my chat & config at this address http://perf.bpmstudios.com/2014/


Here is my config.js parts

    // Defines the list of allowed emoticon codes:
    emoticonCodes: new Array(

        ':)',
        ':(',
        ':favorite:',
        ':help:'

     ),
   
     // Defines the list of emoticon files associated with the emoticon codes:
    emoticonFiles: new Array(

        'smile.png',
        'sad.png',
        'favorite.png',
        'help.png'
    ),

        // Defines whether the associated emoticon will display (3 will only display outside popup, 2 will always display, 1 will display in the pop up, 0 is hidden):
    emoticonDisplay: new Array(
     1,

     1,
     1,
     2
    ),

Anything look wrong here ? as exact same results as the other night on double up. Plus these extra smilies I only want in the popup and not in normal container.

Sry for hassle and much appreciate your input Stephen.

Thanks

[Cecil Bergwin]

Still been testing with same results :( will await your feedback on my js files - thanks again

[Stephen Gemme]

In your chat.js file, you have one too many closing } 

initEmoticons: function {

That function is being closed just after the first if block and the code is never getting to the rest of the comparisons :)

[Stephen Gemme]

On second thought, the indenting may have thrown me off.....

Here's mine:

initEmoticons: function() {

this.DOMbuffer = "";

  var emoticonDisplayPopUpCount=0;

        for(var i=0; i<this.emoticonCodes.length; i++) {

            // Replace specials characters in emoticon codes:

            this.emoticonCodes[i] = this.encodeSpecialChars(this.emoticonCodes[i]);

            if(this.emoticonDisplay[i] == 2 || this.emoticonDisplay[i] == 3){

            if(this.dom['emoticonsContainer']) {

                    this.updateDOM(

                        'emoticonsContainer',

                        '<a href="javascript:ajaxChat.insertText(\''

                        + this.scriptLinkEncode(this.emoticonCodes[i])

                        + '\');"><img src="'

                        + this.dirs['emoticons']

                        + this.emoticonFiles[i]

                        + '" alt="'

                        + this.emoticonCodes[i]

                        + '" title="'

                        + this.emoticonCodes[i]

                        + '"/></a>'

                    );

            }

            }

            if((this.emoticonDisplay[i] == 1 || this.emoticonDisplay[i] == 2) && (this.emoticonDisplay[i] != 3)){

            emoticonDisplayPopUpCount++;

            if(this.dom['emoticonsContainerPopUp']) {

                    this.updateDOM(

                        'emoticonsContainerPopUp',

                        '<a href="javascript:ajaxChat.insertText(\''

                        + this.scriptLinkEncode(this.emoticonCodes[i])

                        + '\');"><img src="'

                        + this.dirs['emoticons']

                        + this.emoticonFiles[i]

                        + '" alt="'

                        + this.emoticonCodes[i]

                        + '" title="'

                        + this.emoticonCodes[i]

                        

                         + '" height="'

                        + 25

                        + '" width="'

                        + 25

                        

                        + '" style="padding: 10px"/></a>'

                    );

            }

        }

        }

    },

[Stephen Gemme]

The box will be formed with your css settings. I limited mine to a specific width, so it will not grow longer but create new rows of smilies as it needs to.

#content #emoticonsContainerPopUp {

    position:absolute;

    left:450px;

    bottom:125px;

    padding:3px;

    z-index:1;

}

[Cecil Bergwin]

I must be going mad mate lol, on any removal of closure } nothing works, and from yours I can't seem to add that either without the same result ?

Is it me ? or lol as I'm sure I've added/edited before/after where you suggested ? any blimp of something wrong at nothing works so i was presuming that what I did was correct but you can see my "only results" from the files Ive uploaded with pic.. Heeelp lol :)

Will check back Tomorrow afternoon and many thanks again mate cheers for help, ill be eyes open reading your replies in the morning. THX

[Cecil Bergwin]

Well, Today it's my day off so... The plan is to totally remove the ajax chat install, fully remove all cache (again) and files, reinstall and try again to add your modification code and if I get to the same result I'll be utterly shocked.

Stephen, drupal for which I'm currently using with the embedded version from there site wouldn't be making no effect on this would it ? ( should I use the standalone and can this be integration easily enough with my Drupal ?just a thought as those circles I've been going on are strange to say the least, I'll keep my eye son this thread Today for your time and input and I'll get back to you soon as I can with any updates.

Kind Regards
Cecil

[Stephen Gemme]

Honestly, it must be something prior to that code that is messing something up. I wrote this How-to way after the fact, and could possibly have missed something. Let me run through mine and try to find anything that could be related, but I did a full search and couldn't find any other instances of the emoticonDisplay.

We're currently getting 12+ inches of snow, so I doubt my work will be very busy (knocks on wood) - so I hope I can figure this out together

[Cecil Bergwin]

Cheers buddy, just popped out with mrs and kids and now back at it, started again from scratch in case I've also done something my end but as you can guess :) exactly the same, I greatly appreciate your input here and ears & eyes open ready for your verdict.

The only thing I notice in the above code of yours is in some places there is a ; and not a , but I guess all that's relevant as nobody but me having problems ? strange like here

emoticonFiles: new Array(
'Example1.png',
'Example2.jpg',
'Example3.gif'

); <<<<<<<<<<<<<< but ignore this bit i guess as nobody else had issues

Thanks once more ! :) !

Sounds fun on the snow... where abouts are you

[Stephen Gemme]

Oh I hadn't even seen that - the lack of a comma might be part of your issue. 

The commas after each array declaration split up the ajaxChatConfig variable into the appropriate sections - if you add an extra ; then it will read it differently - how differently I honestly cannot say, but try making it a comma instead of a semi colon - if it's failing after this, then double check your emoticonDisplay declaration in chat.js and make sure it's appropriately declared. 

I'm in the New England area, in one of the snowiest cities in the US - 12" of snow is normal for us unlike down south whom I can only laugh at for shutting down entire cities and looking like post-apocalyptic worlds for a couple inches. 

Edit: I just noticed my mistake in the example code posted above, thank you for catching that. I've fixed the code and hopefully that fixes your problem.

[Cecil Bergwin]

I'd actually removed that semi colon anyway for a comma as it didn't work with it in anyway from day 1 when I first added your code, so still at stale mate I'm afraid, staring at the code now running through it but struggling I must admit.

12 inches normal ? bloody hell, we never seen that here in the UK were expecting some snow this month but it's never at that stage for sure but it's cold enough for sure lol

[Cecil Bergwin]

I've a feeling (might be wrong as you wrote the code) but seems related to the location of the ** this.DOMbuffer = "";" ** location just under the ** var emoticonDisplayPopUpCount=0; ** section as I've just been playing around with that putting it under that section of code and funnily enough the Option 1 now works fine and only displays the appropriate smiley in the pop up...

So partially good but Option 2 or 3 still doubles up for me, for example, using the below code

    // Defines the list of allowed emoticon codes:
    emoticonCodes: new Array(
        ':)',
        ':(',

        ':help:'        
     ),
    
     // Defines the list of emoticon files associated with the emoticon codes:
    emoticonFiles: new Array(
        'smile.png',
        'sad.png',

        'help.png'
    ),

// Defines whether the associated emoticon will display (3 will only display outside popup, 2 will always display, 1 will display in the pop up, 0 is hidden):
    emoticonDisplay: new Array(
     1,
     1,

     2
    ),

    initEmoticons: function() {

       
        var emoticonDisplayPopUpCount=0;
        for(var i=0; i<this.emoticonCodes.length; i++) {
            // Replace specials characters in emoticon codes:
            this.emoticonCodes[i] = this.encodeSpecialChars(this.emoticonCodes[i]);

            this.DOMbuffer = "";

            if(this.emoticonDisplay[i] == 2 || this.emoticonDisplay[i] == 3){
            if(this.dom['emoticonsContainer']) {
                    this.updateDOM(
                        'emoticonsContainer',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                        + '"/></a>'
                       
                    );
                   
            }
 }

All I've done here is moved the location of the ** this.DOMbuffer = ""; ** which achieves the image result above but still not 100% and doubling up on option 2 or 3, maybe I'm onto something here or maybe I've totally butchered the array creating this result ? what do you think mate >



[Cecil Bergwin]

Same Dom location but another example of few more smilies and change of array 1,2,3's in case this may highlight a little more where my problem lays. As you can see all the 1's are working fine and also 3 is working to not show in the pop up window but... where is the doubling up of the :help: coming from ? again all I changed is where the Dom was as you can see quoted in the post above.

:) Cheers mate.... here is to an answer coming soon for it

[Ran zid]

just thought I would chime in as it never hurts to have another pair of eyes,  so ive been messing around with the 123 thing and this is what ive found is working/not working for me:

with this code:

emoticonDisplay: new Array(

0,

1,

2,

3

and this arrangement of emoticons (the default)

emoticonFiles: [

'smile.png',

'sad.png',

'wink.png',

'razz.png',

and this is the result:

so as you can see , the smile is removed and hidden so the 0 is working fine and dandy, the rest however are a little different, there is doubling up of the wink and :P face .. so yea,  im happy to test out any new code that comes about, also in testing no matter how many emoticons Ive added the "box" never goes to a new line it just goes off the screen, and the space between each emoticon is still rather large as you can see.

anyway lets hope we can get this sorted , with your coding talents and dedication and my er... presence/coffee making we can get it done :)

[Stephen Gemme]

First of all, Ran - have you checked the padding you're placing on the emoticons when adding to the list? It's specified directly in each addition, right after you specify the size. My padding is 10px, as you can see in the below code:

            if(this.dom['emoticonsContainerPopUp']) {

                    this.updateDOM(

                        'emoticonsContainerPopUp',

                        '<a href="javascript:ajaxChat.insertText(\''

                        + this.scriptLinkEncode(this.emoticonCodes[i])

                        + '\');"><img src="'

                        + this.dirs['emoticons']

                        + this.emoticonFiles[i]

                        + '" alt="'

                        + this.emoticonCodes[i]

                        + '" title="'

                        + this.emoticonCodes[i]

                        

                         + '" height="'

                        + 25

                        + '" width="'

                        + 25

                        

                        + '" style="padding: 10px"/></a>'

                    );

That padding is what is going to determine how far apart the smilies are.

Okay so I'm glad you guys have been having problems because it's making me remember a few things here and there from when I first got this working. 

It just dawned on me that emoticonsDisplayPopupCount isn't being used whatsoever. This reminded me that, for some reason, I needed to update the dom specifically for the box to work properly, but I only had to do it once and it was fine every time running thereafter. I stumbled upon this while trying to limit the amount of emoticons per row in the display box. The box would not work properly until I called a new dom refresh, but only ONCE when running the code - it would throw an error each time thereafter. 

Try adding this immediately following the code I just pasted above. This was to limit the number of emotes to 5 per line, but ended up solving a dom issue I was getting (and subsequently creating another)

if(!(emoticonDisplayPopUpCount%5)){

         this.updateDOM(

               'emoticonsContainerPopUp',

                '<br clear="left">'

           );

 }

After running the chat once with this, you should comment it out - see what that changes, as I cannot remember the significance of this code specifically, but i left it commented out in my code rather than deleting it for a reason. (Looking back on it now I should have left a comment as to why I left it there in the first place haha).

[Cecil Bergwin]

Just got back in as had to pop out :).

The only change that has made for me mate is the following

Error: Invalid DOM Syntax (DOM ID: emoticonsContainerPopUp).

No changes on the double up or nothing sry :( was I on the right track with the this.DOMbuffer = ""; location ? as still none the wiser I'm afraid and still doubling up and stuff, or was that code/fix for Ran and not me  and my error ?

[Stephen Gemme]

Right, I remember getting that as well - if you remove it did anything change for the better or no?

[Cecil Bergwin]

No change at all and I'm still getting the better results with the Dom location as I pasted up above, should I disregard that and put it back to your original code ?

[Stephen Gemme]

Okay so I just built a test chat and got everything up and running on my end - I implemented your code that you linked me and I"m getting the same results - let me play with it a bit and see what's going on :)

[Stephen Gemme]

Got it - it was the dom buffer's fault, but I hadn't noticed something until I was going through your code with mine side-by side. 

There's a dom update that needs to be removed, because it makes extra calls to adding the emoticons regardless. Your code was working fine, except it was adding all of the emoticons after adding them with my code. That entire function should be this and only this:

initEmoticons: function() {
 this.DOMbuffer = "";

        for(var i=0; i<this.emoticonCodes.length; i++) {
            // Replace specials characters in emoticon codes:
            this.emoticonCodes[i] = this.encodeSpecialChars(this.emoticonCodes[i]);

            if(this.emoticonDisplay[i] == 2 || this.emoticonDisplay[i] == 3){
            if(this.dom['emoticonsContainer']) {
                    this.updateDOM(

                        'emoticonsContainer',

                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]

                        + '"/></a>'
                    );
            }
            }
            if((this.emoticonDisplay[i] == 1 || this.emoticonDisplay[i] == 2) && (this.emoticonDisplay[i] != 3)){

            if(this.dom['emoticonsContainerPopUp']) {
                    this.updateDOM(
                        'emoticonsContainerPopUp',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                       
                         + '" height="'
                        + 25
                        + '" width="'
                        + 25
                       
                        + '" style="padding: 10px"/></a>'
                    );


            }
         }
        }

    },

There's a big chunk that I had taken out which I completely forgot - it's the original code for adding the emoticons. I'll DEFINITELY make sure that I add that to my How-To

REMOVE:

this.DOMbuffer = this.DOMbuffer
 + '<a href="javascript:ajaxChat.insertText(\''

 + this.scriptLinkEncode(this.emoticonCodes[i])
 + '\');"><img src="'
 + this.dirs['emoticons']
 + this.emoticonFiles[i]
 + '" alt="'
 + this.emoticonCodes[i]
 + '" title="'
 + this.emoticonCodes[i]

 + '"/></a>';
 }
 if(this.dom['emoticonsContainer']) {
  this.updateDOM('emoticonsContainer', this.DOMbuffer);
  }
  this.DOMbuffer = "";

This is not needed as my code above will take care of adding everything to the dom.

[Cecil Bergwin]

On Thursday, February 13, 2014 9:37:35 PM UTC, Stephen Gemme wrote:

Got it - it was the dom buffer's fault,

You certainly have mate, well done and nicely spotted/corrected I'm so chuffed you have found this and surely will help many other folks, I knew something strange was going on when I was moving the Dom around but you certainly know this code backwards and very happy to see you achieve success on this.

I've a few things to add and change and hope that you don't mind me working your brain cells as I come across any issues when modifying, which brings me to the 1st in relation to Ran above.

Smiley line count max of 5 - how is this most simply achieved ?

Kindest Regards
Cecil Bergwin

[Stephen Gemme]

I only know the code the way I do because it was a pain in my rear to get it working the first time, hence why i wrote it down for others haha. 

 As for limiting the number of icons per row, that will be handled in the CSS if I remember correctly. If you make the box smaller (narrower) it will automatically shift the next row of icons down. 

[Cecil Bergwin]

Ah simple :) Cheers !

I've a simple question regarding the "Image" button, I'd like it to pop up a box where users can paste the image.url.link.jpg which would in turn on pressing ok or enter would add it inside the image tags ready to submit, should I make a new topic you think and keep this thread clean from other things apart from the smilies add on ? what's your thoughts.

[Stephen Gemme]

That would require a little bit more work, but may I ask why you'd like this option? As it is, a person presses the IMG button and the cursor is automatically placed in the middle of the tags, so all a person needs to do is paste and send :)

Keeping the subject on topic is up to Frug - I don't mind either way as it gives my How-To a better chance of being seen since it's active.

[Cecil Bergwin]

On Thursday, February 13, 2014 11:13:14 PM UTC, Stephen Gemme wrote:

That would require a little bit more work, but may I ask why you'd like this option?

Well, this is version 6 for me of a ShoutBox/ChatRoom many shapes and forms from flash to Ajax and given the common knowledge and simple copy and paste skills of some people (believe it or not) the less click and least complicated the better as you'd be amazed at some of the primitive people out there in this form of chatroom. Sounds mad I know but could be something I'd be looking at purely to eliminate the muppets which I'm familiar with but for now like you say I'll see how it goes when it's launched live which won't be for a while yet as lots to do :)

[FireWire]

Hi.

I can help you with that.

Open 'chat/js/chat.js'. Find:

insertBBCode: function(bbCode) {

switch(bbCode) {

case 'url':

var url = prompt(this.lang['urlDialog'], 'http://');

if(url)

this.insert('[url]' + url, '[/url]');

else

this.dom['inputField'].focus();

break;

default:

this.insert('[' + bbCode + ']', '[/' + bbCode + ']');

}

},

After 'break;' but before 'default:' add this:

case 'img':

var url = prompt(this.lang['imgDialog'], 'http://');

if(url)

this.insert('[img]' + url, '[/img]');

else

this.dom['inputField'].focus();

break;

Open 'chat/js/language/*' and the language files you are using and find(English used as example):

urlDialog: 'Please enter the address (URL) to the webpage:',

Add a new row and add this:

imgDialog: 'Please enter the address (URL) to the image:',

This gives the user a popup asking for url to image. On submit(Ok) the IMG-tag with the url is written out in the text box e.g '[IMG]http://www.myimage.com[IMG]' and the user only hits enter to submit the image.

//FireWire

[Cecil Bergwin]

Ah Thanks FireWire,

Much appreciated - I'll implement this very soon as there is a few other things I need to be adding & changing to Stephens Smiley Mod

Question - My smileys are 96x96 (don't ask :)) and as Stephen suggested the width of the container decides on how many smileys are displayed... however I cannot seem to get the correct padding/spacing in between each icon by css for some reason and also on a vertical note when a new line appears.

When smileys are selected and submitted > in chat they display with no overlap but in the container its as above overlapped.

2 Images attached shows the smiley used 96x96 and also how they overlap both "horizontal & vertical" any ideas folks ?

EDIT - Was playing around with all forms of css last night for this in both config.js and the chat.js and pretty much nothing made effect.

Thanks
Cecil

[Ran zid]

Well just an update:

The new code works beautifully thanks , no doubling up so the emoticons display great , sadly no matter what I do with any sizes/paddings or anything I cant get the epic expanse between emoticons to disappear, maybe its because im resizing them down to 16x16 ? but anyway any ideas on that would be awesome.

still great mod and an awesome help so thank you all.

[Cecil Bergwin]

Hey Ran,

I'm also having issues with padding etc as you may see from my post above, no matter what I try with the css, config.js or the chat.cs nothing seems to change, now your running smaller at 16 and I'm actually running bigger at 96, the width of the container box surely sets the row amount (working fine) but from my image above I cannot seem to get this correctly configured at present but still testing things.

I know stephen is pretty busy this weekend but I'm sure he will pop up soon as he's a moment and have some valuable input for sure... in the meantime if you find anything and vice-versa I'll be sure to post.

[Cecil Bergwin]

Working Fine +++

Well, I'm sure I never saw 2 sections for emoticon container popup I could see it was set for 30 height, maybe I was blind as I found this as I saw it was exactly 30px and went searching I found it, would explain why I was changing values but no effect hehe

#content #emoticonsContainerPopUp a { <<<<<<<<<<<<<<<<<< would explain a lot :) as was editing the emoticonsContainerPopUp and not the emoticonsContainerPopUp a

 display:block;
 float:left;
 width:60px;
 height:30px;
}

So far so good, until my next mod/issue :)

[Cecil Bergwin]

Worked perfect first time thanks FireWire :)

Is there anyway to force image size i.e if somebody puts a 1024x768 I can force the displayed size to 500x500 for example ?

Cheers
Cecil

[FireWire]

Sorry to say I haven't found a way to limit this, that's why I disabled posting images. Because too big images messes up the chat.

This should be a suggestion to Frug to implement. It would be nice with a setting in the config.php for this, to limit inline IMG:s to a specific width/height.

//FireWire

[Cecil Bergwin]

Thx for the prompt response, let's see what frug or others can do, I'll also have a good look to see what's what.

Thanks again

[Cecil Bergwin]

Hello Stephen,

Another possible headache, apologies in advance :).

A Second/Third or more smilies button all with seperate smilies, is this an easy thing to add, I've duplicated most entries in config and templates but I think I'm missing something being called too many times in chat.js - whats your thoughts.

Cheers
Cecil

[Cecil Bergwin]

Solved :) (payback for your image url mod)

Based in the global.css .bbCodeImage

Find:

#content #chatList .bbCodeImage {

Add

width:360px; <<<< your specifics
height:360px; <<<< your specifics

Any problems let me know as seems to work fine :)

[Ran zid]

#content #emoticonsContainerPopUp a   

fixed my issues aswell , brilliant work, now if only I can scale my emoticons it would be flawless as ive got different ratios on some like 30x39 etc 

[Cecil Bergwin]

Glad to hear it mate :) - very handy and very simple.

[Stephen Gemme]

I've just finished up a request to make an extra box with my container so that people with many emotes can separate them into two popup boxes. The steps are identical as the original post. 

Add your container to global.css, name it what you'd like (I called mine emoticonsContainerPopUp2)

#content #emoticonsContainerPopUp2 {
    position:absolute;
    left:450px;
    bottom:125px;
    padding:3px;
    z-index:1;
}

and

#content #emoticonsContainerPopUp2 a {

    display:block;
    float:left;
    width:60px;
    height:30px;
}

Add the container to config.js so the HTML knows where to find it. 

// The ID of the emoticons container:
        emoticonsContainerPopUp2: 'emoticonsContainerPopUp2',

Add the Div for the button, and the div for the actual container to LoggedIn.HTML

(goes INSIDE id="bbCodeContainer")

<input type="button" value="Images/gifs" onclick="ajaxChat.showHide('emoticonsContainerPopUp2', null);" />

(goes OUTSIDE id="bbCodeContainer")

<div id="emoticonsContainerPopUp2" style="display:none;" dir="ltr"></div>

My "initEmoticons" function now looks like this:

        if((this.emoticonDisplay[i] == 4)){
            if(this.dom['emoticonsContainerPopUp2']) {
                    this.updateDOM(
                        'emoticonsContainerPopUp2',

                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                       
                         + '" height="'
                        + 25
                        + '" width="'
                        + 25
                       
                        + '" style="padding: 10px"/></a>'
                    );
       
        }
        }
       
        }
    },

Then assign whichever emoticons you'd like in the 2nd box with the correct value (I used 4) in your config.js file and you're good to go. 

Happy Coding!

[Cecil Bergwin]

;) Thanks buddy, Perfection to say the least ! - First shot spot on !

Much appreciated :)

Cheers
Cecil

[Cecil Bergwin]

Well... here we are again, only minimal time Tonight but tried to a bit of button code working Stephen.

Using the below bits of code for both buttons, trying multiple methods but need to be enabled on 1st click and disabled on 2nd click so they are usable again but only 1 at a time.

using similar methods of document.getElementById("button2").disabled = true; also tried Jquery methods.


What would you add and where to "disable button2 when button1 is pressed and disable button1 when button2 is pressed" all the little bits I've tried are to no luck. Reason I ask is both my containers are large and in exactly the same place hence the need for one or the other active at any one time.

Speak to you Tomorrow if your around.

Cheers
Cecil (again) :)

[Stephen Gemme]

Well, since the HTML isn't the one handling the appearance of the boxes, it shouldn't be the one that we use to control the other boxes. The onclick preference calls the showHide function in chat.js, and that's where the box appearance is handled. Calling multiple instances of onclick that handles each box differently should allow us to make all boxes close while only leaving the one that we clicked open.

Something like this:

 <input type="button" value="[LANG]bbCodeLabelColor[/LANG]" title="[LANG]bbCodeTitleColor[/LANG]" onclick="ajaxChat.showHide('emoticonsContainerPopUp', none);ajaxChat.showHide('emoticonsContainerPopUp2', none);ajaxChat.showHide('colorCodesContainer', null);"/>

 <input type="button" value="Regular Smilies" onclick="ajaxChat.showHide('colorCodesContainer', none);ajaxChat.showHide('emoticonsContainerPopUp2', none);ajaxChat.showHide('emoticonsContainerPopUp', null);" />

 <input type="button" value="Images/gifs" onclick="ajaxChat.showHide('colorCodesContainer', none);ajaxChat.showHide('emoticonsContainerPopUp', none);ajaxChat.showHide('emoticonsContainerPopUp2', null);" />

 This will call the showHide function multiple times for each click, handling each box differently. The "none" parameter is set to tell the JS that we don't want the box to appear. So each time the button is pressed, there is an onclick call to all 3 buttons that turns the ones not clicked off, while opening the one that was clicked. 

[Cecil Bergwin]

Cheers Stephen,

It's been a hectic work week for me but soon as I get chance I'll have a good look above at your additions and try to implement these into my current working chat.

Many Thanks as always and much appreciate your valued input.

Regards
Cecil B

[Frug]

I'm not sure exactly what this mod entails, but I thought everyone using it ought to know the next version of chat will come with an 'emoticons' button that is designed mostly for mobile browsers, although you could easily rig it to do what I guess this mod does.

The button will by default be hidden for windows larger than 700px, but you'd only have to comment out a couple of CSS lines to have emoticons always be in the popup.

[Stephen Gemme]

Frug, it's exactly what you're talking about. This adds a small button next to the Font Size button that allows smilies to be placed in it and brought up in a popup container when pressed. 

 

[Frug]

There is a small difference. Your smilies are always hidden in a popup or outside of it. The mobile improvements places all the smilies in a popup only if the window is smaller than 700 pixels wide.

I put it on the issues list that there should be a maximum number of smilies, beyond which they should be hidden, with a little button to 'show all'. I think it could be simpler than having people assign it.

But I like the idea of hidden emoticons so when I get to it maybe will do it your way.

[Stephen Gemme]

Ah I see. Perhaps the best course would be to detect the size of the screen while adding the smilies and let that determine which container they are placed in. The code can remain the same, you'd just have to have the screen size override the logic I've placed for running through the emoticonsDisplay array.

Come to think of it, if you want the placement to be based off of screen size and maximum smilies in a row then that would remove any need to have my emoticonsDisplay array in the first place. 

[FamilyWeb]

Hey Stephen,

    I was about to undertake the job of adding this emoticon pop-up container to our chat, when I was stump right out of the gate.. Another of our admins had attempted to take on the job and failed.  The question that comes to mind is whether there is something wrong in OUR original coding of our config.js file.

You say to LOOK for this: emoticonFiles: new Array(

What we have is this: emoticonFiles: [

This square bracket with out the new Array is the same for our emoticonCodes, colorCodes, and bbCodeTags

Would this be the reason that the pop-up container is NOT appearing when you press the button?

Please keep in mind that our current default 23 emoticons that came with Ajax-Chat DO appear on the screen above the buttons like they should.

So I don't know whether I should tamper with the current way they are called up, emoticonFiles: [

Please let me know what can be done to make this ALL work correctly?

Oh yeah by the way, I am using 0.8.7 Standalone

Thanks for any help you can give.

On Wednesday, October 23, 2013 6:45:23 AM UTC-7, Stephen Gemme wrote:

This will show you how to add a small box next to your BB codes that allows a popup box for storing more emoticons. I am doing this on a standalone version but it should work on all versions. 

Update: I have integrated this onto my PHPbb3 server and it is also working with no problems.

Easy steps first: Put the emoticons in the correct folder for your chat to recognize (/img/emoticons), and make sure that config.js array's have been configured correctly with proper names and whatnot. 

While you're in config.js, you're going to have to create another array which tells the chat where the images are placed. Your options are display under the text area, display in the popup, or display both. But first, we have to make sure we have the container declared for the emoticons to be placed in.

In Config.js.

Find:

// The ID of the emoticons container:

 emoticonsContainer: 'emoticonsContainer',

Add After:

// The ID of the emoticons container:

        emoticonsContainerPopUp: 'emoticonsContainerPopUp',

Find:

emoticonFiles: new Array(
'Example1.png',
'Example2.jpg',
'Example3.gif'
),

Add After:

// Defines whether the associated emoticon will display (3 will only display outside popup, 2 will always display, 1 will display in the pop up, 0 is hidden):
emoticonDisplay: new Array(
 1,
 2,
 3
),

Now we have to declare the array and allow the CSS to get data from it.

Open chat,js

Find:

this.emoticonFiles                      = config['emoticonFiles'];

Add After:

this.emoticonDisplay            = config['emoticonDisplay'];

Find:

initEmoticons: function() {
  this.DOMbuffer = "";

Add After:

var emoticonDisplayPopUpCount=0;

Find:

 this.emoticonCodes[i] = this.encodeSpecialChars(this.emoticonCodes[i]);

Add After:

if(this.emoticonDisplay[i] == 2 || this.emoticonDisplay[i] == 3){
            if(this.dom['emoticonsContainer']) {
                    this.updateDOM(
                        'emoticonsContainer',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                        + '"/></a>'
                    );
            }
 }
 if((this.emoticonDisplay[i] == 1 || this.emoticonDisplay[i] == 2) && (this.emoticonDisplay[i] != 3)){

            emoticonDisplayPopUpCount++;

            if(this.dom['emoticonsContainerPopUp']) {
                    this.updateDOM(
                        'emoticonsContainerPopUp',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                       
                         + '" height="'
                        + 25
                        + '" width="'
                        + 25
                       
                        + '" style="padding: 10px"/></a>'
                    );
            }
        }

^^ What you can see being done here is that it's determining from the array that we set up, where the emoticons should be placed. Either in the container we're going to create, or the page, or nowhere. You can change the display size of the emotes from within here as well. 

Find and Remove:

this.DOMbuffer = this.DOMbuffer
 + '<a href="javascript:ajaxChat.insertText(\''

 + this.scriptLinkEncode(this.emoticonCodes[i])
 + '\');"><img src="'
 + this.dirs['emoticons']
 + this.emoticonFiles[i]
 + '" alt="'
 + this.emoticonCodes[i]
 + '" title="'
 + this.emoticonCodes[i]

 + '"/></a>';
}
if(this.dom['emoticonsContainer']) {
  this.updateDOM('emoticonsContainer', this.DOMbuffer);
 }
 this.DOMbuffer = "";

^^ This code is not needed as the code we entered in the step prior to this has already added the emoticons to their respectable places and therefore does not need to be called.

Now that everything is declared, we need a place to put all of it, and a button to activate the box we put the emoticons in. 

Open Global.css

Find:

#content #colorCodesContainer {
  position:absolute;
 left:20px;
  bottom:55px;
 padding:3px;
  z-index:1;
}

Add After:

#content #emoticonsContainerPopUp {

  position:absolute;
 left:450px;
 bottom:125px;
 padding:3px;
 z-index:1;
}

Find:

#content #colorCodesContainer a {
  display:block;
 float:left;
 width:20px;
 height:20px;
}

Add After:

#content #emoticonsContainerPopUp a {

  display:block;
 float:left;
  width:60px;
 height:30px;
}

That creates the box for which we'll be adding the emoticons to in Chat.js. Now let's make that button!

Open LoggedIn.html

Find:

<div id="bbCodeContainer">

Add *At the last spot in before the </div>*:

<input type="button" value="More Smilies" onclick="ajaxChat.showHide('emoticonsContainerPopUp', null);" />

Find:

<div id="colorCodesContainer"<span style="c

...

[Stephen Gemme]

Good morning. Glad I stayed subscribed to this thread haha. 

That "emoticonFIles [" that you're talking about is merely an updated way to declare an array, where in my example we're using an older version, so it should hold no bearing on how the code functions. Though I'm glad you brought it to my attention so I can update my how-to. 

Let's go at this step by step starting with the easy stuff, shall we?

Can you get the extra button to show up in the chat properly? Can you get it to display a popup box when clicked, and disappear when clicked again? If so, great! Now we just need to fill this box with the emotes. 

Are you able to create your own emoticonsDisplay array and fill it with data, and get no errors? If so, then try to add the code which deciphers where each emote goes next. 

Can you make the currently working emoticons "disappear" by choosing to not have them displayed in the chat list? (Ergo, if you set their emoticonsDisplay value to 1). See if you can get this far first, then we'll work on getting them in the popup :)

 - Stephen

[Azhtek Je-Nckos]

Man, old thread. Hope someone's still checking this thing.

So, first off, great mod. I'm already enjoying this addition to my chat. But I've run into one small snag, and was hoping someone could offer advice on the matter.

Essentially, I've managed to add all of the changes to the requested files, with exception to the removal of the DOMbuffer from chat.js. When I remove that, chat.js stops responding and nothing loads into it. 

I've attached the modified chat.js with all changes except the removal of the DOMbuffer for emoticons (line 791-821), and the original with no modifications for emoticons. 

Anyone have any suggestions?

Thanks in advance.

[Stephen Gemme]

Wow, haven't been here in a while. I took down the website and therefore didn't need to be running this anymore, though i still love the functionality of this chat. 

Try replacing your initEmoticons function with the following (this is the last way I had mine before taking down my site):

 initEmoticons: function() {
 this.DOMbuffer = "";
        for(var i=0; i<this.emoticonCodes.length; i++) {
            // Replace specials characters in emoticon codes:

            this.emoticonCodes[i] = this.encodeSpecialChars(this.emoticonCodes[i]);

            if(this.emoticonDisplay[i] == 2 || this.emoticonDisplay[i] == 3){
            if(this.dom['emoticonsContainer']) {
                    this.updateDOM(
                        'emoticonsContainer',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                        + '"/></a>'
                    );
            }
            }
            if((this.emoticonDisplay[i] == 1 || this.emoticonDisplay[i] == 2) && (this.emoticonDisplay[i] != 3)){

            if(this.dom['emoticonsContainerPopUp']) {


                    this.updateDOM(
                        'emoticonsContainerPopUp',
                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                       
                         + '" height="'
                        + 25
                        + '" width="'
                        + 25
                       
                        + '" style="padding: 10px"/></a>'
                    );
            }
        }

        if((this.emoticonDisplay[i] == 4)){
            if(this.dom['emoticonsContainerPopUp2']) {
                    this.updateDOM(

                        'emoticonsContainerPopUp2',

                        '<a href="javascript:ajaxChat.insertText(\''
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');"><img src="'
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                       
                         + '" height="'
                        + 25
                        + '" width="'
                        + 25
                       
                        + '" style="padding: 10px"/></a>'
                    );
       
        }
        }
       
        }

    },

[Azhtek Je-Nckos]

That seems to have worked perfectly. Thank you, man, I really appreciate it.

[Jon B]

Have to ask this because I couldn't find anything else on it.

I followed the steps letter by letter but when I finish everything and when I refresh the chat, the chat fails to load.  A small grey box appears where the emoticons would normally be.  Any suggestions?