CODEWITHSUNDEEP
javascripthtmlhideshow
user1307079
user1307079

Reputation: 11

HTML show/hide elements JS not working

what im trying to do is make it so when a user checks the radio box off in one content box, it will show the next one. When I do this using javascript, all the boxes are inside each other and messed up Here is my whole code so you can see the css etc.

<html>
    <head>
        <style>
        html, body {
            background-image:initial;
            background-repeat-x:initial;
            background-repeat-y:initial;
            background-repeat:no-repeat;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#EEEEEE;
            font-family:'Source Sans Pro', sans-serif;
            color:#262626;
            margin:25px;
        }
        .texts {
            position:relative;
            z-index:1;
            -webkit-border-top-left-radius:5px;
            border-top-left-radius:5px;
            -o-border-top-left-radius:5px;
            -ms-border-top-left-radius:5px;
            -moz-border-radius-topleft:5px;
            -webkit-border-top-right-radius:5px;
            border-top-right-radius:5px;
            -o-border-top-right-radius:5px;
            -ms-border-top-right-radius:5px;
            -moz-border-radius-topright:5px;
            -webkit-border-bottom-right-radius:5px;
            border-bottom-right-radius:5px;
            -o-border-bottom-right-radius:5px;
            -ms-border-bottom-right-radius:5px;
            -moz-border-radius-bottomright:5px;
            -webkit-border-bottom-left-radius:5px;
            border-bottom-left-radius:5px;
            -o-border-bottom-left-radius:5px;
            -ms-border-bottom-left-radius:5px;
            -moz-border-radius-bottomleft:5px;
            width:25%;
            font-family:Montserrat, sans-serif;
            font-size:14px;
            text-align:center;
            border:1px solid #818181;
            padding:10px;
        }
        .title {
            margin:-10;
            background-image:url(images/blue.png);
            height:20px;
            padding-bottom:10px;
            padding-top:6px;
            text-align:center;
            font-family:Montserrat, sans-serif;
            font-size:16px;
            -webkit-border-top-left-radius:5px;
            border-top-left-radius:5px;
            -o-border-top-left-radius:5px;
            -ms-border-top-left-radius:5px;
            -moz-border-radius-topleft:5px;
            -webkit-border-top-right-radius:5px;
            border-top-right-radius:5px;
            -o-border-top-right-radius:5px;
            -ms-border-top-right-radius:5px;
            -moz-border-radius-topright:5px;
        }
        .button {
            background-image:url(images/blue.png);
            background-repeat-x:repeat;
            background-repeat-y:no-repeat;
            background-repeat:repeat-x;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#000000;
            -webkit-border-top-left-radius:5px;
            border-top-left-radius:5px;
            -o-border-top-left-radius:5px;
            -ms-border-top-left-radius:5px;
            -moz-border-radius-topleft:5px;
            -webkit-border-top-right-radius:5px;
            border-top-right-radius:5px;
            -o-border-top-right-radius:5px;
            -ms-border-top-right-radius:5px;
            -moz-border-radius-topright:5px;
            -webkit-border-bottom-right-radius:5px;
            border-bottom-right-radius:5px;
            -o-border-bottom-right-radius:5px;
            -ms-border-bottom-right-radius:5px;
            -moz-border-radius-bottomright:5px;
            -webkit-border-bottom-left-radius:5px;
            border-bottom-left-radius:5px;
            -o-border-bottom-left-radius:5px;
            -ms-border-bottom-left-radius:5px;
            -moz-border-radius-bottomleft:5px;
            color:#F0FFF0;
            cursor:pointer;
            border:1px solid #0774B9;
            padding:8px 35px 8px 35px;
        }
        .button:hover {
            background-image:url(images/blue_hover.png);
            background-repeat-x:repeat;
            background-repeat-y:no-repeat;
            background-repeat:repeat-x;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#000000;
        }
        .button:active {
            background-image:url(images/blue_click.png);
            background-repeat-x:repeat;
            background-repeat-y:no-repeat;
            background-repeat:repeat-x;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#000000;
        }
        .label_check {
            -webkit-appearance:none;
            background-color:#FAFAFA;
            box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 2px, rgba(0, 0, 0, 0.046875) 0px -15px 10px -12px inset;
            -webkit-border-top-left-radius:50px;
            border-top-left-radius:50px;
            -o-border-top-left-radius:50px;
            -ms-border-top-left-radius:50px;
            -moz-border-radius-topleft:50px;
            -webkit-border-top-right-radius:50px;
            border-top-right-radius:50px;
            -o-border-top-right-radius:50px;
            -ms-border-top-right-radius:50px;
            -moz-border-radius-topright:50px;
            -webkit-border-bottom-right-radius:50px;
            border-bottom-right-radius:50px;
            -o-border-bottom-right-radius:50px;
            -ms-border-bottom-right-radius:50px;
            -moz-border-radius-bottomright:50px;
            -webkit-border-bottom-left-radius:50px;
            border-bottom-left-radius:50px;
            -o-border-bottom-left-radius:50px;
            -ms-border-bottom-left-radius:50px;
            -moz-border-radius-bottomleft:50px;
            display:inline-block;
            position:relative;
            border:1px solid #CACECE;
            padding:6px;
        }
        .label_check:checked {
            background-color:#E9ECEE;
            color:#99A1A7;
            box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 2px, rgba(0, 0, 0, 0.046875) 0px -15px 10px -12px inset, rgba(255, 255, 255, 0.0976563) 15px 10px -12px inset, rgba(0, 0, 0, 0.0976563) 0px 0px 10px inset;
            border:1px solid #ADB8C0;
        }
        .label_check:checked::after {
            content:' ';
            width:6px;
            height:6px;
            -webkit-border-top-left-radius:50px;
            border-top-left-radius:50px;
            -o-border-top-left-radius:50px;
            -ms-border-top-left-radius:50px;
            -moz-border-radius-topleft:50px;
            -webkit-border-top-right-radius:50px;
            border-top-right-radius:50px;
            -o-border-top-right-radius:50px;
            -ms-border-top-right-radius:50px;
            -moz-border-radius-topright:50px;
            -webkit-border-bottom-right-radius:50px;
            border-bottom-right-radius:50px;
            -o-border-bottom-right-radius:50px;
            -ms-border-bottom-right-radius:50px;
            -moz-border-radius-bottomright:50px;
            -webkit-border-bottom-left-radius:50px;
            border-bottom-left-radius:50px;
            -o-border-bottom-left-radius:50px;
            -ms-border-bottom-left-radius:50px;
            -moz-border-radius-bottomleft:50px;
            position:absolute;
            top:3px;
            background-image:initial;
            background-repeat-x:initial;
            background-repeat-y:initial;
            background-repeat:no-repeat;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#99A1A7;
            box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 10px inset;
            left:3px;
            font-size:32px;
        }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <link href="http://fonts.googleapis.com/css?family=Montserrat"
        rel="stylesheet" type="text/css">
        <title>Frooloo, the free face morphing software</title>
        <script type="text/javascript">
        function showStuff(id) {
            document.getElementById(id).style.display = 'block';
        }
        </script>
    </head>
    <body>
        <center>
            <h1>Logo Here!</h1>
            <br>
        </center>
        <span id="1" style="display: block;">
            <div class="texts">
                <div class="title">
                    <strong>Step 1</strong>
                    <br>
                    <br>
                </div>Press "Allow" when you are asked for access to your camera.
                <br>
                <label class="label_check">
                    <input name="sample_check1" id="sample_check1" value="1" type="radio"
                    nclick="showStuff('3');  />
    Done?
        </label></div></span>
    <br>
                        <span id=" 2 " style="display: none; "><div class="texts ">

                                        <div class="title " >
                        <strong>Step 2</strong><br><br>
                    </div>

    Make sure your webcam is facing you and your volume is up, so you can hear the beep to let you know analyzing is done.<br>
    <label class="label_check " >
        <input name="sample_check2 " id="sample_check2 " value="1
                    " type="radio " onclick="showStuff( '3'); />Done?</label>
            </div>
        </span>
        <br>
        <span id="3" style="display: none;">"
            <div class="texts">
                <div class="title">
                    <strong>Step 3</strong>
                    <br>
                    <br>
                </div>A black dot will appear in the area to the right, stare at that black
                dot and DO NOT move your head, the software is analyzing your face. You
                can move after you hear a beep. This process will start when you check
                the box below.
                <br>
                <label class="label_check">
                    <input name="sample_check3" id="sample_check3" value="1" type="radio"
                    />Ready?</label>
            </div>
        </span>
        <div class="img">
            <img src="images/dot.png" img="" style="position:absolute; left:610px; top:120px; ">
        </div>
        <script>
        $('body').hide();
        $('body').fadeIn(1000);
        </script>
        <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
        <script type="text/javascript">
        var pageTracker = _gat._getTracker("UA-301801-11");
        pageTracker._trackPageview();
        </script>
    </body>

