Spawned off of the following thread:
link to a message in this forum

Might we want to make spoilers collapsable instead of just changing the font color of the text?  Discuss.

This'd be an answer from jase, I'd think. How hard would it be?

+100 I view forums at another site and they have collapsible spoilers and sometimes i wonder what i would do without them.  an awesome idea that allows a pursuer of said forum to read on and skip over the spoilers easily without fear of subconsciously scanning them.

Interesting idea, but I don't think it would be THAT useful. I've never 'accidently' scanned spoilers.

In addition to keeping one from accidentally despoilering, they keep spoiler sections a ton smaller. No matter how many lines of text you write, the closed spoiler only takes up 1 line (plus buffer space and title line).

+1

Like in the ‘Linking Thread’   link to a message in this forum this means adding code within the body of a message -  and that needs some changes to the philosophy behind the way that messages and screen generation are handled.

At the moment the fancy stuff (such as quotes and spoilers) use straight HTML  (or perhaps XML) which can be generated at the server and sent directly to your screen.  That HTML then functions properly without any further recourse to code.

In this particular case I suspect a collapsible spoiler could be enabled using code that is processed on YOUR computer rather than the server, either with Java or a similar system.  However, it  still means a change in the philosophy behind the message structures.

I guess that jase will modify the message management philosophy at some point -  but I expect he will do it methodically and implement a consistent strategy that will work across a number of different features.


Anyway - that is my best guess :)  however, I will put my lecturing hat away for a while now :P

Either way, the tag that you type into the message is converted to something else.  There is no <orange> tag in HTML.  :-)  When we type that in to the message, it gets turned into something else when you read the message.  Something that is interpreted on the browser side.  I imagine that it probbaly becomes either a CSS class or a <font> tag.  :-)

It would not be a change in philosophy so much as a more complex application of existing philosophy.

In fact, if you look at the source code you will see that the existing spoiler tag uses a bit of javascript or similar.  That is probably pretty much what the proposal here would do.

On Mouseover is probably less complex though than a colapsing box.  ^^

It could be all done with CSS..

display: none; <-- Will hide
display:; <-- will show

I'd put the spoiler in a DIV.

Then you just remove or add the class or style element to the object on mouse over and mouse out.

I'm imagining it being collapsable/expandable "OnMouseClick" rather than "OnMouseOver".
This message was last edited by the user at 18:10, Mon 06 July 2009.

Kudos to that...

+1 to this idea.

The hard part being... to mouse over an element, it must be visible.  So if you by default turn its display off, you can't mouse over it to make it visible.

Now, what I wonder is...
could we define a class

div.spoiler_collapsed span.spoiler_content {display:hidden}
div.spoiler_expanded span.spoiler_content {display:inline}

Then have a javascript onclick method for the DIV that is defaulting to the spoiler_collapsed class, that toggles it between spoiler_collapsed and spoiler_expanded classes.

Then you would have
[div class=spoiler_collapsed onclick=spoilerClick(this)]This is the Spoiler Title: [span class=spoiler_content]Top Secret Code Here![/span][/div]

