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
The Lounge's spoiler tag
-
- Administrator
- Posts: 78608
- Joined: 16 Jan 2010, 00:14
- Status: Microsoft MVP
- Location: Wageningen, The Netherlands
Re: The Lounge's spoiler tag
You can see the source code for our spoiler tag here: Spoiler BBCode. It involves some JavaScript.
Best wishes,
Hans
Hans
-
- 5StarLounger
- Posts: 847
- Joined: 24 Jan 2010, 06:35
- Location: A Magic Forest in Deepest, Darkest, Kent
Re: The Lounge's spoiler tag
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)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
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>
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
-
- Lounger
- Posts: 46
- Joined: 08 Feb 2010, 08:50
Re: The Lounge's spoiler tag
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
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
-
- Lounger
- Posts: 46
- Joined: 08 Feb 2010, 08:50
Re: The Lounge's spoiler tag
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
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
-
- 5StarLounger
- Posts: 847
- Joined: 24 Jan 2010, 06:35
- Location: A Magic Forest in Deepest, Darkest, Kent
Re: The Lounge's spoiler tag
That's a pity, I have a theory which I will work on in regards to parent tags and get back to youDollyP 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
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
-
- 5StarLounger
- Posts: 847
- Joined: 24 Jan 2010, 06:35
- Location: A Magic Forest in Deepest, Darkest, Kent
Re: The Lounge's spoiler tag
Try this little tweakDollyP 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
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>
Sorry a complete and utter hack but it works
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
-
- Lounger
- Posts: 46
- Joined: 08 Feb 2010, 08:50
Re: The Lounge's spoiler tag
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.
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.
-
- 5StarLounger
- Posts: 847
- Joined: 24 Jan 2010, 06:35
- Location: A Magic Forest in Deepest, Darkest, Kent
Re: The Lounge's spoiler tag
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;
}
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it