Spoiler tags / Discussion

This is the discussion related to the wiki page Spoiler tags.

leiger 03 Nov 2009 13:32

Okay, I've edited this site's CSS, and the example is working now.

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

Maybe a popup can do the same trick

Steven Heynderickx 20 Nov 2009 23:04

This is quite big… the spoiler tag is easely spoiled because it is so big… maybe a popup with a small "hot" zone that triggers the popup is also a good idea…

Can you give an example site where this is used?

---

A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.

Last edited on 20 Nov 2009 23:05 by Steven Heynderickx Show more

Re: Maybe a popup can do the same trick

(account deleted) 21 Nov 2009 01:48

This works pretty well to allow the spoiler to be small when hidden and expand on hover. It acts a bit like a pop-up. I tweaked the colors and added some rounded corners.

/* Add a spoiler tag */
 
.spoiler {
    background-color: #FF0000;
    padding: 3px 10px;
    color: #FF0000;
    width: 5px;
    height: 5px;
    overflow: hidden;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
 
.spoiler:hover {
    background-color: #E5FFE7;
    color: #000000;
    width: 100%;
    height: 100%;
}

You can test it on this site on the sample above using Firefox with Web Developer or Firebug.

[edit - I just included this on one of my sites. View live demo.]
-Ed

---

Community Admin

Last edited on 21 Nov 2009 02:31 by (account deleted) Show more

Re: Maybe a popup can do the same trick

leiger 21 Nov 2009 13:14

Hmm, that looks like a better idea. I think having the text "spoiler" would be better… but as that can't be done with CSS it means this needs to become a CSI and become a bit more complicated (I'd prefer to keep it simple)

Will have a look at how your code works later , :)

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

Re: Maybe a popup can do the same trick

(account deleted) 21 Nov 2009 15:25

I think having the text "spoiler" would be better…

Yes, I was thinking that maybe a background image could be worked somehow to act as the "spoiler" text. Is color: transparent; supported across all browsers? I seem to recall that it isn't for some reason.

If it is, it should be a simple matter to make the text transparent and then place a background image in the div to hide the spoiler content and then undo all that on the hover event.

-Ed

---

Community Admin

Re: Maybe a popup can do the same trick

leiger 21 Nov 2009 13:15

Has only been used on a private site… so linking you there won't really help much ;-)

I use it as part of a "quiz" in a way… for revision, to guess the answer before I check if I got it correct or not.

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

CSS Competition

leiger 22 Dec 2009 01:49

Have got an updated version done now. http://css-competition.wikidot.com/package:5/noredirect/true
When the competition ends I'll update this page with the new code.

Looking for thoughts, opinions, suggestions, etc…

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server