0

I've tried multiple methods of getting this to work but nothing has.

Here is my HTML:

here's a jsfiddle for simplicity https://jsfiddle.net/w1z9bahv/23/

I cannot figure out why I can't get the footer to stay at the bottom. I've tried changing the dark mode features in JavaScript, I've tried multiple different methods of positioning the element on the bottom.

Once I activate dark mode, my footer will shoot up and be in the middle of the page. I just want it to stay at the bottom.

Here's my current code:

var darkModeOn = false;

function darkMode() {
  var element = document.body;
  var footer = document.getElementById("bottomText");

  if (darkModeOn == false) {
    document.getElementById("darkMode").innerHTML = "Light mode";
    darkModeOn = true;
  } else {
    document.getElementById("darkMode").innerHTML = "Dark mode";
    darkModeOn = false;
  }

  element.classList.toggle("darkMode");
  footer.classList.toggle("darkMode");
}
body {
  position: relative;
  background-color: white;
  margin: 100px;
  filter: invert(0%);
}

body.darkMode {
  position: relative;
  margin: 100px;
  background-color: #222;
  filter: invert(100%);
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

footer.darkMode {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
<html>
<body>
  <p>
    Here is some irrelevant text
  </p>
  <button>
          Here is an irrelivant button
        </button>
  <footer id="bottomText">
    <span>here is my footer</span>
    <span>why is it not on the bottom</span>
    <span><u id="darkMode" onclick="darkMode()">Dark mode</u></span>
  </footer>
</body>

</html>

If there is a better way to add a dark mode feature that would be helpful too :)

Thanks

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
Michael Leonard
  • 240
  • 1
  • 3
  • 8

2 Answers2

1

Using padding instead of margin will allow more control over the footer. You can still achieve the "margin" affect with using box-sizing:border-box; on body with padding:100px;.

The filter you added to body is affecting the fixed positioning of the footer. The effect is documented here. To bypass the effect, create another div containing everything on the page except the footer. Anything for which you want fixed positioning cannot be within a container with a filter or transformation. Therefore, using a container for everything that isn't fixed and putting all fixed positioned things outside of the container will isolate the filter from affecting the footer. To still achieve the filter on the footer, I kept the code that altered its class so that the footer itself received the filter and not through inheritance. Hopefully this makes sense but let me know if you don't understand.

var darkModeOn = false;

function darkMode() {
  var element = document.getElementById('filterContainer');
  var footer = document.getElementById("bottomText");

  if (darkModeOn == false) {
    document.getElementById("darkMode").innerHTML = "Light mode";
    darkModeOn = true;
  } else {
    document.getElementById("darkMode").innerHTML = "Dark mode";
    darkModeOn = false;
  }

  element.classList.toggle("darkMode");
  footer.classList.toggle("darkMode");
}
html,body {
  margin:0;
  padding:0;
}

#filterContainer{
  background-color:white;
  padding:100px;
  box-sizing:border-box;
  filter:invert(0%);
  height:200vh;
}

.darkMode{
filter:invert(100%) !important;
}

footer {
  /*Do the font (maybe)*/
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
<html>

  <head>

  </head>

  <body>
  <div id="filterContainer">
    <p>
      Here is some irrelevant text
    </p>
    <button>
  Here is an irrelivant button
  </button>
  </div>
    <footer id="bottomText">
      <span>here is my footer</span>
      <span>why is it not on the bottom</span>
      <span><u id="darkMode" onclick="darkMode()">Dark mode</u></span>
    </footer>
  </body>

</html>
www139
  • 4,960
  • 3
  • 31
  • 56
  • I should have clarified better sorry. I want the footer to be "stuck" to the bottom of the page. Your solution didn't work for me. The code I posted is just a small part of a larger file that I have. In my actual file, certain html elements will disappear and reappear but the footer won't stay in the same spot. – Michael Leonard Sep 10 '18 at 23:05
  • @MichaelLeonard updated. Your filter was affecting the fixed positioning. You cannot have fixed positioning if there is a filter or transformation applied through inheritance on a containing element (such as body). As documented in the linked answer, filters and transformations use a separate matrix system that works separately from the normal matrix and, therefore, the two matrix systems have no way of exchanging that kind of information. *My interpretation but please do read the linked post*. – www139 Sep 12 '18 at 18:20
1

You can try the following:

var darkModeOn = false;

function darkMode() {
  var element = document.body;
  var footer = document.getElementById("bottomText");
  var buttonToInvert = document.getElementById("buttonToInvert");

  if (darkModeOn == false) {
    footer.innerHTML = "Light mode";
    darkModeOn = true;
  } else {
    footer.innerHTML = "Dark mode";
    darkModeOn = false;
  }

  element.classList.toggle("darkMode");
  buttonToInvert.classList.toggle("darkMode");
}
body {
  background-color: white;
  margin: 100px;
}

body.darkMode {
  margin: 100px;
  background-color: #222;
}

button.buttonToInvert{
  filter: invert(0%);
}

button.darkMode{
  filter: invert(100%);
}

footer {
  /*Do the font (maybe)*/
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
<html>

  <head>

  </head>

  <body>
    <p>
      Here is some irrelevant text
    </p>
    <button id="buttonToInvert">
  Here is an irrelivant button
  </button>
    <footer>
      <span>here is my footer</span>
      <span>why is it not on the bottom</span>
      <span><u id="bottomText" onclick="darkMode()">Dark mode</u></span>
    </footer>
  </body>

</html>
Roux A
  • 11
  • 4