Forum    Members    Search    FAQ

Board index » Website Things » Suggestions/Requests




Post new topic  Reply to topic  [ 7 posts ] 
 
Author Message
 Post subject: spoiler box
 Post Posted: Mon May 18, 2009 3:22 am 
Print Book 2 & Draw Book 3 Supporter Year of the Dwagon Supporter
Offline
Joined: Sat May 02, 2009 2:54 am
Posts: 75
Website: http://www.swchome.com
Location: Washington State
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

  • Tip this post

    Make Anonymous
  • Top 
       
     Post subject: Re: spoiler box
     Post Posted: Mon May 18, 2009 4:04 am 
    This user is a Tool! Pin-up Calendar and New Art Team Supporter Here for the 10th Anniversary Has collected at least one unit
    Offline
    Joined: Wed Apr 22, 2009 11:26 pm
    Posts: 117
    code from GiantitP

    Code:
    <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>

  • Tip this post

    Make Anonymous
  • Top 
       
     Post subject: Re: spoiler box
     Post Posted: Tue Jun 09, 2009 2:36 am 
    Offline
    Joined: Sun May 31, 2009 12:55 am
    Posts: 49
    I second this request.

  • Tip this post

    Make Anonymous
  • Top 
       
     Post subject: Re: spoiler box
     Post Posted: Tue Jun 09, 2009 3:48 pm 
    User avatar
    Offline
    Joined: Tue May 26, 2009 10:07 pm
    Posts: 66
    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.

  • Tip this post

    Make Anonymous
  • Top 
       
     Post subject: Re: spoiler box
     Post Posted: Sat Jun 20, 2009 1:10 pm 
    User avatar
    Offline
    Joined: Tue May 26, 2009 10:07 pm
    Posts: 66
    Okay, here's a simple HTML page showing how it's done:
    Code:
    <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.

  • Tip this post

    Make Anonymous
  • Top 
       
     Post subject: Re: spoiler box
     Post Posted: Wed Jun 24, 2009 8:06 am 
    Site Admin
    Offline
    Joined: Fri Dec 19, 2008 10:49 am
    Posts: 187
    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

  • Tip this post

    Make Anonymous
  • Top 
       
     Post subject: Re: spoiler box
     Post Posted: Wed Jun 24, 2009 8:07 am 
    Site Admin
    Offline
    Joined: Fri Dec 19, 2008 10:49 am
    Posts: 187
    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

  • Tip this post

    Make Anonymous
  • Top 
       
    Display posts from previous:  Sort by  
     
    Post new topic  Reply to topic  [ 7 posts ] 

    Board index » Website Things » Suggestions/Requests


    Who is online

    Users browsing this forum: No registered users and 5 guests

     
     

     
    You cannot post new topics in this forum
    You cannot reply to topics in this forum
    You cannot edit your posts in this forum
    You cannot delete your posts in this forum
    You cannot post attachments in this forum

    Search for:
    Jump to: