CODEWITHSUNDEEP
javascripthtmlcss
Alvykun
Alvykun

Reputation: 173

Toggle footer and modify body height according

I have a simple web page that contains a hideable footer.

The footer does hide/show correctly but the body height as well as the vertical scroll bar that should be modified, does not.

How can I modify the code in order to make the body resize when showing/hiding the footer?

I think that this is related with DOM element positions but I could not figure out how to do it.

Here is a fiddle of the code

Footer

<span id="footerToogle">TOGGLE FOOTER</span>
<footer>FOOTER</footer>

Javascript

var element = document.getElementById("footerToogle");
    element.onclick = function () {
    element.classList.toggle('inactive');
};

Css

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    margin: 0;
    padding: 0;
    height:100%;
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    height:75px;
    z-index: 100;
    font-size: 16px;
    color: white;
    background: #5A5A5A;
}
#body {
    position:absolute;
    bottom:76px;
    top:75px;
    width:100%;
    overflow-y:auto;
}

footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    margin: 0;
    max-height: 75px;
    height: 75px;
    background: #5A5A5A;
    color: white;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
}

#footerToogle {
    position: absolute;
    left: 0;
    bottom: 75px;
    padding: 1em;
    background: #5A5A5A;
    color:white;
    -webkit-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

#footerToogle.inactive {
    bottom: 0px;
}

#footerToogle.inactive + footer {
    max-height: 0px;
}

Upvotes: 1

Views: 457

Answers (2)

Pete
Pete

Reputation: 58422

You should achieve what you want by adding a class to the body and making that new class overwrite the bottom of the existing style (comments show what I have added below):

var element = document.getElementById("footerToogle");
element.onclick = function () {
  element.classList.toggle('inactive');
  element.previousElementSibling.classList.toggle('without-footer');  // add this
};
html {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    margin: 0;
    padding: 0;
    height:100%;
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    height:75px;
    z-index: 100;
    font-size: 16px;
    color: white;
    background: #5A5A5A;
}
#body {
    position:absolute;
    bottom:76px;
    top:75px;
    width:100%;
    overflow-y:auto;
    transition: bottom 0.5s;  /* add this */
}

#body.without-footer {    /* add this */
  bottom:0;
}

footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    margin: 0;
    max-height: 75px;
    height: 75px;
    background: #5A5A5A;
    color: white;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
}

#footerToogle {
    position: absolute;
    left: 0;
    bottom: 75px;
    padding: 1em;
    background: #5A5A5A;
    color:white;
    -webkit-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

#footerToogle.inactive {
    bottom: 0px;
}

#footerToogle.inactive + footer {
    max-height: 0px;
}
<header>HEADER</header>
<div id="body" style="text-align:center;">
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
    Body<BR>
</div>
<span id="footerToogle">TOGGLE FOOTER</span>
<footer>FOOTER</footer>

Updated fiddle

Upvotes: 1

abhishekkannojia
abhishekkannojia

Reputation: 2856

That is because your #body is positioned 76px from the bottom leaving the space for footer. You need to clear the bottom positioning while hiding the footer. Change your code like this: 

var element = document.getElementById("footerToogle");
element.onclick = function () {
    element.classList.toggle('inactive');
    document.getElementById('body').classList.toggle('noFooter');
};

and CSS

#body.noFooter {
    bottom: 0;
}

JSFIDDLE

Upvotes: 2

Related Questions