CSS Change body margin size if an element is visible

Question

I have a fixed position menu bar at the top of the page which is (lets say) 50px high, the body has a top margin of 50px also. Above the menu bar, there can be an error message which can vary in height. This variation means that the margin ontop of the body will need to change accordingly.

I would like to avoid the use of javascript here but if it's not possible I will use it as a last resort.

An example of what the page will look like is at http://subjectplanner.co.uk/Me/ . If you click on the error message, it will dissapear and that is how the page should look.

HTML Code:

<div id="NavWrapper">
    <div id="NavErrorWrapper" class="Notification">
        <div id="NavError">You must be logged in!</div>
    </div>
    <div id="NavBar">
        <a href="/index" id="NavLogo"><img src="logo.png" /></a>
        <div class="HideIfJavaOff"><a href="#" id="NavMenu"><img src="menu.png" /></a></div>
        <div class="MenuClear"></div>
        <!-- MENU LIST HERE -->
    </div>
</div>
<!-- End Floating Navigation Bar -->
<!-- Responsive Wrapper -->
<div id="MainWrapper">
    <!-- CONTENT HERE -->
</div>
</body>

CSS Code:

#NavWrapper{
    width: 100%;
    z-index: 1;
    top: 0;
    position: fixed;
    height:70px;
}
#NavErrorWrapper{
    z-index: 3;
    text-align: center;
    width: 100%;
    padding: 7px;
    background-color: rgb(255, 148, 148);
    border-bottom-style: solid;
    border-bottom-color: rgb(252, 88, 88);
    border-bottom-width: 3px;
    display: block;
}
#NavError{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
#NavBar{
    overflow: hidden;
    display: block;
    width: inherit;
    max-width: 900px;
    z-index: 2;
    height:auto;
    margin: 0 auto;
    background-color: #fff;
}

Try changing the `px` values to `%` values? Also, you have two instances of `z-index: 999;` which must surely be an error/typo. Really, if the listed HTML includes the only instances of z-index, you should use 1, 2, and 3, rather than 995, 999, and 999(or whatever you meant to put), since the former is better practice. — TylerH, May 15 '14 at 17:55

score 0 · Answer 1 · answered May 15 '14 at 17:57

I don't think a CSS only solution is what you are going to get here, in terms of being fully dynamic and having your content fit proportionally. For the least amount of javascript, I would toggle a class on the body when you trigger the error, that gets removed after the error is removed. then in css, you can apply the necessary padding/transition/whatever to keep the proper ratios.

score 0 · Answer 2 · edited May 23 '17 at 11:50

You can't trasverse the DOM in CSS, threfore you would need JS. You could use the following:

var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage){
  document.body.style.marginTop = '115px';
}

Check to see if the error message exists. If so, modify the margin. This assumes the error message will always be the same height, though. If it will have a dynamic height, you would have to calculate it and then add it to 80px like this:

var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage){
  document.body.style.marginTop = (errorMessage.offsetHeight + 80) + 'px';
}

If the element is clicked and therefore hidden, just use the following to return the margin to 80px:

if(errorMessage) {
  errorMessage.addEventListener('click',function(){
    document.body.style.marginTop = '80px';
  });
}

If you need to test whether the element is hidden, as your title implies:

function isHidden(el) {
  if (el.offsetParent === null) {
      return true;
  }
  return false;
}

var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage && !isHidden(errorMessage)){
  document.body.style.marginTop = (errorMessage.offsetHeight + 80) + 'px';
}

if(errorMessage) {
  errorMessage.addEventListener('click',function(){
    document.body.style.marginTop = '80px';
  });
}

score 0 · Answer 3 · edited Sep 15 '14 at 07:56

The way to implement this is through a combination of javascript and css lets assume that we are going to use all the css you have currently implemented.

For the css portion we are going to use a new class called 'errorReveal' and we are going to attach it to the navWrapper div based on whether or not you would like the error to be revealed.

.errorReveal {
    transform: translate3d(0,45px,0);
    -webkit-transform: translate3d(0,45px,0);
    -moz-transform: translate3d(0,45px,0);
    -ms-transform: translate3d(0,45px,0);
    -o-transform: translate3d(0,45px,0);
}

The 45px should be adjusted to the size of your error messages.

The following is a quick function for altering an objects class and will be used to add this class.

var togClass ( obj, class ) {

     if( obj.className.search( class ) == -1 ) {

        obj.className += class;

    } else {

        obj.className.replace( class, "");

    }

}

Next is simple to decide when to use this function for example.

var elNavWrapper = document.getElementById("NavWrapper");
var someErrorCheckFunction( fakeArg){
    //Checkin some stuff
    //checkin some other stuff
    var error = true;
    if(error){
        togClass( elNavWrapper, "errorReveal" );
    }
}

then simply add a point event to the errorMessage to toggle the class back off

var elErrorWrapper = document.getElementById("NavErrorWrapper");
elErrorWrapper.addEventListener( "mousedown", function(){
    togClass( elNavWrapper, "errorReveal" );
});

and that should do it. Best of luck!

ps. for dynamic sizing you need to use javascript to get the ErrorWrapper's offsetHeight then use javascript to change the transform property, that function would replace the togClass function.

CSS Change body margin size if an element is visible

3 Answers3