Need help? Check out our Support site, then


WordPress.com Forums » Support

Invisible text/spoiler text

  1. tysoncarter
    Member

    Hello everyone. Did a bit of searching but there seems to be no definitive answer so thought I would check in here. My blog reviews movies and I just wondered if I can hide some spoilers with invisible text so people have to highlight it to read or spoiler text like on the imdb forums where you have to hover the cursor over it to read?? I don't want to have to post a separate link to another page with spoilers on like I've seen suggested on other peoples questions, and if there isn't anything like this currently available would it be something that could be implemented in the future? I'm guessing lots of people would use it. Thanks for reading :)

    The blog I need help with is headinavice.wordpress.com.

  2. tysoncarter
    Member

    Anybody??
    http://headinavice.wordpress.com/

  3. janicu
    Member

    Here's a couple of ways to do it. I searched these forums too and for some reason no one suggests using html and making the background the same color as the font color. When you highlight it the spoiler is revealed.

    1) Use span. Here's one example using the html color code for black as the background and text (#000000) and one example showing you can just say "black" instead of using the color code. I have used span on my blog and it stays hidden in the google reader feed too.
    <br /> <span style="color:#000000;background-color:#000000;">TEXT HERE</span></p> <p><span style="color:black;background-color:black;">TEXT HERE</span><br />

    2. I have also tested using div and it works as well on my blog. I think this should also show up hidden in google reader but I haven't tested that.
    <br /> <div style="padding:12px;background-color:#000000;color:#000000;line-height:1.4;"><br /> TEXT HERE<br /> </div><br />

    I hope that helps.

  4. tysoncarter
    Member

    Thanks for your reply, I will have a look and try those suggestions out. Appreciate you taking the time to share this :)

  5. houstonweaver
    Member

    This may be harebrained, but was reading about image opacity and hover to change it and thought if your spoiler was relatively short you could make it an image, set opacity to 0 then set opacity to 1 on hover. You would have to use the CSS customization. Here is the w3c try it editor to look at the germ of the idea.

    http://www.w3schools.com/css/tryit.asp?filename=trycss_image_transparency

    You would just change the img opacity to 0 in this part

    {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

    To this 

    {
opacity:0.0;
filter:alpha(opacity=0); /* For IE8 and earlier */
}

    Note: I did not try this yet in a WordPress blog, but if you have the CSS customization it would probably work. It might be more trouble than it's worth to turn your spoilers into text images though.

    If you like to tinker a LOT, this might be fun to try.

    Alternately you could use the more tag and customize it to say "Spoiler" or some such. But Since your posts already expand into the second page, I don't know if it can be used again.

  6. houstonweaver
    Member

    Oops, forgot the link to the documentation on the more tag ...
    http://en.support.wordpress.com/splitting-content/more-tag/

  7. justpi
    Member

    @houstonweaver: Very good idea. But it doesn't have to be an image: opacity can be used for any element. You just need to add an id to the elements you wish to target. For example, if the spoiler is a paragraph, you'd write this in the HTML editor:
    <p id="spoiler">TEXT HERE</p>

    With this in the CSS editor:

    #spoiler
{
opacity:0;
filter:alpha(opacity=0);
}
#spoiler:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}

    Unfortunately tysoncarter doesn't have the Custom Design upgrade...

  8. houstonweaver
    Member

    Justpi,

    Was just looking into that. Once I posted that I realized that because I had been looking into image opacity, I walked down the garden path and was just trying to formulate how to do it with text when I saw you had done it! Do they both have the downside of showing all the blank space of whatever text would appear on hover? The ideal would be to have something to hover over that would then expand out. Or does yours avoid that? Don't know if there is any way to use display:none but then what would you hover over to get to the hover state?

  9. tysoncarter
    Member

    I'm a little lost with the meaning of the custom design upgrade answer - is that a service I would need to pay for?

    Appreciate all the replies though, but as Houstonweaver mentioned I already use the more tag on the home page to continue each review without clogging up the home page. Still a beginner at all this so the use of codes etc is a little lost on me but I'm trying to read up as much as I can to make my site the best it can be. Thanks again to everyone for replying, ill definitely look into everything mentioned.

  10. justpi
    Member

    @houstonweaver: As you realize, display:none means there'll be nothing to hover over! One solution could be to specify a very small height for the spoiler text, for example add height:10px; to the spoiler CSS and height:auto to the spoiler:hover CSS.

    @tysoncarter: Yes, upgrade means pay for.
    A simple, no-upgrade solution would be this code model in the HTML editor:
    <span style="cursor:help;" title="SPOILER TEXT HERE">VISIBLE TEXT HERE</span>

    This will give you a popup text when you hover over the visible text. See if you like it. Limitation: in contrast to janicu's solutions, the popup text can only be plain continuous text (no special formatting or line breaks etc).

  11. houstonweaver
    Member

    Justpi: thanks for the text size idea.

    Tysoncarter: the great thing about WordPress.com is that you don't have to dabble in the CSS customization unless you want to. You can concentrate on content, which it looks like you have done a great job of...

  12. tysoncarter
    Member

    Thanks again. My aim was to really get the look of the site how i wanted then get some decent content on there and network a bit before I tried anything to fancy. All of these ideas are great to tinker with though over time and I will certainly check them out as I get better with it all. My next mission is linking an image and a new page but that's a whole other question for another topic!! Thanks again to everyone that's answered :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags