'Drop down' smilie code with preview box et

'Drop down' smilie code with preview box et Jun 22, 2005 15:01:12 GMT -8

Post by Todge on Jun 22, 2005 15:01:12 GMT -8

This will add a drop down menu to the left of the text box listing your smilies with a preview box below it. There is also an option to 'view all' smilies which will open a pop-up containing all of your smilies...

This is your smilie array (the list of all your smilie URLs).

Put it in your Global Header...

<script type="text/javascript">
<!--
/*
Smilie array for use with the smilie code in the footer...
*/

var smilie = new Array();

// SMILIE ARRAY BELOW.....

smilie[0]="URL OF SMILIE";
smilie[1]="URL OF SMILIE";
smilie[2]="URL OF SMILIE";
smilie[3]="URL OF SMILIE";
smilie[4]="Christmas Smilies";
smilie[5]="URL OF SMILIE";

// SMILIE ARRAY ABOVE.....

// -->
</script>

Just add your Smilie URLs where it says, Continue with smilie[6], smilie[7] etc., for as many as you need.

You can also group your smilies, or add subtitles, if you wish to do that, just put the group title/sub-title of the next group in the smilie array instead of a URL. (see smilie[4] as an example)

This is the Smilie Code proper..
Put it in your GLOBAL FOOTER.

<script type="text/javascript">
<!--
/*
Extra Smilies, with preview, drop down menu and option to view all (V3.1)
by Todge
Copyright © 2012
Please keep this header intact
*/

if(document.postForm || pb_action == 'display')
{
// Edit below here...

var popBoxes = 10;
var popWidth = 700;
var popHeight = 400;

// Edit above here...

var smCode = new Array();

// Get smilie codes...

for(t=0; t<smilie.length; t++)
{
smCode[t] = ' ::'+smilie[t].split('/')[smilie[t].split('/').length-1].split('.')[0]+':: ';
}

// Create smilie pop-up...

var winleft = (screen.width/2)-(popWidth/2);
var winatts = 'width='+(popWidth+20)+',height='+popHeight+',left='+winleft+',top=50,scrollbars';

var content = document.getElementsByTagName('style')[0].innerHTML;
content = '<html><head></head><style>'+content+'</style><body onBlur="self.close()">';
content += '<br><table width="'+popWidth+'" cellspacing="1" cellpadding="0" border="0" align="center" class="bordercolor">';
content += '<tr><td width="100%" class="titlebg" colspan="'+popBoxes+'" align="center"><b>Smilies</b></td></tr>';
for(t=0; t<smilie.length; t++)
{
if(!smilie[t].match('http')){
content += '<tr><td width="100%" class="windowbg" colspan="'+popBoxes+'" align="center">'+smilie[t]+'</td></tr>';
content += '<tr>';
t++;
}
for(b=0; b<popBoxes; b++)
{
if(typeof(smilie[t]) != 'undefined'){
if(!smilie[t].match('http')){
content += '<td width="'+100/popBoxes+'%" class="windowbg2"></td>';
t--;
}
else{
if(document.all){
content += '<td width="'+100/popBoxes+'%" class="windowbg2" align="center"><b><a href="javascript:window.opener.add(\''+smCode[t]+'\');document.focus()"><img src="'+smilie[t]+'" border="0"></a></b></td>';}
else{
content += '<td width="'+100/popBoxes+'%" class="windowbg2" align="center"><a href="javascript:window.opener.add(\''+smCode[t]+'\')"><img src="'+smilie[t]+'" border="0"></a></td>';}}}
else{
content += '<td width="'+100/popBoxes+'%" class="windowbg2"></td>';
}
t++;
}
content += '</tr>';
t--;
}
content += '</td></tr></table>';
content += '</body></html>';


// display smilies
function aS(smiley)
{
smiley = smiley.split('::')[1].split('::')[0];
for(t=0; t<smCode.length; t++)
{
if(smCode[t].match(smiley))
{
if(document.postForm)
{
document.getElementById('smile').innerHTML = ' <a href=\'javascript:add(" '+smCode[t]+' ")\'><img src="'+smilie[t]+'" border="0" alt=" '+smCode[t]+' "/></a> ';
}
else
{
document.getElementById('smile').innerHTML = ' <a href=\'javascript:adds(" '+smCode[t]+' ")\'><img src="'+smilie[t]+'" border="0" alt=" '+smCode[t]+' "/></a> ';
}


}}}

function popSmilies()
{
var smilieWindow = window.open("","newWindow",winatts);
smilieWindow.document.write(content);
}

var smilieCode = '<br /><br /><table bgcolor="000000" border="0"><TR><TD><select name="selectsmilie" style="width: 120px;" onChange="aS(this.options[this.selectedIndex].value)"><option>Select Smilie';
for (p2=0; p2<smCode.length; p2++)
{
if(smilie[p2].match(/\.(gif|jpe?g|png)/i))
{
smilieCode += '<option value=" '+smCode[p2]+' ">'+smCode[p2];
}
else
{
smilieCode += '<option value="">---'+smilie[p2]+'---';
}
}
smilieCode += '</select></TD></TR><TR><TD ID="smile" class="windowbg2" height="60" align="center" valign="middle">';
smilieCode += '</TD></TR>';
smilieCode += '<TR><TD class="windowbg2" align="center" valign="middle" height="15"><a href="javascript:popSmilies()">View all smilies</a></TD></TR></table>';


// show smilies in posts

function showSmilies()
{
var posting = document.getElementsByTagName('input');
for(p=0; p<posting.length; p++)
{
if(posting[p].type=='submit')
{
posting[p].onmousedown=function()
{
var postBox = document.getElementsByTagName('textarea');
for(p=0; p<postBox.length; p++)
{
if(postBox[p].name == 'message')
{
postBox = postBox[p];
break;
}}

var post=postBox.value;

for(t=0; t<smCode.length; t++)
{
post = post.replace(new RegExp(smCode[t],"g"),'[im'+'g]'+smilie[t]+'[/i'+'mg]');
}
postBox.value = post;
}}}}

if(document.postForm)
{
// Create and place the smilie box on page etc...

var td = document.getElementsByTagName('TD');

document.postForm.message.parentNode.parentNode.previousSibling.innerHTML += smilieCode;

// Replace smilies in post text with codes

var post = document.postForm.message.value;
for(t=0; t<smCode.length; t++)
{
post = post.replace(new RegExp(smilie[t],"g"),smCode[t]);
}
post = post.split('[img] ::').join(' ::');
post = post.split(':: [/img]').join(':: ');
document.postForm.message.value = post;

showSmilies();
}}
// -->
</script>

All you have to do is edit this part....

var popBoxes = 10;
var popWidth = 700;
var popHeight = 400;

popBoxes is the amount of smilies you'd like in each row of the pop-up box..

popWidth and popHeight are the dimensions of the pop-up box..

That's ALL you have to do, there is no need to add anything to your censored words list.

To have this code work in your Quick Reply area too, you need this add-on code..