Post by Matt on Jun 5, 2006 20:22:05 GMT -5
Created By: Todge
Creator's Comments:
This will place a new button in your post area which will then wrap any highlighted section with tags..
Then, in your posts, anything within the spoiler tags will be hidden until the spoiler bar is clicked on....
Put this in your Global Header..
Edit it as necassary...
spoilertitle is the clickable spoiler bar that shows up in your posts..
spoilerbody is the hidden cell, the spoiler itself..
Then put this in your Global Footer... If you are using my dropdown smilie code make sure this goes below it!
Edit this part of the code..
var spoiler = 'SPOILER';
What you would like the default spoiler title to be..
var newButton = 'http://todge.bishsite.com/Pics/spoiler.jpg';
The URL of your button.. (You are welcome to use mine, but I would advise you host it yourself..
There is now a new function...
Will give a spoiler with the default title..
Will give a spoiler with the title YOU choose, in this case, 'header'..
Below is another, spoiler code.. This one adds a button in the post that, when clicked on will show or hide the spoiler below...
Put this in your Global Header...
Edit these variables...
var newButton = 'http://todge.bishsite.com/Pics/spoiler.jpg';
var showTxt = 'Show';
var hideTxt = 'Hide';
... to your own button's URL and the text you'd like in the spoiler button itself..
Creator's Comments:
This will place a new button in your post area which will then wrap any highlighted section with tags..
Then, in your posts, anything within the spoiler tags will be hidden until the spoiler bar is clicked on....
Put this in your Global Header..
<style type="text/css">
<!--
.spoilertitle { background-color: DADADA; color: 000000; font-weight: bold; font-size: 13px; }
.spoilerbody { font-size: 11px; color: 000000; background-color: F6F6F6; }
// -->
</style>
Edit it as necassary...
spoilertitle is the clickable spoiler bar that shows up in your posts..
spoilerbody is the hidden cell, the spoiler itself..
Then put this in your Global Footer... If you are using my dropdown smilie code make sure this goes below it!
<script type="text/javascript">
<!--
/*
Spoiler tags by Todge
Copyright © 2005
Please keep this header intact
*/
var spoiler = 'SPOILER - click to reveal';
var newButton = 'http://todge.bishsite.com/Pics/spoiler.jpg';
var spoilerBody;
// Add Spoiler button to post area...
var TD = document.getElementsByTagName('TD');
var spoilerButton = document.createElement('A');
spoilerButton.href = 'javascript:add("[spoiler]","[/spoiler]")';
spoilerButton.innerHTML = '<img src="'+newButton+'" alt="Spoiler" border="0"/>';
for(t=0; t<TD.length; t++)
{
if(TD[t].width == "30%" && TD[t].innerHTML.match(/Add Tags:/i))
{
TD[t+1].getElementsByTagName('font')[0].appendChild(spoilerButton);
break;
}
}
// Create spoiler table...
var spoiler1='<center><table class="bordercolor" align="center" border="0" cellpadding="0" cellspacing="1" width="500px">';
spoiler1+='<tr><td class="spoilertitle" align="center"><b>';
var spoiler2='</b><td><tr><tr style="display: none"><td class="spoilerbody"><table width="100%" cellpadding="2"><tr><td class="spoilerbody">';
// Find spoilers and insert table into posts...
var post = document.getElementsByTagName('TD');
for(t=0; t<post.length; t++)
{
if(post[t].align=='right'&&post[t].height=='20'&&post[t].vAlign=='bottom'&&post[t].width=='40%')
{
var posttxt=post[t+1].innerHTML;
posttxt=posttxt.split('[spoiler');
for(s=1; s<posttxt.length; s++)
{
spoilertxt = spoiler;
if(posttxt[s].split(']')[0].split('=').length>1)
{
spoilertxt = posttxt[s].split('=')[1].split(']')[0];
}
posttxt[s]=posttxt[s].split('[/spoiler]');
posttxt[s][0]=posttxt[s][0].split(']');
spoilerBody=posttxt[s][0][1];
if(posttxt[s][0].length>2)
{
for(sB=2; sB<posttxt[s][0].length; sB++)
{
spoilerBody+=']'+posttxt[s][0][sB];
}
}
posttxt[s][0]=posttxt[s][0].join(']');
posttxt[s][0]=spoiler1+spoilertxt+spoiler2+spoilerBody+'</td></tr></table></td></tr></table></center>';
posttxt[s]=posttxt[s].join(' ');
}
posttxt=posttxt.join(' ');
post[t+1].innerHTML=posttxt;
}
}
// Show spoiler when clicked on...
var spoil = document.getElementsByTagName('table');
for(s=0; s<spoil.length; s++)
{
if(spoil[s].getElementsByTagName('TD')[0].className=='spoilertitle')
{
spoil[s].onclick=function(){if(this.getElementsByTagName('TR')[2].style.display=='none'){this.getElementsByTagName('TR')[2].style.display='';}else{this.getElementsByTagName('TR')[2].style.display='none';}}
}
}
// -->
</script>
Edit this part of the code..
var spoiler = 'SPOILER';
What you would like the default spoiler title to be..
var newButton = 'http://todge.bishsite.com/Pics/spoiler.jpg';
The URL of your button.. (You are welcome to use mine, but I would advise you host it yourself..
There is now a new function...
Will give a spoiler with the default title..
Will give a spoiler with the title YOU choose, in this case, 'header'..
Below is another, spoiler code.. This one adds a button in the post that, when clicked on will show or hide the spoiler below...
Put this in your Global Header...
<script type="text/javascript">
<!--
/*
Spoiler tags V2 by Todge (Todge-@ntlworld.com)
Copyright © 2005
Please keep this header intact
*/
// Edit below...
var newButton = 'http://todge.bishsite.com/Pics/spoiler.jpg';
var showTxt = 'Show';
var hideTxt = 'Hide';
// Edit above...
var spoiler;
var showSpoiler='<table class="spoilertitle" width="50px" style="cursor: pointer"><tr><td align="center">'+showTxt+'</td></tr></table>';
var hideSpoiler='<table class="spoilertitle" width="50px" style="cursor: pointer"><tr><td align="center">'+hideTxt+'</td></tr></table>';
// Add Spoiler button to post area...
var TD = document.getElementsByTagName('TD');
if(document.postForm)
{
var spoilerButton = document.createElement('A');
spoilerButton.href = 'javascript:add("[spoiler]","[/spoiler]")';
spoilerButton.innerHTML = '<img src="'+newButton+'" alt="Spoiler" border="0"/>';
for(t=0; t<TD.length; t++)
{
if(TD[t].width == "30%" && TD[t].innerHTML.match(/Add Tags:/i))
{
TD[t+1].getElementsByTagName('font')[0].appendChild(spoilerButton);
break;
}
}
}
// Create spoiler button...
var spoiler='<div>'+showSpoiler+'</div>'
// Find spoilers and insert table into posts...
var post = document.getElementsByTagName('TD');
for(t=0; t<post.length; t++)
{
if((post[t].align=='right'&&post[t].height=='20'&&post[t].vAlign=='bottom'&&post[t].width=='40%')||(document.postForm&&post[t].width=='100%'&&post[t].className.match('windowbg')&&post[t].innerHTML.match('Posted by')))
{
var spoilerColor = post[t].parentNode.parentNode.parentNode.parentNode.bgColor;
var posttxt=post[t+1].innerHTML;
posttxt=posttxt.split('[spoiler]');
for(s=1; s<posttxt.length; s++)
{
posttxt[s]=posttxt[s].split('[/spoiler]')
posttxt[s][0]=spoiler+'<div style="display: none">'+posttxt[s][0]+'</div>';
posttxt[s]=posttxt[s].join(' ');
}
posttxt=posttxt.join(' ');
post[t+1].innerHTML=posttxt;
}
}
// Show spoiler when clicked on...
var spoil = document.getElementsByTagName('div');
for(s=0; s<spoil.length; s++)
{
if(spoil[s].firstChild.className=='spoilertitle')
{
spoil[s].onclick=function(){if(this.nextSibling.style.display=='none'){this.nextSibling.style.display=''; this.innerHTML=hideSpoiler;}else{this.nextSibling.style.display='none'; this.innerHTML=showSpoiler;}}
}
}
// -->
</script>
Edit these variables...
var newButton = 'http://todge.bishsite.com/Pics/spoiler.jpg';
var showTxt = 'Show';
var hideTxt = 'Hide';
... to your own button's URL and the text you'd like in the spoiler button itself..