Content inside Div not clickable

StackOverflow https://stackoverflow.com/questions/22929561

  •  29-06-2023
  •  | 
  •  

Question

I want to make a button inside of a div that makes the div disappear but for some reason the content inside the div is unclickable. This button is a div called .aboutclose:

HTML DopEYEmine

<!--Favicon-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<!--Fonts-->
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>

<!--CSS-->
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>

<body>

    <div id="sidebar">
        <ul>
            <li><img class="logo" src="img/whitelogo.svg"><img class="logotwo" src="img/whitelonglogo.svg"></li>
            <li><img class="nav_icons" src="img/about.svg"><a class="about_btn" href="#">ABOUT</a></li>
            <li><img class="nav_icons" src="img/submit.svg"><a class="submit_btn" href="#">SUBMIT</a></li>
            <li><img class="nav_icons" src="img/contact.svg"><a class="contact_btn" href="#">CONTACT</a></li>
        </ul>
    </div>

    <div id="about">
        <div class="aboutclose closer">CLOSE</div>
        <div>
            <img src="img/logo.png">
        </div>
    </div>

    <div id="submit">
        SUBMIT
    </div>

    <div id="contact">
        CONTACT
    </div>

    <div id="mainarea">

    </div>

<!--Javascript-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/browser_hack.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>

</body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;
}

a{
    text-decoration: none;
}

/*Side Bar Nav----------------------------------*/

.logo {
    position: absolute;
    top: 30px;
    left: 10px;
    width: 75px;
    margin: 0px;
}

.logotwo {
    position: absolute;
    top: 34px;
    left: 110px;
    width: 150px;
    display: none;
}

#sidebar {
    float: left;
    z-index: 10;
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 95px;
    background: #555;
    overflow: hidden;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar:hover {
    width: 280px;
    background: #000;
}

.nav_icons {
    width: 40px;
    height: 40px;
}

#sidebar li {
    display: block;
    font-family: 'Special Elite', cursive;
}

#sidebar ul li:nth-child(2) {
    position: absolute;
    top: 88px;
    left: 27px;
}

#sidebar ul li:nth-child(3) {
    position: absolute;
    top: 148px;
    left: 27px;
}

#sidebar ul li:nth-child(4) {
    position: absolute;
    top: 208px;
    left: 27px;
}

.about_btn,
.submit_btn,
.contact_btn {
    position: relative;
    top: -25px;
    left: 80px;
    color: #fff;
    display: none;
    padding: 10px 200px 5px 5px;
}

.gecko .about_btn,
.gecko .submit_btn,
.gecko .contact_btn { 
    top: -35px;
}

#sidebar a:hover {
    background-color: #fff;
    color: #000;
}

/*Panel------------------------------------*/

.closer {
    float: right;
    font-weight: 900;
    font-size: .75em;
    padding: 5px;
}

/*About------------------------------------*/

#about {
    float: left;
    z-index: 10;
    height: 100%;
    width: 600px;
    background-color: #fff;
    box-shadow: 3px 0px 2px #555, 3px 0px 2px #555 inset;
    opacity: .5;
    display: none;
}

#about img {
    position: relative;
    top: 25px;
    left: 100px;
    display: block;
    width: 400px;
}

/*Contact------------------------------------*/

#contact {
    float: left;
    z-index: 10;
    height: 100%;
    width: 600px;
    background-color: #fff;
    box-shadow: 3px 0px 2px #555, 3px 0px 2px #555 inset;
    opacity: .5;
    display: none;
}

/*Submit------------------------------------*/

#submit {
    float: left;
    z-index: 10;
    height: 100%;
    width: 600px;
    background-color: #fff;
    box-shadow: 3px 0px 2px #555, 3px 0px 2px #555 inset;
    opacity: .5;
    display: none;
}

/*Main Area--------------------------------*/

#mainarea {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    padding-left: 100px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -0-box-sizing: border-box;
    box-sizing: border-box;
}

JQuery

$(document).ready(function(){

    $(function(){
        $('#sidebar').hover(function(){
            $(".about_btn, .submit_btn, .contact_btn").delay(100).fadeIn(1000);
            $(".logotwo").delay(100).fadeIn(1000);
        },function(){
            $(".about_btn, .submit_btn, .contact_btn").fadeOut(10);
            $(".logotwo").fadeOut(10);
        });
    });

//ABOUT PANEL---------------------------------------------------

    $(function(){
        $(".about_btn").click(function () {
            if($('#submit').css("display") == "block") {
                $('#submit').fadeOut(10);
                $('#about').animate({width: 'toggle'});
            } else if($('#contact').css("display") == "block") {
                $('#contact').fadeOut(10);
                $('#about').animate({width: 'toggle'});
            } else {
                $('#about').animate({width: 'toggle'});
            }
        }); 
    });

    $(function(){
        $(".aboutclose").click(function () {
            $('#about').animate({width: 'toggle'});
        });
    });

//SUBMIT PANEL---------------------------------------------------
    $(function(){
        $(".submit_btn").click(function () {
            if($('#about').css("display") == "block") {
                $('#about').fadeOut(10);
                $('#submit').animate({width: 'toggle'});
            } else if($('#contact').css("display") == "block") {
                $('#contact').fadeOut(10);
                $('#submit').animate({width: 'toggle'});
            } else {
                $('#submit').animate({width: 'toggle'});
            }
        });
    });

//CONTACT PANEL---------------------------------------------------
    $(function(){
        $(".contact_btn").click(function () {
            if($('#about').css("display") == "block") {
                $('#about').fadeOut(10);
                $('#contact').animate({width: 'toggle'});
            } else if($('#submit').css("display") == "block") {
                $('#submit').fadeOut(10);
                $('#contact').animate({width: 'toggle'});
            } else {
                $('#contact').animate({width: 'toggle'});
            }
        }); 
    });

});

I have no idea why this is happening. If Can anyone explain this plzzz help! Thank you.

Was it helpful?

Solution

Change your css for #mainarea:

#mainarea {
   float:left;
   display:block;
    position:relative;
    top: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    padding-left: 100px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -0-box-sizing: border-box;
    box-sizing: border-box;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top