[Code] Xtra Smileys for your Forum

[simply sibyl]

NOTICE:    This Guide shows how to put a little box at the top of your forum that when opened has smileys in it that your members can use in posts.
If you wish to upload smileys to your forum you can purchase the smiley upgrade.   Click on the "Upgrade this Forum" link at the bottom of your forum or go to Admin>Addons & Upgrades to purchase the upgrade.


This will put a little box at the top of your forum that when opened has smileys in it that your members can use in posts.    Note:   if you prefer you an put the code in your footer instead.
When clicking on the smileys it will insert the code for them into the posts.

When open it looks like this:




Place the code in your Header.   (or Footer if you want it at the bottom of your forum instead)

The smileys in this are the smileys you see here at support.
If you wish to use your own smileys look for the smiley sections in the code.
Replace the links for the smileys twice for each smiley section in the code.
You can add as many of these sections as you wish to.
NOTICE:  Be aware that if you have links in your extra smileys box to remote urls, and those servers are slow or even completely down, it's going to slow down the loading of your forum.  Also putting hundreds of smileys in this will do the same thing.

The sections look like this:

Code: [Select]

<a href="javascript:void(0);" onclick="surroundText('[img]', 'http://i102.photobucket.com/albums/m105/mysmileyplace/the_runner.gif[/img]', document.forms.postmodify.message); return false;"><img src="http://i102.photobucket.com/albums/m105/mysmileyplace/the_runner.gif" align="bottom"  alt="Insert Image" title="Insert Image" /></a>


Code: [Select]

<!--  Begin Clickable Xtra Smileys  Place this code in your HEADER -->

<script language="javascript">
  function toggle_it(itemID){
      // Toggle visibility between none and inline
      if ((document.getElementById(itemID).style.display == 'none'))
      {
        document.getElementById(itemID).style.display = 'inline';
      } else {
        document.getElementById(itemID).style.display = 'none';
      }
  }
</script>

     <table width="200px" class="tborder" cellpadding="1" cellspacing="1">
        <tr>
             <td class="catbg" align="left">
              <small> Xtra Smileys</small>
             </td>
             <td  class="catbg" align="right" style="text-align: center;">
                <a href="#smileys" onClick="toggle_it('prsmileys')"><small>[Open]</small></a>
             </td>
         </tr>
    </table>
 
<div align="left" style="position: absolute;  z-index: 2; visibility: show;">
    <table class="tborder" width="200px" id="prsmileys" style="display:none;"  align="left" border="0">
        <tr>
            <td class="catbg" align="right">
                <a href="#smileys" onClick="toggle_it('prsmileys')"><small>[Close]</small></a>
            </td>
         </tr>
          <tr>
              <TD class="windowbg2" align="center" >

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/smiley.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/smiley.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/wink.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/wink.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/cheesy.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/cheesy.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/grin.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/grin.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/angry.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/angry.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/shocked.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/shocked.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/cool.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/cool.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/huh.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/huh.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/rolleyes.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/rolleyes.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/tongue.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/tongue.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/lipsrsealed.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/lipsrsealed.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/lipsrsealed.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/lipsrsealed.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/undecided.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/undecided.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/kiss.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/kiss.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/cry.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/cry.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/evil.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/evil.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/angel.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/angel.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/laugh.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/laugh.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/azn.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/azn.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/afro.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/afro.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/police.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/police.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/2funny.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/2funny.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/buck2.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/buck2.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/coolsmiley.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/coolsmiley.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/crazy2.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/crazy2.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/idiot2.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/idiot2.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/knuppel2.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/knuppel2.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/smiley6600.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/smiley6600.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/tickedoff.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/tickedoff.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://smfsupport.com/support/Smileys/smfnew/smitten.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://smfsupport.com/support/Smileys/smfnew/smitten.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('[img] http://www.smfboards.com/Smileys//smf/uglystupid2.gif [/img]', '',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/uglystupid2.gif" align="bottom"  
alt="Insert Image" title="Insert Image" /></a>
    </TD>
   </TR>
  </TABLE>
 </div>
</a>
<!-- End Clickable Show/Hide Smileys Script -->

If you wish to make the box wider:
There are two places in the code for the width.   Change both of them.
The first "width=200px" is for the header part of the "box"
The second "width=200px" is for the box itself.


 
 

[3lf-ครรครรเภ]

thanks sibyl worked perfectly. i found that i like to put it in my footer, because it makes it close to where the post is =)

[wizer]

Ok, this code worked great for me...however one question.

Is there a way to resize the box, or to make it resizeable to the user?

I tried to make it wider by changing the "table width" in the code but it had no visible effect.

