NOTICE Notice: This is an old thread. The last post was 1161 days ago. If your post is not directly related to this discussion please consider making a new thread.
Results 1 to 4 of 4

Thread: Spoiler Alert!

  1. #1

    Cool Spoiler Alert!

    This is a BB Code to hide content from people who don't want to accidentally see it- usually used for "spoilers" about TV Shows, Movies, or sporting events.

    Example:

    I just saw this awesome movie called Titanic! Anyone else see it?

    Spoiler Alert!

    I can't believe Leonardo DeCaprio dies!!! How did you like them apples!?!?!



    Tested and working on VB 3.x, 4.x, and 5.x!
    Tested and working in Chrome, IE, Opera, and Safari


    Note- Because it uses JavaScript you must refresh the page after submitting a post so the JS loads correctly. Other people viewing the post after you will not have any problems.

    This BBCode relies on a background image (bop5-alert-bk.png) that must be uploaded to your /images/misc/ folder.

    To install download the XML if you have the BBCode XML importer or add a custom BBCode with these settings:

    Title: Spoiler Alert
    BB Code Tag Name: sa
    Replacement:
    Code:
    <div style="margin: 5px 20px 5px 20px;"> 
    <div style="margin-bottom:2px; font-size: 80%;">
    <strong>Spoiler Alert! </strong><input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" 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.innerText = ''; this.value = 'Show'; }" /> 
    </div> 
    <div style="background: url(images/misc/bop5-alert-bk.png); margin: 0px; padding: 6px; border: 3px groove red; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75); box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);">
    <div style="display: none;"><div style="background: rgba(255, 255, 255, 0.8); padding: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">{param}</div></div>
    </div>
    </div>
    Example: [sa]Spoiler Example[/sa]
    Description: This is a Spoiler BBCode to hide content until someone clicks on it.
    Use {Option}: No

    Button Image: (Image attached)

    Remove Tag if Empty: Yes
    All other settings: No
    Attached Thumbnails Attached Thumbnails spoiler-alert-icon.gif   bop5-alert-bk.png  
    Attached Files Attached Files
    -Joe

  2. #2
    Can this be made so it fits the width of the content?

  3. #3
    The short answer is no.

    The long answer is possibly with additional JavaScript, but it is out of my league.
    -Joe

  4. #4
    It's probably better this way, more of a mystery.

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •