spoiler box

What features and fixes would you like to see here at erfworld.com?

spoiler box

Postby konmanrocks » Mon May 18, 2009 3:22 am

can we get a spoiler box as seen in the giantitp.com/forums the brown box than you click on to expand?

just another idea that i think works well in a forums environment
konmanrocks
YOTD Supporter!
YOTD Supporter!
 
Posts: 74
Joined: Sat May 02, 2009 2:54 am
Location: Washington State

Re: spoiler box

Postby Ichthus » Mon May 18, 2009 4:04 am

code from GiantitP

Code: Select all
<div class="pre-spoiler">
  <span style="float: left; padding-top: 2px;">Spoiler</span> <input value="Show" style="margin: 0px; padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}" type="button">
</div>
<div>
  <div class="spoiler" style="display: none;">{{{1}}}</div>
</div>
Ichthus
 
Posts: 112
Joined: Wed Apr 22, 2009 11:26 pm

Re: spoiler box

Postby Gerwulf » Tue Jun 09, 2009 2:36 am

I second this request.
Gerwulf
 
Posts: 49
Joined: Sun May 31, 2009 12:55 am

Re: spoiler box

Postby Arkenputtyknife » Tue Jun 09, 2009 3:48 pm

I would prefer a method that did not rely on JavaScript. As far as possible I browse with JS disabled, since it causes endless headaches with every browser I've ever used, even the most up-to-date ones.

Style sheets are capable of making text invisible, or disappear altogether, until the mouse enters the area. I've seen this used on some sites to make pull-down menus without a line of JS anywhere.
Grammar: It's not the law, it's just a good idea.
User avatar
Arkenputtyknife
 
Posts: 66
Joined: Tue May 26, 2009 10:07 pm

Re: spoiler box

Postby Arkenputtyknife » Sat Jun 20, 2009 1:10 pm

Okay, here's a simple HTML page showing how it's done:
Code: Select all
<html>
    <head>
        <style>
            dl.spoiler dd {visibility: hidden;}
            dl.spoiler:hover dd {visibility: visible;}
        </style>
    </head>
    <body>
        some text
        <dl class='spoiler'>
            <dt>Spoiler</dt>
            <dd>This stuff is invisible</dd>
        </dl>
        more text
    </body>
</html>

Copy it into an HTML file, open it in your browser, and mouse over the spoiler to see it. Substitute whatever you prefer for the dl…dt…dd.

As you can see, it's much simpler than the JavaScript (most things are, in my experience; JavaScript is a bitch—should never have been invented) and almost laughably obvious. What's more, it's versatile; you could, for example, use color and background properties to blank out the spoiler rather than visibility.

Unfortunately, thanks to the :hover selector, I can't see a way of doing this in an inline 'style=' qualifier, but I really can't see why there should be any problem with putting the style in the page template header or a style sheet.
Grammar: It's not the law, it's just a good idea.
User avatar
Arkenputtyknife
 
Posts: 66
Joined: Tue May 26, 2009 10:07 pm

Re: spoiler box

Postby harknell » Wed Jun 24, 2009 8:06 am

This is a test of the new spoiler tag:

Spoiler following!:

Spoiler: show
This is a test. dwagons are really just big chickens is suits.
Webmaster for the comic Stupid and Insane Defenders Against Chaos: http://www.onezumi.com
Webmaster for the comic Erfworld: http://www.erfworld.com
harknell
Site Admin
 
Posts: 189
Joined: Fri Dec 19, 2008 10:49 am

Re: spoiler box

Postby harknell » Wed Jun 24, 2009 8:07 am

Seems to be working! Let me know if it doesn't work for anyone in any browser/system.
Webmaster for the comic Stupid and Insane Defenders Against Chaos: http://www.onezumi.com
Webmaster for the comic Erfworld: http://www.erfworld.com
harknell
Site Admin
 
Posts: 189
Joined: Fri Dec 19, 2008 10:49 am


Return to Suggestions/Requests

Who is online

Users browsing this forum: No registered users and 0 guests