Thanks.

P.S. I put the code in the footer like the other user did..its more convenient I think..

[simply sibyl]

Ok, this code worked great for me...however one question.

Is there a way to resize the box, or to make it resizeable to the user?

I tried to make it wider by changing the "table width" in the code but it had no visible effect.

Thanks.

P.S. I put the code in the footer like the other user did..its more convenient I think..

There are two places in the code for the width.
The first "width=200px" is for the header part of the "box"
THe second "width=200px" is for the box itself.
Try playing with those numbers to make it wider.
THere isnt a way to make it resizeable for the users.. whatever size you set that table for is the size it will be.

[magebow99]

ABSOLUTLY AMAZING!!!! WORKED LIKE A CHARM FOR ME! TYVM

[EyeSpyDesigns]

This is not working for me. It shows up and it pretty to look at, but if you click on any of them - nothing happens. I was putting up a post in my forum to announce the xtra smilies feature added in, but when I clicked on the smilies to add them to my post as proof that it was functional, I would click click click - nothing shows up. Could someone please tell me what I've done wrong here? This is in my header:

Code: [Select]

<!--  Begin Clickable Xtra Smileys  Place this code in your HEADER -->

<script language="javascript">
  function toggle_it(itemID){
      // Toggle visibility between none and inline
      if ((document.getElementById(itemID).style.display == 'none'))
      {
        document.getElementById(itemID).style.display = 'inline';
      } else {
        document.getElementById(itemID).style.display = 'none';
      }
  }
</script>

     <table width="200px" class="tborder" cellpadding="1" cellspacing="1">
        <tr>
             <td class="catbg" align="left">
               Xtra Smileys
             </td>
             <td  class="catbg" align="right">
                <center><a href="#smileys" onClick="toggle_it('prsmileys')">[Open] </a></center>
             </td>
         </tr>
    </table>
 
<div align="left" style="position: absolute;  z-index: 2; visibility: show;">
    <table class="tborder" width="200px" id="prsmileys" style="display:none;"  align="left" border="0">
        <tr>
            <td class="catbg" align="right">
                <a href="#smileys" onClick="toggle_it('prsmileys')">[Close]</a>
            </td>
         </tr>
          <tr>
              <TD class="windowbg2" align="center" >

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/smiley.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/wink.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/cheesy.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/grin.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/angry.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/shocked.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/cool.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/huh.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/rolleyes.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/tongue.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/lipsrsealed.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/lipsrsealed.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/undecided.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/kiss.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/cry.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/evil.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/angel.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/laugh.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/azn.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/afro.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/police.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/2funny.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/buck2.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/coolsmiley.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/crazy2.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/idiot2.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/knuppel2.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/smiley6600.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/tickedoff.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>

<a href="javascript:void(0);" onclick="surroundText('',
document.forms.postmodify.message); return false;"><img src="http://www.smfboards.com/Smileys//smf/uglystupid2.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>
    </TD>
   </TR>
  </TABLE>
 </div>
</a>
<!-- End Clickable Show/Hide Smileys Script -->

ETA: NVM - I think I've fixed it. Thanks!!

[lordtentei]

hello simply sibyl,
can you modify your code.. i think the location is too far and cannot be easily noticed.
can you put the extra smileys above the quick reply table?
Thanks!

[simply sibyl]

nope.. its html code, in the footer and it cant be put above that area.    The code was made back before we actually HAD smileys in the quick reply box.

[nchillbilly]

I absolutely adore this code!

I put it in the footer & it works like a charm!  Thank you Sybil.

[NaturalMama]

I put it in the footer as well. Thanks so much! Lack of emoticons was the #1 complaint from my members, so now they're HAPPY!

[peepzi]

Nice im using this very handy.

[Tuberavens]

I tried it and It works had to use the workaround code to add more smileys 
Just have one problem when I use the photo bucket link it show up in the box but will not show in post so I tried a link direct from a site and that worked fine
I got it to work 

[momoftwins]

Forum Url: http://parentsworld.smfforfree2.com
can't ya put this code any were else instead off the headers and footers because it's a pain to keep scrolling up to the top to pick a smiley and then scroll back down to do your post know what I mean?

[simply sibyl]

Forum Url: http://parentsworld.smfforfree2.com
can't ya put this code any were else instead off the headers and footers because it's a pain to keep scrolling up to the top to pick a smiley and then scroll back down to do your post know what I mean?

Moose or someone else who knows coding would have to write a script (if possible) to place it someplace else.
I don't know how to do that stuff. 

[momoftwins]

Forum Url: http://parentsworld.smfforfree2.com
oh rite I see lets hope they can sort it then