How Can I make my header disappear and reappear by clicking a button and also have the button change my page background

Question

My HTML:

    <!doctype html>
    <html>
    <head>
    <title>Public Vision</title>
    <link rel="stylesheet" type="text/css" title="backbone" href="backbone.css">
    <link rel="alternative stylesheet" type="text/css" title="alt" href="alt.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body class="style2">
    <div id="header" class="style2"><div id="header2" class="style2">Public Vision</div></div>
    <iframe width="640" height="400" 
     src="https://www.youtube.com/embed/videoseries?list=PLX9_I-EOJPdFuOjcI2zkmTck55homHEBE" 
     frameborder="2" allowfullscreen></iframe>

    <input id="showHideContainer" type="image" src="off.jpeg " height="3%" width="2%" alt="On" onclick="toggle()";>

    <script>
    function toggle(){
$('body').toggleClass('style2');
    }
    </script>
    <script>
    document.getElementById('showHideContainer').onclick = function() {
    divTest = document.getElementById('header');
    if (divTest.style.display === "none") {
    divTest.style.display = 'block';
    }
    else {
    divTest.style.display = "none";
     }
    }
    </script>
    </body>
    </html>

My CSS:

     #header {height: 15%; width: 100%; background-color: white; z-index: 2; position: fixed; right:0; top:0;


    box-shadow: 0 4px 4px -2px #232323;
   -moz-box-shadow: 0 4px 4px -2px #232323;
   -webkit-box-shadow: 0 4px 4px -2px #232323;
   }   

   #header2{height: 15%; width: 100%; position: fixed; color:grey; opacity:  0.6; text-align: center; z-index: 4; font-size: 30px; margin-top: 2.5%;    background-color:clear;}
   iframe {display:block; margin: 0 auto; margin-top: 17%;}


   body{
   background-color:grey; z-index:3;
      }
   body.style2{
    background-color:white; z-index:3;
     }

Currently, the image I have now, when clicked makes the header disappear. any ideas on how I can make the image make the header disappear and the background change color? Really hitting a brick wall here. Thanks in advance!

Maximillian Laumeister · Accepted Answer · 2015-08-21T18:07:24.843

The reason it's not working is that right now you're overwriting the onclick event in your JavaScript. You start out with an onclick on your input element, then when you set the onclick again in the JavaScript, it overwrites your original onclick that calls toggle().

One way to fix this would be to use event listeners, which support binding multiple functions to onclick, but in your case it will be easier to just add the toggleClass into the onclick you define in your JS, and remove the one you have in your input tag. Here is an example that toggles both header visibility and background color, by using a single onclick function for each:

Working Live Demo:

document.getElementById('showHideContainer').onclick = function () {
    divTest = document.getElementById('header');
    if (divTest.style.display === "none") {
        divTest.style.display = 'block';
    } else {
        divTest.style.display = "none";
    }
    $('body').toggleClass('style2');
};

body {
    background-color:grey;
    z-index:3;
}
body.style2 {
    background-color:white;
    z-index:3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="style2">
    <div id="header2" class="style2">Public Vision</div>
</div>
<input id="showHideContainer" type="image" src="http://i.imgur.com/5LGqY2p.jpg?1" height="100" width="100" alt="On" ;>

JSFiddle Version: https://jsfiddle.net/66cn8L1b/1/

@AustinJones Glad it worked for you! Please don't forget to mark it as accepted by clicking the gray checkmark to the left of the answer. Thanks! — Maximillian Laumeister, Aug 21 '15 at 18:13
Will do! on a side not do you know if i could make the transition from one color to another slower, almost like the background is dimming or a light turning on? — Austin Jones, Aug 21 '15 at 18:18
@AustinJones You can use the transition CSS rule for that: `body{transition: background-color 1s; ... }` — Maximillian Laumeister, Aug 21 '15 at 18:20

score 1 · Answer 2 · answered Aug 21 '15 at 18:01

1

Use $('body').toggleClass('newClass'); inside your same click event for hiding the header. Here's fiddle demo http://jsfiddle.net/ff2o7gmy/1/.

answered Aug 21 '15 at 18:01

Chris Yongchu

789
3
8

How Can I make my header disappear and reappear by clicking a button and also have the button change my page background

2 Answers2