Xtra Smileys - Smiley Box is Draggable

IMPORTANT: Before you go further read the following:

You have to have your own webpace or a place that will let you host two .js files for this to work.
Do not use the links I provide in the directions as bandwidth is limited with them and the smiley box will NOT drag if you use them.

This looks exactly like my original Xtra Smileys but with this one you can put your mouse on the smiley box and drag it down to the post area. The smileys are clickable to add the code for them to a post.

Instructions:

The smileys in this are the smf smileys that you see at support.

If you want to use your own smileys:

Look at the code and find the sections that look like this:

Code:

There is one of these sections for each smiley - 30 total
(you can add/subtract these sections depending on how many you want)

Replace BOTH urls with your smiley url being very careful to leave all quotes.
Do this for each section in the code.

IMPORTANT:

Do to bandwidth limitations you HAVE to download the two .js files and upload them to your own host, then replace the links. NOTE: the smiley box will not drag and will error if you do not replace the two js links with your own.

You can download them both from here:

http://members.cox.net/mysmileyplace/ui.mouse.zip
http://members.cox.net/mysmileyplace/ui.draggable.zip

You'll need to upload the files that are inside the zip files to your own space.

Put this in your header (REPLACE your links for the two .js files with your own links or this will NOT work for you)

Code:

<script src="jquery.js"></script>
<script src="http://your url/ui.mouse.js"></script>
<script src="http://your url/ui.draggable.js"></script>

<script>
$(document).ready(function(){
$(".dragsmileys").draggable();
});
</script>

<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">
<center><a href="#smileys" onClick="toggle_it('prsmileys')"><small>Draggable Smileys</small> </a></center>
</td>
</tr>

</table>



<div align="left" style="position: absolute; z-index: 2; visibility: show;" class="dragsmileys">
<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" >

<br>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<a href="javascript:void(0);" onclick="surroundText('[img]', ' https://cdn.smfboards.com/Smileys/smf/uglystupid2.gif [/img]',
document.forms.postmodify.message); return false;"><img src="https://cdn.smfboards.com/Smileys/smf/uglystupid2.gif" align="bottom"
alt="Insert Image" title="Insert Image" /></a>
</td>
</tr>
<tr>
<td class="catbg" align="center">
<div style="cursor: move;"><small>Left Click - Drag Me</small></div>
</td>
</tr>

</table>
</div>