CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aaron
Aaron

Reputation: 4480

Hiding div also hides image of parent div

I am trying to hide a menu called chooseArena inside a larger div called header. When I hide chooseArena it also hides the image of the larger div. What do I do so I only hide the smaller div and not the image of the larder div.

Here is my html jquery

<html>
<head>
    <title>Dojo Arena</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('button').hover(function(){
            var arena = $(this).attr('id');
            var id = arena + '.jpg';
            $('#header').css('background-image', 'url('+id+')');
        }, function(){
            $('#header').css('background-image', 'none');
        });
        $('button').click(function(){
            var arena = $(this).attr('id');
            var id = arena + '.jpg';
            $('#header').css('background-image', 'url('+id+')');
            $('#chooseArena').hide();  // This also hides the image above.  What do I change so it will only hide the div and not the parent div with the background img
        });
    });
    </script>
</head>
<body>
    <div id="header">
        <div id = "chooseArena">
            <h1>Choose an Arena</h1>
            <button id = "dojo">Dojo</button>
            <button id = "beach">Beach</button>
            <button id = "earth">Earth</button>
            <button id = "matrix">Matrix</button>
            <button id = "snow">Snow</button>
            <button id = "forest">Forest</button>
        </div>
    </div>
</body>
</html>

Here is my css file

*{
    background-color: black;
    margin: 0;
    padding: 0;
}

#chooseArena{
    border: 1px solid: red;
    margin-left: 40%;
    width: 20%;
    height: 200px;
    background-color: grey;
    margin-top: 20%;
}

button{
    background-color: white;
    width: 30%;
    margin-left: 7px;
    margin-bottom: 20px;
}

h1{
    background-color: grey;
    margin-left: 20%;
}

#header{
    height: 900px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    padding-top: 5%;
}

option{
    background-color: white;
}

select{
    background-color: white;
}

Upvotes: 0

Views: 74

Answers (2)

Michael Coker
Michael Coker

Reputation: 53674

It's because #chooseArena is the only child of #header. By default, a block level element (#header) will only be as tall as the children inside. If it has no children inside, it's height will be 0. So when you remove #childArena from #header, #header's height is now 0. And the "image" in #header is a background image, so it will only show if #header is also shown on the page. A background image will not take up any space or cause any height to be applied to the element it's assigned to.

One way to fix this would be to set opacity: 0; or visibility: hidden; on #chooseArena (instead of hiding it with display: none or $.hide()), which will hide #chooseArena visually on the page, but #chooseArena will still take up space in #header like they it isn't hidden.

If that doesn't work, you can still hide #chooseArena but also give #header a height value to match whatever the height of the background image is or how you want that background image to display.

Upvotes: 1

Nir Tzezana
Nir Tzezana

Reputation: 2342

Try this: 

 $('#chooseArena').css("opacity","0");

My guess is that hiding the div, meaning making it "display: none" sets the header height and width to auto and therefore you can't see the background image.

Upvotes: 2

Related Questions