I'm thinking I've gotten something similar to work in the past.   (I suppose I should have tried it, but don't really have time to at the moment)

That's how I'd do it.

---

I'll explain my vote.

The way RPoL works now for spoiler text is quite nice for short things. But when you get a whole paragraph, hovering over the text or selecting it becomes annoying.

---

Spoiler text: (Highlight or hover over the text to view)
Small secret text

---

---

Spoiler text: (Highlight or hover over the text to view)
Longer secret text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id nisi quis dolor convallis dignissim. Sed id ultricies dui. Donec lobortis justo sit amet neque hendrerit at congue odio dapibus. Duis in gravida massa. Nullam ullamcorper felis malesuada velit sollicitudin vel sodales enim laoreet. Duis ut rutrum sapien. Donec accumsan nisi eu massa fringilla vestibulum. Quisque interdum est eu risus accumsan nec rutrum leo porta. Sed et ligula ut massa sollicitudin tincidunt. Morbi bibendum euismod interdum. Nam quis viverra elit. Donec eu neque ipsum, porttitor vestibulum urna. Cras leo odio, pharetra ac faucibus non, ultrices eu enim. In hac habitasse platea dictumst. Nullam at ipsum ut felis cursus gravida vel nec sapien.

Phasellus sed leo libero. Cras hendrerit ullamcorper urna sed porttitor. Aliquam iaculis varius tempus. Phasellus ultrices, nisl ac tincidunt pretium, lorem diam eleifend risus, vel luctus urna quam at purus. Morbi imperdiet nulla ut ante dapibus et pellentesque odio sollicitudin. Integer vel tincidunt ligula. Nam sapien mauris, feugiat nec tincidunt a, semper non ipsum. Nullam consequat venenatis mi, at pretium orci suscipit at. Sed malesuada ultrices arcu ac accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc aliquet tempus massa. Quisque ac sem justo, eget aliquam ante. Nulla facilisi. Vestibulum adipiscing leo non magna scelerisque id mollis augue lacinia. Vivamus eu ullamcorper elit. Ut eu felis quam. Morbi blandit justo ut libero tempus vel semper neque ornare. Sed pulvinar tellus eget massa sodales vitae commodo lacus imperdiet. Sed felis magna, convallis non sodales in, fringilla a justo. Pellentesque eu neque justo, nec ornare felis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ut est dui, non condimentum nisi. Integer in ipsum nisl. Ut vehicula mauris sed neque pellentesque ut ullamcorper leo sodales. Quisque posuere congue pulvinar. In hac habitasse platea dictumst. Fusce at lacus quis augue egestas commodo sit amet in neque. Mauris egestas, est eget condimentum pulvinar, purus erat porttitor risus, ac eleifend urna leo nec lorem. Praesent non dui nisl. Vivamus quis risus dui, ac lacinia metus. In id lorem sem. Mauris dictum mauris libero, at convallis dolor. Vestibulum tempor mauris pretium diam aliquam mollis. Quisque mi felis, blandit vel elementum vel, porttitor eget lorem. Donec tristique, dolor in imperdiet condimentum, turpis magna semper turpis, sed ullamcorper odio nisl ut dui. Aenean luctus magna et urna egestas dictum sed id libero. Mauris eu fringilla felis.

Maecenas vel nisi enim. Quisque eget enim est, at tempus magna. Etiam aliquam, turpis non dignissim suscipit, tortor risus interdum purus, eu ultricies justo tellus at dui. Maecenas lorem quam, lobortis et dictum ac, rutrum sit amet nulla. Proin vel libero ipsum, at suscipit neque. Suspendisse vitae diam risus. Integer non gravida justo. Maecenas id lobortis nibh. Phasellus tristique ullamcorper auctor. Morbi rutrum placerat lacus, sit amet sollicitudin libero pulvinar at. Suspendisse potenti. Aenean sed lectus at tortor dignissim vulputate eu malesuada ligula. Morbi sollicitudin urna vitae tortor dapibus condimentum. Suspendisse vel elit suscipit sem scelerisque volutpat. Morbi quam risus, consequat eget dignissim sed, tempor in quam. Quisque et eros est. Ut nec nisl eget purus semper blandit.

Nam aliquet tortor ac tortor lacinia congue. Fusce faucibus venenatis lorem quis hendrerit. Nullam ac aliquet lectus. Donec est risus, ullamcorper non ultrices sed, sodales at libero. Suspendisse nec neque ut ante interdum lobortis. Cras commodo aliquam convallis. Maecenas at metus lectus, semper gravida mi. Aenean in venenatis lacus. Fusce ligula risus, rutrum et blandit id, egestas eget nunc. Praesent sagittis, risus sit amet feugiat tempus, elit felis mollis erat, sit amet dapibus quam mauris eu arcu. Phasellus eget lectus purus. Proin sed arcu ut nibh cursus suscipit a vitae dui. Fusce nibh nisl, dapibus non vehicula ut, imperdiet ac nulla. In hac habitasse platea dictumst. Quisque id eros id neque cursus pellentesque sit amet et diam. Nullam velit turpis, aliquam id rhoncus ut, pharetra vel enim. Aenean id egestas nulla. Proin non eros ipsum, at hendrerit mi. Aenean volutpat lobortis tincidunt. Nulla accumsan tortor sed risus aliquam ultrices.

---

Here's the example I'm thinking of:

http://forums.gleemax.com/show...406&postcount=12

This is a standard feature of vBulletin system, which I think is mySQL coding? basically you type in [spoiler][/spoiler] or [spoilers][/spoilers] both do the same thing, then in the finished post the thing comes up as a spoiler button saying "Show hidden text" as a little clicky button. when the hidden text is show the post becomes longer, when hidden away behind the spoiler tag the post is short and simple.

For a colapsable box it would be OnMouseClick, and involve a little + or - sign or something. :-)

The issue is using one object to control another requires defining and managing ID/Names of objects and interrelating them with Javascript and getting them to work consistently across browsers, and into conflict with other object names in the page.  [shouldn't be a problem, but shouldn't is a funny word in technology terms]

On the other hand, you can often get around that if you have objects modify themselves.  Then you can normally get away with using the "this" pronoun to change their own object properties. No need for object names/IDs and the potential complications around them.

That should be doable as well.  instead of a +/-, just have the box itself collapse down far enough to be out of the way, but still there, and apply the onMouseClick to the box itself.  :-)

There are frameworks to make that easy now...  I've mentioned jQuery as the one I would use.  With that, you can identify the objects via ID in page, and then on your *.js page, you can create all the functions and scripting there.

As far as I'm aware the button-style spoilers don't do one important thing - work for people without javascript enabled.  I've deliberately made all the critical elements of RPoL work without javascript and don't want to go back on that commitment.

As for learning another programming language; I've got far too much on my plate already to even contemplate that.

:-)

I think the goal of working with or without Javascript is a good idea.  It is especially important with the current web browser situation (i.e. there are new ones popping up all the time these days).

:-)

Plus, given the fact that many "naughty-bad-wrong" sites have javascript that transfers viruses and the like to your computer, many people like being able to go to a site without using java.