Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Reducing Code

Posted by: Masashi Feb 21 2007, 05:38 PM

Hey,

I am looking for a code that hides text until a button is pressed.
It's similar to the Spoiler BB code

Any help would be greatly apprieciated.

Posted by: Darin McGrew Feb 21 2007, 06:41 PM

I suppose you could use something like http://meyerweb.com/eric/css/edge/popups/demo.html. Another approach I've seen is to use white text on a white background, which shows up when you select the text in most browsers.

Posted by: Effovex Feb 21 2007, 07:21 PM

I wrote a simple, accessible, standard based one, but it doesn't seem to work in IE for reasons I can't fathom.

Edit: the structure is as follow; the script takes care of the rest.

HTML

<div class=spoiler><div>content</div>

Attached File(s)

text.html ( 1.66k ) Number of downloads: 472

Posted by: Masashi Feb 21 2007, 10:35 PM

Thanks to both of you.

@Darin McGrew

I checked out the site you have me, but it didn't seem to work for me. The white is a good idea, but I might as well add it. I'm looking for the code to save space. Thanks anyways.

@Effovex

That code would be wonderful if it worked in IE.

Posted by: Effovex Feb 21 2007, 11:39 PM

Well, it does now. BWAHAHA! There's a couple of stupid bugs in IE that I found some code to get around.

Untested in IE5, but works in Opera 9, Firefox 1.5 and IE6.

Attached File(s)
text.html ( 1.33k ) Number of downloads: 475

Posted by: John Pozadzides Feb 22 2007, 12:51 AM

QUOTE(Effovex @ Feb 21 2007, 10:39 PM)

Well, it does now. BWAHAHA!

I gotta admit, that is pretty cool.

All of this got me to thinking and I came up with a totally new way to do it using nothing but CSS. The following is 100% valid HTML+CSS and it works perfectly in Opera and Firefox!

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>CSS Spoiler Test</title>

<STYLE TYPE="text/css" MEDIA=screen></STYLE>

</head>
<body>

<p>Why did the chicken cross the road?</p>
<a name="here">Answer (Hover to reveal):</a><a href="#here">To get to the other side.</a>

</BODY>
</HTML>

...The only problem is that it doesn't work in Internet Explorer 6.

Let me know if anyone can figure that one out and we might just have invented the fastest, easiest, lightest way to do all this.

John

Posted by: pandy Feb 22 2007, 02:22 AM

I figured out that you have forgotten how IE treats in-page achors.

Posted by: Frederiek Feb 22 2007, 04:04 AM

QUOTE(Effovex @ Feb 22 2007, 05:39 AM)

Well, it does now. BWAHAHA! There's a couple of stupid bugs in IE that I found some code to get around.

Untested in IE5, but works in Opera 9, Firefox 1.5 and IE6.

In Safari, I get a javascript error: "DOM exception 7" on both this.innerText = "Hide"; and this.innerText = "Show"; of the function ToggleVisibility(). Commenting them out, makes it work without an error.

I don't know what effect that will have on other (PC) browsers, though.

Posted by: Effovex Feb 22 2007, 07:31 AM

I've removed them. They were actually a fossil of an earlier iteration that used the button tag, but that had some problems in Firefox so I tested with "input" and "value" and forgot to remove the innerText after that test proved successful.

I had a working version in Opera within 30 minutes - it took me an additional 30 minutes to make it work in Firefox, and about two more hours for IE6.

Posted by: Christian J Feb 22 2007, 07:33 AM

Personally I don't see the point in doing dynamic things like this with CSS, that's what Javascript is for IMO.

Anyway, here's a way to do it with CSS :hover pseudo class (note the bugfix for IE6):

CODE

a {text-decoration: none;}
a:link .a, a:visited .a {visibility: hidden;}
a:hover {position: static;} /* IE6 bugfix */
a:hover .a {visibility: visible;}

<a href="#"><span class="q">Question</span><span class="a"> Answer</span></a>

Here's a way to use the :active pseudo class (in Firefox and Opera the answer is only visible as long as the mouse button is depressed, in IE6 only as long as the link is focused):

CODE

a {text-decoration: none;}
a:link .a, a:visited .a {visibility: hidden;}
a:hover {position: static;} /* IE6 bugfix */
a:active .a {visibility: visible;}

<a href="#"><span class="q">Question</span><span class="a"> Answer</span></a>

Haven't tested in Safari, IE5 or IE7.

Posted by: Frederiek Feb 22 2007, 11:27 AM

FYI, both work in Safari as you intended. The :active pseudo class works, as one could expect, the same as Firefox and Opera.

Posted by: Masashi Feb 22 2007, 08:47 PM

Effovex,

You are the best! Thank you. This is wonderful.
Thanks again to everyone who helped out, I'm very grateful.

Edit;

Crap. The place I am using it has Javascript disabled. Anyway I could use another one to get the same affect?

Posted by: Darin McGrew Feb 22 2007, 10:27 PM

Well, if JavaScript is unavailable/disabled, then you're left with CSS-based approaches, white-on-white text, and similar techniques that don't rely on JavaScript.

Posted by: Masashi Feb 23 2007, 05:48 PM

Crap. Ok, thanks anyways xD