[CB] New customisable 'drop-down boxes'

[Todge]

This will replace the main drop down boxes on your forum with new ones that can be styled to match your forum..

Put this in your Global Header..

<style type="text/css">
<!--
.newdrop { color: #aaaaaa; font-weight: bold; background-color: red;}
.droparrow { color: red; background-color: yellow; }
.dropbody { background-color: red; border: 1px black solid; }
.dropcontent { color: #ffffff; }
.dropcontent:link { color: #ffffff; }
.dropcontent:nav { color: #ffffff; }
.dropcontent:visited { color: #ffffff; }
-->
</style>

That's the style for the new boxes..

.newdrop is the bit you see that replaces the original drop down, you can set color, background color, size, weight.. you name it..

.droparrow is the arrow I've put to the side of the box, set it as above

.dropbody is the actual dropdown itself.. as above but you can have a border too

.dropcontent is the, umm.. content of the dropdown (obviously)

I've set it to some pretty garish colors just to show you..

Put this in your Global Footer... No editing is needed..

The code should only effect the drop downs on the forum proper.. as in forum jump, color and icon dropdowns.. All others are left as normal.

<script type="text/javascript">
<!--
/*
Reformat 'drop-downs'..
By Todge
Copyright © 2009
Please keep this header intact
*/

if(!location.href.match(/tion=headersfooters/))
{
var drop = document.getElementsByTagName('select');
for(d=0; d<drop.length; d++)
{
if(drop[d].name.match(/(icon|color)/) || drop[d].id == 'forumjump')
{
var dropBody = document.createElement('font');
dropBody.className = 'newdrop';
dropBody.style.position = 'relative';
dropBody.innerHTML = '<font class="droparrow">v</font>'+drop[d].firstChild.innerHTML;
var newDrop = document.createElement('div');
newDrop.className = 'dropbody';
newDrop.align = 'left';
newDrop.style.position = 'absolute';
newDrop.style.left = '0px';
newDrop.style.top = '0px';
var click = drop[d].onchange.toString().split('{')[1].split(';')[0];
var opts = drop[d].getElementsByTagName('option');
newDrop.innerHTML = opts[0].innerHTML;
dropBody.onmouseover = function(){this.getElementsByTagName('div')[0].style.display='';}
newDrop.style.display = 'none';
newDrop.onmouseout = function(){this.style.display='none';}

for(o=1; o<opts.length; o++)
{
if(drop[d].id == 'forumjump')
{
newDrop.style.width = '120px';
newDrop.style.height = '250px';
newDrop.style.overflow = 'auto';
newDrop.style.left = '';
newDrop.style.right = '0px';
newDrop.style.top = '-150px';
if(opts[o].value == '')
{
newDrop.innerHTML += '<br>---------';
}
else
{
newDrop.innerHTML += '<br><a class="dropcontent" href="'+opts[o].value+'">'+opts[o].innerHTML+'</a>';
}}
else if(drop[d].name == 'color')
{
var val = '(&qu'+'ot;'+opts[o].value.toLowerCase()+'&qu'+'ot;)';
val = 'javascript:'+click.replace(/\((.)+\)/,val);
newDrop.innerHTML += '<br><a class="dropcontent" href="'+val+'">'+opts[o].innerHTML+'</a>';
}
else if(drop[d].name == 'icon')
{
function icon(piccie)
{
var sel = piccie.split('gif')[1];
piccie = piccie.split('gif')[0]+'gif';
document.postForm.icon.value = sel;
document.postForm.iconImage.src = piccie;
return;
}
var val = click.split(/http:\/\/s/)[1].split(/('|")\+document/)[0];
val = 'javascript:icon(&qu'+'ot;http://s'+val.split('"')[0]+opts[o].value+'.gif'+opts[o].value+'&qu'+'ot;)';
newDrop.innerHTML += '<br><a class="dropcontent" href="'+val+'">'+opts[o].innerHTML+'</a>';
}}
dropBody.appendChild(newDrop);
drop[d].parentNode.insertBefore(dropBody,drop[d]);
drop[d].style.display = 'none';
}}}
// -->
</script>

One other thing.. There is no need to click these boxes.. just run the mouse over the box and all the options will appear..