</html>

Here is the part of the code that does this:

<center>
    <h1>Logo Here!</h1>
    <br>
</center>
<span id="1" style="display: block;">
    <div class="texts">
        <div class="title">
            <strong>Step 1</strong>
            <br>
            <br>
        </div>Press "Allow" when you are asked for access to your camera.
        <br>
        <label class="label_check">
            <input name="sample_check1" id="sample_check1" value="1" type="radio"
            onclick="showStuff('2');  />
    Done?
        </label></div></span>
    <br>
                        <span id=" 2 " style="display: none;
            "><div class="texts ">

                                        <div class="title " >
                        <strong>Step 2</strong><br><br>
                    </div>

    Make sure your webcam is facing you and your volume is up, so you can hear the beep to let you know analyzing is done.<br>
    <label class="label_check " >
        <input name="sample_check2 " id="sample_check2 " value="1
            " type="radio " onclick="showStuff( '3'); />Done?</label>
    </div>
</span>
<br>
<span id="3" style="display: none;">"
    <div class="texts">
        <div class="title">
            <strong>Step 3</strong>
            <br>
            <br>
        </div>A black dot will appear in the area to the right, stare at that black
        dot and DO NOT move your head, the software is analyzing your face. You
        can move after you hear a beep. This process will start when you check
        the box below.
        <br>
        <label class="label_check">
            <input name="sample_check3" id="sample_check3" value="1" type="radio"
            />Ready?</label>
    </div>
</span>

And here is the JS function,

<script type="text/javascript">
    function showStuff(id) {
        document.getElementById(id).style.display = 'block';
    }
</script>

This is what happens, go to this link to see http://188.165.208.144/~seegee/planz/real/morph.php

There are suposed to be 3 content boxes on top of one another but when I do this, this happenes, and yes, that black dot is suposed to be there...

Upvotes: 0

Views: 455

Answers (3)

Oriol
Oriol

Reputation: 288710

Scrappedcola is right.

For your second problem, there is an extra quote because you have

<span id="a3" style="display: none;">"<div class="texts" >

Upvotes: 0

scrappedcola
scrappedcola

Reputation: 10572

Id's shouldn't start with number (see this post). Other than that you may have issues with various browsers when you wrap block elements (<div>) with inline elements (<span>).

Your onclick is missing quotes: onclick="showStuff('2'); should be onclick="showStuff('2');"

Upvotes: 0

Lee Taylor
Lee Taylor

Reputation: 7994

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Upvotes: 1

Related Questions