[CSS][BBCODE] Spoiler Button

[Sephiroth]

Demo:


About 360haven



360haven is an Forum Devoted To Game modding Fans from all over the world.

An Awesome Community of Xbox 360 Gamers, Modders and Developers who Create & Share Tutorials, Applications, Gfx, Trainers and Gamesaves.

A haven for the l33t.
A scarce paradise for modders.


CSS



.myButton {
-moz-box-shadow: 0px 0px 33px 0px #175dbf;
-webkit-box-shadow: 0px 0px 33px 0px #175dbf;
box-shadow: 0px 0px 33px 0px #175dbf;
background-color:#212121;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:2px solid #175dbf;
display:inline-block;
cursor:pointer;
color:#2b9cff;
font-family:Verdana;
font-size:13px;
font-weight:bold;
padding:4px 7px;
text-decoration:none;
text-shadow:0px 0px 16px #2c2d30;
}
.myButton:hover {
background-color:#ffffff;
}
.myButton:active {
position:relative;
top:1px;
}
.spoiler_content {
border : 1px solid #185177;
background : #1a1c1f;
line-height:18px
display : block;
margin-top:10px;
text-align:left;
padding : 12px 12px 12px 12px;
width : auto;
-moz-box-shadow: 0px 0px 33px 0px #175dbf;
-webkit-box-shadow: 0px 0px 33px 0px #175dbf;
box-shadow: 0px 0px 33px 0px #175dbf;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
display:inline-block;
font-family:Verdana;
font-size:13px;
font-weight:bold;
padding:auto auto;
text-decoration:none;
}


More: http://www.bestcssbuttongenerator.com/



-
-

BBCODE

Title: Spoiler
BB Code Tag Name: Spoiler

Replacement:


<div align="left">
<div class="quotetitle">
<input class="myButton" value="Show spoiler" onclick="java:if (this.parentNode.parentNode.getElementsByTagName(' div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show spoiler'; }" onfocus="this.blur();" type="button">
</div>
<div class="quotecontent">
<div style="display: none;"><span class="spoiler_content">{param}</span></div>
</div>
</div>


Example: [spoiler] text goes here [/spoiler*] without *

Description: Used to hide things, shorten pages, organize posts, ETC.
Image: http://www.360haven.com/forums/images/bb/SPOILER.GIF
Use {option}: No
Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: No
Disable Smilies Within This BB Code: No
Disable Word Wrapping Within This BB Code: No
Disable Automatic Link Parsing Within This BB Code: No

[THUMBS]

nice one Sephiroth i was going to ask about this :thumbsup:

[Crimi Martin]

Noooooooooooo! My feed reader can't open spoiler buttons.
That's going to suck for me if the posters I'm interested in here, start using this frequently.
It's almost as weird as the "Register to see the link" for images in my feed reader I started getting here last week.

[Sephiroth]

Noooooooooooo! My feed reader can't open spoiler buttons.
That's going to suck for me if the posters I'm interested in here, start using this frequently.
It's almost as weird as the "Register to see the link" for images in my feed reader I started getting here last week.

Feed reader?

Is there a link i can do some tests?

[Sephiroth]

I wrote a different spoiler code.

Title: Spoiler2
BB Code Tag Name: Spoiler2

Replacement:



<div id="hidespoiler{option}" style="display:none; width:100px" class="myButton" onclick="setTimeout(function() {document.getElementById('hidespoiler{option}').st yle.display='none', document.getElementById('showspoiler{option}').sty le.display='block', document.getElementById('spoilercontent{option}'). style.display='none'}, 10); return false" />Hide Spoiler</div>

<div id="showspoiler{option}" style="display:block; width:100px" class="myButton" onclick="setTimeout(function() {document.getElementById('hidespoiler{option}').st yle.display='block', document.getElementById('showspoiler{option}').sty le.display='none', document.getElementById('spoilercontent{option}'). style.display='block'}, 10); return true" />Show Spoiler</div>


<div id="spoilercontent{option}" style="display:none" class="spoiler_content">{param}</div>





Use {option}: Yes
Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: No
Disable Smilies Within This BB Code: No
Disable Word Wrapping Within This BB Code: No
Disable Automatic Link Parsing Within This BB Code: No


Text goes here [/spoiler2*] without *


Spoiler Button 2 Demo:


About 360haven



360haven is an Forum Devoted To Game modding Fans from all over the world.

An Awesome Community of Xbox 360 Gamers, Modders and Developers who Create & Share Tutorials, Applications, Gfx, Trainers and Gamesaves.

A haven for the l33t.
A scarce paradise for modders.


Example #2;
[spoiler2=5] Text goes here [/spoiler2*] [/spoiler2*] [/spoiler2*] [/spoiler2*] without *



[spoiler2=2][spoiler2=3][spoiler2=4][spoiler2=5] Text goes here

[Crimi Martin]

Sephy, I use the one from feedreader.com
It's called FeedReader3.
My other reader is RssOwl from www.rssowl.org.

Even though they have javascript enabled, they usually don't open spoiler buttons from some manhwa threads I follow.

[Sephiroth]

Sephy, I use the one from feedreader.com
It's called FeedReader3.
My other reader is RssOwl from www.rssowl.org (http://www.rssowl.org).

Even though they have javascript enabled, they usually don't open spoiler buttons from some manhwa threads I follow.

Never used this tool, but try this.

Start the RSSowl.
Go to tab Tools >> Preferences >> Browsers, under Content, Uncheck "Disable javascript in browser"
The Spoiler button doesn't work because the javascript is disabled.

The spoiler button worked after enabling javascript in RSSowl.

[Crimi Martin]

Okay I'll be using RssOwl more than FeedReader3 then. I already have javascript enabled on both, so I can view Youtube/Vimeo videos, don't know why it doesn't work sometimes.
Thank you.

[NMCM]

This is awesome! I'm going to put a lot this to good use..or just mess around with. Still getting the hang of things.