schnitzel schnitzel - 3 months ago 6
Javascript Question

Set height of 2 div's via JavaScript

on my website I have a header (which is a background image) and under it a navbar. I like the header and navbar to fill 100% of the screen height.
If I change the height of the header to 80% or something like that it only works on certain desktops sizes. On bigger ones you can see the content area below the navbar or on smaller ones only part of the navbar.

I figured it should be possible to define the size of header and navbar together via JavaScript (header+navbar= height 100%). The problem is, that I have never really worked with JavaScript before and couldn't find a code that would do that.

Does someone have an idea how to do that?

Answer

you can use css and javascript like this for both your navbar and your header:

 @media screen and (max-width:680px) {
  ul.navbar  li:not(:first-child) {display: none;}
  ul.navbar li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens */
@media screen and (max-width:680px) {
  ul.navbar.responsive {position: relative;}
  ul.navbar.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.navbar.responsive li {
    float: none;
    display: inline;
  }
  ul.navbar.responsive li a {
    display: block;
    text-align: left;
  }
}

then use this script :

function myFunction() {
    var x = document.getElementById("IdOfnavbar");
    if (x.className === "navbar") {
        x.className += " responsive";
    } else {
        x.className = "navbar";
    }
}

External source: http://www.w3schools.com/howto/howto_js_topnav.asp

Comments