Reputation:

Cannot click buttons in my website

I have been making some changes to my website except suddenly (this is a new problem) I am unable to click the buttons or anything on the website except for the header part (the grey part at the top of the screen.) This happens quite frequently to other pages of my site and typically after looking at it for a while I figure it out but this time I just cannot get it. The code for this page will be shown below. Any help will be appreciated. Just a little note, I believe it is in the header because I was editing the search. The code is shown below.

<!DOCTYPE html

<html>

    <head>

        <title>Your Pages</title>
        <meta name="viewport" content="initial-scale=1.0">
        <style>

            div.wrapper{

                    margin:auto;
                    text-align:center;
                    width:100%;
                    transition:background 2s ease-in-out;

            }

            div.pages{
                text-align:center;
                background-color:#FFFFE8;
                margin:auto;
                width:95%;
                padding:5px;
            }

            button{
                margin:5px;
                width:95%;
                padding:4px;
                background-color:skyblue;
                border:2px solid skyblue;
        }

        a.opt{
        margin:5px;
        }

        input[type="text"], input[type="submit"], textarea{

                width:50%;
                border-radius:10px;
                border:1px solid lightblue;
                height:30px;
                padding:2px;
                margin:4px;
                text-align:center;
                background-color:white;

            }

            div.newp{

             position:relative;
             z-index:0;
                width:75%;
                margin:auto;
                padding:10px;
                border-radius:10px;
                box-shadow:10px 5px 5px black;
                background-color:white;
                display:none;

        }


            </style>

    </head>

    <body>


        <style>

            span.posts{

                font-family:sans-serif;
                font-weight:bold;
                font-size:28px;
                float:left;

            }

            div.wrapper{
                position:absolute;
                top:30%;
                width:100%;
                font-family:sans-serif;
                z-index:-1;
            }

            h3.num{

                font-family:sans-serif;
                font-weight:normal;
                font-size:28px;

            }

            div.main{
                position:fixed;
                border:1px solid black;
                box-shadow:10px 10px 10px #000000;
                background-color:rgba(000, 000, 000, 0.7);
                width:100%;
                padding:5px;
            }

            body{
                padding:0px;
                margin:0px;
            }

            a.hea{
                text-decoration:none;
                color:white;
                float:left;
                font-size:28px;
            }       

            a.mlinks{
                float:none;
            }

            a.menu{
                margin:28px;
                color:white;
            }

            div.mmenu{
                display:none;
                position:absolute;
                z-index:0;
                transition:all 2s ease-in-out;
            }

            input[type="text"].se{
                margin-top:7%;
                visibility:hidden;
                width:0%;
                transition:all 2s ease-in-out;
                float:left;
            }

            @media (max-width:480px){

                    a.menu{
                        display:none;
                    }

                    a.menbs{
                        float:left;
                    }

                    div.mmenu{
                        display:block;
                        position:absolute;
                        left:-100%;
                        width:100%;
                        top:30%;
                        height:70%; 
                        text-align:center;
                        background-color:black;
                        color:white;
                        transition:left 2s ease-in-out;
                    }

                }

                @media (min-width:481px){
                    a.menb{
                        display:none;
                    }
                }               
                a.menb{
                    float:right;
                    margin-right:8px;
                }
                a.menbs{
                    float:right;
                    margin-right:8px;
                }
        img.menuimage{
            width:3em;
            height:3em;
        }

        div.searchField{
            width: 100%;
            background-color:black;
            display:none;
            opacity:0;
            position:absolute;
            top:0%;
            left:0%;
            color:white;
            text-align:center;
            padding-top:10%;
            transition:all 1s ease-in-out;
        }

        input[type="text"].headerSearch{
            background-color:transparent;
            border:2px solid white;
            color:white;
            text-align:center;
            width:75%;
            font-size:28px;
            padding:4px;
        }

        </style>

        <div class="main" id="main">    

            <a href="http://www.wilsonfamily5.org/posts101/index.php" class="hea" id="titles"><h3 class="num"><span class="posts">Posts</span>101</h3></a>

            <a class="menu hea" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a>
            <a class="menu hea" href="http://www.wilsonfamily5.org/posts101/accounts" target="frame">My Account</a>
            <input type="text" onclick="submitForm()" placeholder="search" class="se" id="se">
            <a class="menb hea" onclick="mmenu()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/menu.png" alt="menu"></a>
            <a class="menbs hea" onclick="search()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/search.png" alt="search" onclick="search()"></a>
            </div>

            <div class="mmenu" id="mmenu">

            <a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a><br>
            <a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/account" target="frame">My Account</a>

        </div>

        <div class="searchField" id="searchField" style="height: 100%;">

            <form action="results.php" method="GET">

                <h1>search anything, then click enter</h1>
                <input type="text" name="q" placeholder="search" class="headerSearch"><br><br>
                <a onclick="cancelSearch()" style="color:white;">cancel search</a>

            </form>

        </div>

            <script>

                var mmop = false;

                function mmenu(){
                    if(mmop == false){
                    document.getElementById("mmenu").style.display="block";
                    document.getElementById("mmenu").style.left="0%";
                    mmop = true;
                }else{
                 document.getElementById("mmenu").style.left="-100%";
                    mmop = false;
                    setTimeout(function(){
                         document.getElementById("mmenu").style.display="none";
                    }, 2000);
                    }
                }

                var sea = false;

                function search(){
                document.getElementById("searchField").style.display="block";
                document.getElementById("searchField").style.opacity="0.7";
                }

                function cancelSearch(){
                document.getElementById("searchField").style.display="none";
                }

                function submitForm(){
                    var se = document.getElementById("se").value;
                    window.location="http://www.wilsonfamily5.org/posts101/results.php?q=" + se;
                }

                </script>       
        <div id="wrapper" class="wrapper">

                <h1>Your Pages</h1>
                <p>Click on "Create page" to create a page. Click on a page, and then select whether you want to open it, edit it, or unsubscribe.</p>
                <p style="color:green;"></p>
                <p style="color:red;"></p>

        <button id="cbutton" onclick="newf()">Create page</button>

        <div id="newp" class="newp">

            <form id="newpageform" name="newp" action="newPage.php" method="POST">

                <h1>New Page</h1>

                <input type="text" name="title" placeholder="Title"><br>
                <textarea form="newpageform" name="description" placeholder="Description"></textarea><br>
                <textarea form="newpageform" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
                <input type="text" onkeyup="ajaxRefresh()" style="display:none; margin:auto;" name="rCode" id="rcode" placeholder="rewards code">
                <p id="info"></p>
                <input type="submit" value="Create Page"><br>
                <a onclick="redeemCode()">Redeem rewards code</a>

            </form>
        <button onclick="closeNewPage()">Close</button>
        </div>

        <div id="newep" class="newp">

            <form id="editpageform" name="newp" action="editPage.php" method="POST">

                <h1>Edit Page</h1>

                <input type="text" id="title" name="title" placeholder="Title"><br>
                <textarea form="editpageform" id="description" name="description" placeholder="Description"></textarea><br>
                <textarea form="editpageform" id="keywords" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
                <input type="hidden" name="ident" id="ident">
                <input type="submit" value="Edit Page">

            </form>

        <button onclick="closeEditPage()">Close</button>

        </div>

        <div id="pages" class="pages">

        Helicopter<a class='opt' href='page.php?p=45'>Open</a><a class='opt' onclick='edit(45)'>Edit</a><a class='opt' onclick='unsubscribe(45)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=43'>Open</a><a class='opt' onclick='unsubscribe(43)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=42'>Open</a><a class='opt' onclick='unsubscribe(42)'>Unsubscribe</a><br>          <p>To get new pages on this list, create or search for a page!</p>

        </div>

        </div>


        <script>

            function newf(){
            document.getElementById("wrapper").style.background="black";
            document.getElementById("newp").style.display="block";
            document.getElementById("cbutton").style.display="none";
            document.getElementById("pages").style.display="none";
            }

            function unsubscribe(id){
                window.location="../substatus/unsubscribe.php?i=" + id + "&t=1";
            }

            function edit(id){
            document.getElementById("wrapper").style.background="black";
            document.getElementById("newep").style.display="block";
            document.getElementById("cbutton").style.display="none";
            document.getElementById("pages").style.display="none";
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function(){
                    var text = xhttp.responseText;
                    var parts = text.split("?(105|SpLiTtEr)!");
                    document.getElementById("title").value = parts[0];
                    document.getElementById("description").value = parts[1];
                    document.getElementById("keywords").value = parts[2];
                    document.getElementById("ident").value = id;
                }
            xhttp.open("GET", "http://www.wilsonfamily5.org/posts101/pageInfo.php?i=" + id, true);
            xhttp.send();
            }

            function closeEditPage(){
            document.getElementById("wrapper").style.background="white";
            document.getElementById("newep").style.display="none";
            document.getElementById("cbutton").style.display="block";
            document.getElementById("pages").style.display="block";
            }

            function closeNewPage(){
            document.getElementById("wrapper").style.background="white";
            document.getElementById("newp").style.display="none";
            document.getElementById("cbutton").style.display="block";
            document.getElementById("pages").style.display="block";
            }

            function redeemCode(){
                document.getElementById("rcode").style.display="block";
            }

            function ajaxRefresh(){
var input = document.getElementById("rcode").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange=function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      if(xhttp.responseText == ""){
document.getElementById("rcode").style.border="2px solid red";
document.getElementById("info").innerHTML = xhttp.responseText;
}else{
document.getElementById("rcode").style.border="2px solid green";
document.getElementById("info").innerHTML = xhttp.responseText + " points are available on this card.";
}
    }
  }
  xhttp.open("GET", "../rewards/ajaxCheck.php?c=" + input, true);
  xhttp.send();
}

        </script>


    </body>

</html>

Upvotes: 0

Answers (1)

wesww

Reputation: 2873

Short answer: Your links and such aren't clickable because they have a negative z-index, and are falling underneath the body. Line 91:

div.wrapper {
  z-index: -1;
}

Upvotes: 1

Cannot click buttons in my website

Answers (1)

Related Questions