Spoilers

Home Forums Forum Spoilers

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #294
    DeVaultSetter
    Keymaster

      Looking through Robin’s style pack for spoiler tags – came up empty. A basic spoiler tag is as good as any, and not being a frequent user, it’s much further down the priority list. 🙂

      #1335

      I had an idea on how to hack something together via CSS. I could set up a style for a custom class for the default to be black text on a black background and then use the hover pseudo-class to change the font to normal and remove the background color. On the user side, you’d need to wrap the stuff you want to denote as a spoiler in a span tag and add the class to the class attribute

      Wouldn’t be as nice as the collapsible box we’re used to but should do in a pinch

      #1346
      DeVaultSetter
      Keymaster

        There’s quite a bit going with it, because obviously there has to be a button that triggers the event.
        Here’s a recent thread where Milan has commented. There is still this fork of an early Tom Braider iteration, very old and now read-only. Tom Braider had the following code for WP 4.5:

        `<?php
        /*
        Plugin Name: Tiny Spoiler
        Plugin URI: http://www.tomsdimension.de/wp-plugins/tiny-spoiler
        Description: [spoiler name=”top secret”]shows/hides this text[/spoiler]
        Version: 0.2
        Author: Tom Braider
        Author URI: http://www.tomsdimension.de
        */

        /**
        * adds stylesheet
        */
        function insert_spoiler_css()
        {
        echo “<style type=’text/css’>
        .spoiler { border: 1px #000 dashed; }
        .spoiler legend { padding-right: 5px; background: white; }
        .spoiler legend input { width: 30px; }
        .spoiler div { margin: 0px; overflow: hidden; height: 0; }
        </style>\n”;
        }
        add_action(‘wp_head’, ‘insert_spoiler_css’);

        /**
        * adds javascript
        */
        function insert_spoiler_js()
        {
        echo <<<ENDJS
        <script type=’text/javascript’>
        function tiny_spoiler( id )
        {
        var s = document.getElementById( id ).style;
        var divs = document.getElementsByTagName(‘div’);

        if ( s.height == ‘auto’ )
        {
        s.height = 0;
        s.padding = 0;
        document.getElementById( id + ‘_button’ ).value = ‘+’;
        for ( var i = 0; i < divs.length; i++ )
        {
        if ( divs[i].parentNode.id == id )
        divs[i].style.height = 0;
        }

        }
        else
        {
        s.height = ‘auto’;
        s.padding = ’10px’;
        document.getElementById( id + ‘_button’ ).value = ‘-‘;
        for ( var i = 0; i < divs.length; i++ )
        {
        if ( divs[i].parentNode.id == id )
        divs[i].style.height = ‘auto’;
        }
        }
        }
        </script>
        ENDJS;
        }

        add_action(‘wp_footer’, ‘insert_spoiler_js’);

        /**
        * creates spoiler code
        *
        * @param string $content spoiler content
        * @param string $name title
        * @return string spoiler code
        */
        function replace_spoiler_tag( $content, $name )
        {
        $content = do_shortcode( $content );
        $caracteres = array(‘a’,’b’,’c’,’d’,’e’,’f’,’g’,’h’,’i’,’j’,’k’,’l’,’m’,’n’,’o’,’p’,’q’,’r’,’s’,’t’,’u’,’v’,’w’,’x’,’y’,’z’);
        $addition = ”;
        for ( $i = 0; $i < 10; $i++ )
        $addition .= $caracteres[rand(0,25)];
        $id = str_replace(‘ ‘, ”, $name).$addition;
        $s = ‘<fieldset class=”spoiler”>
        <legend>
        <input type=”button” onclick=”tiny_spoiler(\”.$id.’\’)” id=”‘.$id.’_button” value=”+” />
        ‘.$name.’
        </legend>
        <div id=”‘.$id.'”>’
        .$content.’
        </div>
        </fieldset>’;
        return $s;
        }

        /**
        * parses parameters
        *
        * @param string $atts parameters
        * @param string $content spoiler content
        * @return unknown
        */
        function spoiler_shortcode( $atts, $content )
        {
        extract(shortcode_atts(array(
        ‘name’ => ‘Spoiler’
        ), $atts));
        return replace_spoiler_tag( $content, $name );
        }
        add_shortcode(‘spoiler’, ‘spoiler_shortcode’);
        ?>`

        Do you think we could zhuzh it up a bit for good effect?

        #1350

        Just implemented a basic spoiler tag!

        <span class="stearnvault-spoiler">This is a spoiler</span>

        This is a spoiler

        Hover over the black box with the cursor to reveal it. Will that work?

        #1352
        DeVaultSetter
        Keymaster

          Pretty good, thanks!
          Along with the black box you could have the text “hover to reveal” or similar – depends how long the text is of course. Any chance it could it be placed on the menu?

          #1354

          Will need to play with it some to see if I can get the note added. It’s not letting me change the background color in the ::after style block but that may be due to something else. Not sure if it’s something I can fix or not but I’ll try!

          No idea how to add it to the menu but I’ll do some reading on it. We may need a plugin for customization like that, though.

          #1357

          Still looking into adding the note but I’ve confirmed that the spoiler works on mobile by tapping the hidden text. Also, it looks like a plugin is required to add options to the editor for some reason. Will look into that! Surprised it’s not part of WordPress as it’s kind of a basic feature

          #1404
          DeVaultSetter
          Keymaster

            In the meantime, why not add it as a extra feature in the forum stickie? Seems like a good home, as it is for those coming to grief with special characters such as less_than ampersands greater_thans. 😛

            #1412

            And added!

          Viewing 9 posts - 1 through 9 (of 9 total)
          • You must be logged in to reply to this topic.

          Home Forums Forum Spoilers