...

View Full Version : Couple of bugs I'm not sure how to fix - Javascript spoiler



Dave.
10-12-2011, 11:14 PM
I've put together a spoiler bb code, and I've noticed 2 bugs with it - I'm thinking that it's to do with the javascript end of the code.

when the code is used, the page has to be refreshed for the spoiler to open and work correctly, also if there is 2 spoilers on the same page, if i click the second one, it opens the first one and not itself.
I didn't type the javascript code I only did the html and css end, so I'm not sure what's going on. If any of you can help me I'd be really grateful.

Here is the code:


<html>
<head>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
color: #494949;
font-size: 10pt;
font-weight:bold;
text-align:left;
background-color: #cbeafe ;
border-top: 1px solid #9dc2d9;
border-left: 1px solid #9dc2d9;
border-right: 1px solid #9dc2d9;
border-bottom: 2px solid #9dc2d9;
padding: 2px;
width:90%;
min-height:18px;
margin: 1px auto 1px auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow:0 0 2px #cbeafe;
-webkit-box-shadow:0 0 2px #cbeafe;
}
.show
{
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
width:25%px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
.hide
{
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
min-width:25px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
</style>
<script type="text/javascript">
function hide(id){
document.getElementById(id).style.display = 'none';
}
function show(id){
document.getElementById(id).style.display = '';
}
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
</head>
<body>
<div class="spoiler"><img src="http://i.imgur.com/s5tS1.png" align="left"><img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div id="show"><input type="button" class="show" onclick="hide('show'); show('hide'); showSpoiler(this);" value="Show" />
</div>
<div id="hide" class="inner" style="display:none;">
<input type="button" class="hide" onclick="hide('hide'); show('show'); showSpoiler(this);" value="Hide" />
<br /><br />{param}<br /></br>
</div>
</div>
</body>
</html>

Old Pedant
10-12-2011, 11:38 PM
Way too complex. Rewritten to make it simpler...and to work.

And you don't need separate styles for .hide and .show


<html>
<head>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
color: #494949;
font-size: 10pt;
font-weight:bold;
text-align:left;
background-color: #cbeafe ;
border-top: 1px solid #9dc2d9;
border-left: 1px solid #9dc2d9;
border-right: 1px solid #9dc2d9;
border-bottom: 2px solid #9dc2d9;
padding: 2px;
width:90%;
min-height:18px;
margin: 1px auto 1px auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow:0 0 2px #cbeafe;
-webkit-box-shadow:0 0 2px #cbeafe;
}
.show, .hide
{
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
width:100px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
</style>
<script type="text/javascript">
function showSpoiler(show)
{
document.getElementById("hide").style.display = show ? "block" : "none";
document.getElementById("show").style.display = show ? "none" : "block";
}
</script>
</head>
<body>
<div class="spoiler">
<img src="http://i.imgur.com/s5tS1.png" align="left">
<img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div id="show">
<input type="button" class="show" onclick="showSpoiler(true);" value="Show" />
</div>
<div id="hide" class="inner" style="display:none;">
<input type="button" class="hide" onclick="showSpoiler(false);" value="Hide" />
<br /><br />
{param}
<br /></br>
</div>
</div>
</body>
</html>

Old Pedant
10-12-2011, 11:40 PM
But if you want to put two of these on a page, then you have to do a lot of restructuring. You can't use the same id more than once on a page.

Old Pedant
10-12-2011, 11:48 PM
Here's a version for multiple spoilers on same page.

Noted that *NOTHING* uses an ID. On purpose.



<html>
<head>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
color: #494949;
font-size: 10pt;
font-weight:bold;
text-align:left;
background-color: #cbeafe ;
border-top: 1px solid #9dc2d9;
border-left: 1px solid #9dc2d9;
border-right: 1px solid #9dc2d9;
border-bottom: 2px solid #9dc2d9;
padding: 2px;
width:90%;
min-height:18px;
margin: 1px auto 1px auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow:0 0 2px #cbeafe;
-webkit-box-shadow:0 0 2px #cbeafe;
}
.inner input {
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
width:100px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
</style>
<script type="text/javascript">
function showSpoiler(btn, show)
{
var node = btn;
while ( node.className == null || node.className != "spoiler" )
{
node = node.parentNode;
if ( node == null )
{
alert("The html for spoiler is invalid");
return;
}
}
var inners = node.getElementsByTagName("div");
inners[0].style.display = show ? "none" : "block";
inners[1].style.display = show ? "block" : "none";
}
</script>
</head>
<body>
<div class="spoiler">
<img src="http://i.imgur.com/s5tS1.png" align="left">
<img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div class="inner">
<input type="button" onclick="showSpoiler(this, true);" value="Show" />
</div>
<div class="inner" style="display:none;">
<input type="button" onclick="showSpoiler(this, false);" value="Hide" />
<br /><br />
{param}
<br /></br>
</div>
</div>
lots of irrelevant junk <br/>
lots of irrelevant junk <br/>
lots of irrelevant junk <br/>
lots of irrelevant junk <br/>
lots of irrelevant junk <br/>
lots of irrelevant junk <br/>
<div class="spoiler">
<img src="http://i.imgur.com/s5tS1.png" align="left">
<img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div class="inner">
<input type="button" onclick="showSpoiler(this, true);" value="Reveal" />
</div>
<div class="inner" style="display:none;">
<input type="button" onclick="showSpoiler(this, false);" value="Vanish" />
<br /><br />
{param}
<br /></br>
</div>
</div>


</body>
</html>

Here, the requirement is that each <div class="spoiler"> have only and exactly TWO contained <div>s. Again, we could get rid of that requirement if it was really necessary.

Dave.
10-13-2011, 12:04 AM
Here's a version for multiple spoilers on same page.

Noted that *NOTHING* uses an ID. On purpose.

*snip*

Here, the requirement is that each <div class="spoiler"> have only and exactly TWO contained <div>s. Again, we could get rid of that requirement if it was really necessary.

wow. excellent, you're awesome:)
thank you so much.

goodysman
10-17-2011, 12:36 AM
hello, is there any way to do this : when i use the spoiler for the second item , i want it to be shown and the same time , the first item to be hidden ? is that possible?

Old Pedant
10-17-2011, 01:53 AM
Like this, you mean?


<html>
<head>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
color: #494949;
font-size: 10pt;
font-weight:bold;
text-align:left;
background-color: #cbeafe ;
border-top: 1px solid #9dc2d9;
border-left: 1px solid #9dc2d9;
border-right: 1px solid #9dc2d9;
border-bottom: 2px solid #9dc2d9;
padding: 2px;
width:90%;
min-height:18px;
margin: 1px auto 1px auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow:0 0 2px #cbeafe;
-webkit-box-shadow:0 0 2px #cbeafe;
}
.inner input {
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
width:100px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
</style>
<script type="text/javascript">
function showSpoiler(btn, show)
{
var node = btn;
while ( node.className == null || node.className != "spoiler" )
{
node = node.parentNode;
if ( node == null )
{
alert("The html for spoiler is invalid");
return;
}
}
// node now refers to the clicked on <div class="spoiler">
var sGroup = document.getElementById("spoilerGroup");
var divs = sGroup.getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
var div = divs[d];
if ( div.className == "spoiler" )
{
var dShow = ( div == node ) ? show : false;
var inners = div.getElementsByTagName("div");
inners[0].style.display = dShow ? "none" : "block";
inners[1].style.display = dShow ? "block" : "none";
}
}
}
</script>
</head>
<body>
<div id="spoilerGroup">
<div class="spoiler">
<img src="http://i.imgur.com/s5tS1.png" align="left">
<img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div class="inner">
<input type="button" onclick="showSpoiler(this, true);" value="Show" />
</div>
<div class="inner" style="display:none;">
<input type="button" onclick="showSpoiler(this, false);" value="Hide" />
<br /><br />
FIRST SPOILER
<br /></br>
</div>
</div>
<div class="spoiler">
<img src="http://i.imgur.com/s5tS1.png" align="left">
<img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div class="inner">
<input type="button" onclick="showSpoiler(this, true);" value="Reveal" />
</div>
<div class="inner" style="display:none;">
<input type="button" onclick="showSpoiler(this, false);" value="Vanish" />
<br /><br />
SECOND SPOILER
<br /></br>
</div>
</div>
<div class="spoiler">
<img src="http://i.imgur.com/s5tS1.png" align="left">
<img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div class="inner">
<input type="button" onclick="showSpoiler(this, true);" value="Reveal" />
</div>
<div class="inner" style="display:none;">
<input type="button" onclick="showSpoiler(this, false);" value="Vanish" />
<br /><br />
THIRD SPOILER
<br /></br>
</div>
</div>
<div class="spoiler">
<img src="http://i.imgur.com/s5tS1.png" align="left">
<img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div class="inner">
<input type="button" onclick="showSpoiler(this, true);" value="Reveal" />
</div>
<div class="inner" style="display:none;">
<input type="button" onclick="showSpoiler(this, false);" value="Vanish" />
<br /><br />
FOURTH SPOILER
<br /></br>
</div>
</div>
</div><!-- end of spoiler group -->

</body>
</html>

goodysman
10-17-2011, 01:59 AM
yeap! that's exactly! thanks a lot!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum