The Lounge's spoiler tag

DollyP · Post by **DollyP** » 28 Jun 2011, 16:52

Does anyone know how to emulate the lounge's spoiler tag in html/css? I can make invisible text appear when highlighted but I particular like the hide/show links.

David

Post by **HansV** » 28 Jun 2011, 18:28

You can see the source code for our spoiler tag here: Spoiler BBCode. It involves some JavaScript.

Jezza · Post by **Jezza** » 30 Jun 2011, 09:35

DollyP wrote:Does anyone know how to emulate the lounge's spoiler tag in html/css? I can make invisible text appear when highlighted but I particular like the hide/show links.

David

Probably not what you are looking for but it will give you some pointers using :hover and uses CSS only, I only have FF and IE 6 on this machine so cannot test it on a full range of browsers (alas it does not work in IE6)

Code: Select all

<html>
<title>Use CSS to Show/Hide a DIV</title>
<style>
#spoiler {
border-color:#000000;
border:solid 1px;
padding:6px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8 em;
color:#FFFFFF;
background-color:#FFFFFF;
margin-top:0;
width:600px;
}

#spoiler:hover {
color:#00DD99;
border-top:solid 1px;
border-left:solid 1px;
border-right:solid 1px;
}

h3 {
border-color:#999999;
border-top:solid 1px;
border-left:solid 1px;
border-right:solid 1px;
padding:6px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#000000;
background-color:#DDDDDD;
margin-bottom:0;
width:600px;
}  
</style>

	<body>

		<h3>Spoiler [hover mouse below]</h3>
			<div id="spoiler">peek-a-boo</div>

	</body>
</html>

DollyP · Post by **DollyP** » 30 Jun 2011, 10:41

Thanks for replies.

Hans: I tried to get your code to work in a website as distinct from a BB but couldn't get it to work. It did give me some pointers as to how to proceed and I found some appropriate code samples. I eventually found an excellent example through Stu Nichols' excellent website CssPlay http://www.stunicholls.com/various/jque ... -less.html that does what I want with different styling.

Jezza: Your suggested code is very interesting as it does not use Javascript or jquery, something that I have read on many sites as being impossible. I am nervous about using js for many reasons, not least that I like to understand what my code is doing (whether Basic, vba or web). Your code is simplicity itself. I will be experimenting with it over the weekend and will report back here.

Regards
david

DollyP · Post by **DollyP** » 30 Jun 2011, 15:56

Jezza

I've tested your code and it works perfectly well and nicely with Firefox 5 (Win7x64), with the spoiler text showing whilst on hover. However it doesn't work at all with IE9 so though neat and code light, its a non starter.

Regards
David

Jezza · Post by **Jezza** » 30 Jun 2011, 16:02

DollyP wrote:Jezza

I've tested your code and it works perfectly well and nicely with Firefox 5 (Win7x64), with the spoiler text showing whilst on hover. However it doesn't work at all with IE9 so though neat and code light, its a non starter.

Regards
David

That's a pity, I have a theory which I will work on in regards to parent tags and get back to you

Jezza · Post by **Jezza** » 30 Jun 2011, 16:25

DollyP wrote:Jezza

I've tested your code and it works perfectly well and nicely with Firefox 5 (Win7x64), with the spoiler text showing whilst on hover. However it doesn't work at all with IE9 so though neat and code light, its a non starter.

Regards
David

Try this little tweak

Code: Select all

<html>
<title>Use CSS to Show/Hide a DIV</title>
<style>
#spoiler a{
border-color:#000000;
border:solid 1px;
padding:6px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8 em;
color:#FFFFFF;
background-color:#FFFFFF;
margin-top:0;
width:600px;
}

a:hover {text-indent: 0;} 

#spoiler a:hover {
color:#00DD99;
border-top:solid 1px;
border-left:solid 1px;
border-right:solid 1px;
}

h3 {
border-color:#999999;
border-top:solid 1px;
border-left:solid 1px;
border-right:solid 1px;
padding:6px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#000000;
background-color:#DDDDDD;
margin-bottom:0;
width:600px;
}  



</style>

	<body>

		<h3>Spoiler [hover mouse below]</h3>
			<div id="spoiler"><a href="#">peek-a-boo</a></div>

	</body>
</html>

This is a case of IE not recognising #spoiler:hover if there is not a previous a:hover rule! So I added <a>tags assuming that it should reference itself and then added a "parent" a:hover.

Sorry a complete and utter hack but it works

DollyP · Post by **DollyP** » 30 Jun 2011, 16:52

Hi Jerry

Yes that now works with both IE9 and FF5.

Interesting that it produces very different results on screen. FF5 produces a box the size of the text revealed but displaced a couple of px up into the spoiler hint box. IE9 produces a box the same length as the spoiler hint box and located correctly below it.

Whilst my experience of website design is small (2 reasonably simple websites) I've already come across display oddities particularly with IE, which until the latest version was somewhat cavalier with html standards.

I'm going to work more on your code over the weekend to see if I can solve the differences and create formatting to suit my website. For my current purposes, using hover is more elegant and easier than the alternative. (If I solve the display differences between IE9 and FF5 I'll post the solution for others to see.)

Regards
David

Edited: Forgot there should be a doctype. Adding this made IE appear just like FF.

Jezza · Post by **Jezza** » 30 Jun 2011, 20:06

Try this for starters:

Code: Select all

h3 {
border-color:#999999;
border-top:solid 1px;
border-left:solid 1px;
border-right:solid 1px;
padding:6px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#000000;
background-color:#DDDDDD;
<!--margin-bottom:0;-->
width:600px;
}

Eileen's Lounge

The Lounge's spoiler tag

The Lounge's spoiler tag

Re: The Lounge's spoiler tag

Re: The Lounge's spoiler tag

Re: The Lounge's spoiler tag

Re: The Lounge's spoiler tag

Re: The Lounge's spoiler tag

Re: The Lounge's spoiler tag

Re: The Lounge's spoiler tag

Re: The Lounge's spoiler tag