Suggestion... - TTLG Forums

zombe on 15/9/2005 at 12:40

We have some nice spoiler tags that produce code like:

PHP:

<div class="spoiler">The Butler did it</div>

I would prefer:

PHP:

<div class="spoiler" onClick="sh(this)">The Butler did it</div>

where sh is (with some more reasonable colors mybe):

PHP:

******** type="text/javascript">
function sh(i) {
i.style.backgroundColor=i.style.backgroundColor=='rgb(0, 0, 0)'?'rgb(190, 190, 190)':'rgb(0, 0, 0)'; }
</script>

No more messing around with the mouse trying to mark text and no need to copy to notepad with some browsers to actualy be able to see it ... just click on the spoiler anywhere to unhide/hide it.

So, thoughts?

edit: erm. what the hell is 'code' tag supposed to do?

SubJeff on 15/9/2005 at 12:55

But that is much more complicated than "messing with the mouse" to highlight it. The way it's set up now is an excellent use of the natural highlight-to-reveal.

I'm guessing you have a minority browser that makes it hard to read them. Which one?

And the code tags are so you can post code examples without it affecting the html flow iirc.

zombe on 15/9/2005 at 14:39

"But that is much more complicated than "messing with the mouse" to highlight it. The way it's set up now is an excellent use of the natural highlight-to-reveal.

I'm guessing you have a minority browser that makes it hard to read them. Which one?"

How is it more complicated? :confused:

And the natural highlight-to-reveal doesn't work with at least one minority browser - the one i happened to use (i think it was opera of some sort).

"And the code tags are so you can post code examples without it affecting the html flow iirc."

Yeah ... that was what i thought - but it doesn't seem to work right.

example:

Code:

<div class="spoiler" onClick="sh(this)">The Butler did it</div>

edit: um... wait... it seems to allow html tags :/

Code:

<marquee>sklfag askdgf ajkshgd fkjashgd fjs</marquee>

edit2:
<marquee>sklfag askdgf ajkshgd fkjashgd fjs</marquee>

um... that is odd O_o ... i thought html was off. Since when do we have html back?

Fingernail on 15/9/2005 at 14:47

the highlight thing doesn't work btw it gives me an ERROR ON PAGE in IE6

zombe on 15/9/2005 at 14:55

Quote Posted by Fingernail

the highlight thing doesn't work btw it gives me an ERROR ON PAGE in IE6

IE6 here ... no errors. You made something wrong with copy paste.

And it is not currently working with ALL browsers (for example ie) - i didn't say it does. It is just an example - forgot that IE exists :rolleyes:.

(for ie .style.backgroundColor returns 'rbg(r,g,b)' and firefox 'rgb(r, g, b)')

edit:
Oh ... wait ... did you click it here on the code-tab-bug example? Of course it won't work there!

can't upload any examples anywhere right now - sorry.

Vigil on 15/9/2005 at 15:25

While we're waving our HTML knobs about, a simpler piece of code would be this:

Code:

<div class="spoiler" onclick="this.style.backgroundColor = 'transparent'">The Butler Did It.</div>

Which yields this:
<div class="spoiler" onclick="this.style.backgroundColor = 'transparent'">The Butler Did It.</div>
With no need to embed style-specific color codes into javascript. The onclick behaviour can be abstracted to a function, of course.

Making it toggle off and then back on again without embedding the colors is trickier, as there seems to be no compact way to just unset the new color rule. You could do a style-independent version by changing the classname of the div instead (e.g. from "spoiler" to "spoiler shown" and putting ".shown { background-color: transparent !important; }" in the stylesheet) but this will force most browsers to reflow the page, which will be slower than swapping the background-color directly.

Fingernail on 15/9/2005 at 15:27

now that works :thumb:

zombe on 15/9/2005 at 16:40

Quote Posted by Vigil

While we're waving our HTML knobs about, a simpler piece of code would be this:
<div class="spoiler" onclick="this.style.backgroundColor = 'transparent'">The Butler Did It.</div>
With no need to embed style-specific color codes into javascript. The onclick behaviour can be abstracted to a function, of course.

That is nice too ... but i like it compact (1 javascript and dozens of spoilers). Transparent keyword is a nice find tho (why didn't i think about that) - should be browser independent (don't have ie currently).

PHP:

********>
function sh(i) { i.style.backgroundColor=i.style.backgroundColor=='transparent'?'rgb(0,0,0)':'transparent';}
</script>

... and i like the option to hide it again (like when i realize that the spoiler talks about events i haven't reached yet).

Live example:
<div class="spoiler" onclick="this.style.backgroundColor=this.style.backgroundColor=='transparent'?'rgb(0,0,128)':'transparent';">The Butler Did It.

i think :)</div>

Jakeyboy on 15/9/2005 at 17:58

That's cool, I'd say go for it :thumb:

zombe on 15/9/2005 at 18:50

Stylesheet independent (needs that .spoiler defines color) example:
<div class="spoiler" onclick="this.style.backgroundColor=this.style.backgroundColor=='transparent'?this.style.color:'transparent';"> I didn't do it!

:irw:</div>

At least (http://www.ttlg.com/forums/clientscript/vbulletin_css/style-ef70f300-00007.css) does define color - and i bet every other vbulletin css does also.