Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Couple of bugs I'm not sure how to fix - Javascript spoiler

    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:

    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>
    Last edited by Dave.; 10-12-2011 at 11:21 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Way too complex. Rewritten to make it simpler...and to work.

    And you don't need separate styles for .hide and .show
    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, .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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Dave. (10-13-2011)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Dave. (10-13-2011)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Here's a version for multiple spoilers on same page.

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

    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;
    }
    .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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Dave. (10-13-2011)

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

  • #6
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by goodysman; 10-17-2011 at 12:38 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Like this, you mean?
    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;
    }
    .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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeap! that's exactly! thanks a lot!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •