The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Reducing Code
Masashi
post Feb 21 2007, 05:38 PM
Post #1





Group: Members
Posts: 4
Joined: 21-February 07
Member No.: 1,983
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.

This post has been edited by Masashi: Feb 21 2007, 05:41 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 21 2007, 06:41 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
I suppose you could use something like Eric Meyer's CSS-based popups. 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Effovex
post Feb 21 2007, 07:21 PM
Post #3


Serious Coder
*****

Group: Members
Posts: 251
Joined: 6-January 07
From: Sherbrooke, Qc, Canada
Member No.: 1,477
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>



This post has been edited by Effovex: Feb 21 2007, 07:33 PM


Attached File(s)
Attached File  text.html ( 1.66k ) Number of downloads: 472
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Masashi
post Feb 21 2007, 10:35 PM
Post #4





Group: Members
Posts: 4
Joined: 21-February 07
Member No.: 1,983
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Effovex
post Feb 21 2007, 11:39 PM
Post #5


Serious Coder
*****

Group: Members
Posts: 251
Joined: 6-January 07
From: Sherbrooke, Qc, Canada
Member No.: 1,477
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.

This post has been edited by Effovex: Feb 21 2007, 11:40 PM


Attached File(s)
Attached File  text.html ( 1.33k ) Number of downloads: 475
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John Pozadzides
post Feb 22 2007, 12:51 AM
Post #6


WDG Founder
******

Group: Root Admin
Posts: 529
Joined: 3-August 06
From: Magnolia, TX
Member No.: 2
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><!--
a:link { color: white; background: white }
a:visited { color: #800080; background: none }
a:hover  { color: green; background: #FFD700 }
--></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. wacko.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 22 2007, 02:22 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I figured out that you have forgotten how IE treats in-page achors. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 22 2007, 04:04 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Effovex
post Feb 22 2007, 07:31 AM
Post #9


Serious Coder
*****

Group: Members
Posts: 251
Joined: 6-January 07
From: Sherbrooke, Qc, Canada
Member No.: 1,477
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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 22 2007, 07:33 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 22 2007, 11:27 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
FYI, both work in Safari as you intended. The :active pseudo class works, as one could expect, the same as Firefox and Opera.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Masashi
post Feb 22 2007, 08:47 PM
Post #12





Group: Members
Posts: 4
Joined: 21-February 07
Member No.: 1,983
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?

This post has been edited by Masashi: Feb 22 2007, 08:50 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 22 2007, 10:27 PM
Post #13


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Masashi
post Feb 23 2007, 05:48 PM
Post #14





Group: Members
Posts: 4
Joined: 21-February 07
Member No.: 1,983
Crap. Ok, thanks anyways xD
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 02:56 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC