CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BarryBones41
BarryBones41

Reputation: 1481

Sliding div goes under floating divs

I am trying to make a basic popup menu from the left. It works other than the fact that when I try to hide the menu, the main div ends up underneath the menu. I'm not sure how this is happening.

https://jsfiddle.net/pcsfk7te/2/

    <div class="wrapper">
  <div class="slider">
    <div class="trigger">
      Click
    </div>
    <div class="units">
      <div class="unit">
        unit 1
      </div>
      <div class="unit">
        unit 2
      </div>
      <div class="unit">
        unit 3
      </div>
    </div>
  </div>
  <div class="display">
    <table>
      <thead>
        <tr>
          <th>col1</th>
          <th>col2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>row1</td>
          <td>row1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</div>

html,
body,
.wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
}

.slider,
.trigger,
.units,
.display {
  float: left;
}

.slider {
  width: 175px;
}

.unit {
  width: 100px;
  height: 50px;
  background: beige;
  margin: 5px 0;
  border: solid grey 2px;
}

.trigger {
  height: 100%;
  background: black;
  width: 50px;
  color: white;
  z-index: 30;
  position: relative;
}

.trigger,
.slider,
.display {
  height: 100%;
}

.units,
.slider {
  transition: all 250ms;
}

.units {
  z-index: 20;
  position: relative;
  padding: 5px;
}

.display {
  background: lightgreen;
  height: 100%;
  width: calc(100% - 175px);
}

var $slider = $('.slider')
var $units = $('.units');
var $display = $('.display');
var $wrapper = $('.wrapper');
$('.trigger').click(function() {
  var displayW;
  var sliderW;
  var unitsMargin;
  var wrapperW = $wrapper.width();
  var w = $slider.width();

  if (w === 50) {
    sliderW = "175px";
    unitsMargin = 0;
    displayW = wrapperW - 175 + "px";
  } else {
    sliderW = "50px";
    unitsMargin = "-175px";
    displayW = wrapperW - 60 + "px";
  }
  $units.css('margin-left', unitsMargin)
  $slider.css('width', sliderW);
  $display.css('width', displayW);
})

Upvotes: 1

Views: 56

Answers (2)

UIPassion
UIPassion

Reputation: 120

Inside the else part add the following code snippet at the end. Adjust the timer. On directly Adding margin-left: 0 its not working, its working only when we add negative margin first and then changing it to 0. 

setTimeout(function(){ $display.css('margin-left', '-175px'); }, 100);
setTimeout(function(){ $display.css('margin-left', '0px'); }, 200);

Upvotes: 1

algorithmicMoose
algorithmicMoose

Reputation: 196

This is really weird. I'm not totally sure why, but if you add a matching transition to the display change it works:

.units,
.slider,
.display{
  transition: all 250ms;
}

https://jsfiddle.net/algorithmicMoose/pcsfk7te/6/

Upvotes: 3

Related Questions