CSS Positioning 03

css-positioning-03.markdown

CSS Positioning 03

A Pen by rbf on CodePen.

License.

index.html

<!-- Inspired by https://www.pluralsight.com/courses/css-positioning-1834 -->
<div id="display-control">
  <button>toggle all</button>
</div>

<div class="box position-static"></div>
<div class="box position-static c-margin-0-auto"></div>
<div class="container position-absolute c-top-50pc">
  <div class="box position-static c-margin-0-auto"></div>
</div>

<div class="box position-fixed p-top-0     p-left-0"></div>
<div class="box position-fixed p-top-0     c-left-50pc"></div>
<div class="box position-fixed p-top-0     p-right-0"></div>
<div class="box position-fixed c-top-50pc  p-left-0"></div>
<div class="box position-fixed c-top-50pc  c-left-50pc"></div>
<div class="box position-fixed c-top-50pc  p-right-0"></div>
<div class="box position-fixed p-bottom-0  p-left-0"></div>
<div class="box position-fixed p-bottom-0  c-left-50pc"></div>
<div class="box position-fixed p-bottom-0  p-right-0"></div>

<div class="box position-absolute p-top-0     p-left-0"></div>
<div class="box position-absolute p-top-0     c-left-50pc"></div>
<div class="box position-absolute p-top-0     p-right-0"></div>
<div class="box position-absolute c-top-50pc  p-left-0"></div>
<div class="box position-absolute c-top-50pc  c-left-50pc"></div>
<div class="box position-absolute c-top-50pc  p-right-0"></div>
<div class="box position-absolute p-bottom-0  p-left-0"></div>
<div class="box position-absolute p-bottom-0  c-left-50pc"></div>
<div class="box position-absolute p-bottom-0  p-right-0"></div>

script.coffeescript

jQuery -> do ($ = jQuery) ->
  $.extend Array.prototype,
    uniq: () -> a = @; a.filter (e,i) -> a.indexOf(e) == i
  $.fn.extend
    allowDrag: ->
      @.css 'position','fixed'
      .mousedown (e) ->
        $elem = $(@)
        $elem.data
          dragging: true
          initialPos: $elem.position()
          initialClientX: e.clientX
          initialClientY: e.clientY
      .mouseup    (e) -> $(@).removeData()
      .mouseleave (e) -> $(@).removeData()
      .mousemove  (e) ->
        $elem = $(@); d = $elem.data(); p = $elem.position()
        if d.dragging
          $elem.css
            top:  d.initialPos.top  + e.clientY - d.initialClientY
            left: d.initialPos.left + e.clientX - d.initialClientX

  usedClasses = $('div').map ->
    this.className.split /\s+/
  .toArray().uniq().sort().slice(1)
  usedClasses.map (c) ->
    if c != 'box'
      $('#display-control').append '<input id="' + c + '" type="checkbox"  checked>'
  
  $('#display-control input').change (e) ->
    $('.' + e.target.id).toggleClass 'hidden-' + e.target.id, !e.target.checked

  $('#display-control').allowDrag()

  $('#display-control button').click ->
    check = !$('#display-control input').get(0).checked
    $('#display-control input').each ->
      @.checked = check
      $(@).change()

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

body {
  margin: 0;
  padding: 0;
  height: 2000px;
  background: lightyellow;
}

$display-control-outer-width: 150px;
$display-control-padding: 10px;
#display-control {
  cursor: move;
  background: rgba(255,255,255,.6);
  opacity: .9;
  font-size: 10px;
  padding: $display-control-padding;
  position: fixed;
  top: 0;
  left: calc(50% - #{$display-control-outer-width / 2});
  z-index: 2;
  width: #{$display-control-outer-width - $display-control-padding * 2};
  button {
    width: 100%;
    margin-bottom: 5px;
  }
  input {
    font-size: 1em;
    width: 100%;
    &:after {
      padding-left: 20px;
      position: relative;
      top: -1px;
      content: attr(id);
    }
  }
}

$box-outer-lenght: 200px;
$box-border-width: 5px;
$box-padding: 5px;
.box {
  width: ($box-outer-lenght - ($box-border-width * 2) - ($box-padding * 2));
  height: ($box-outer-lenght - ($box-border-width * 2) - ($box-padding * 2));
  opacity: .8;
  border-style: solid;
  border-width: $box-border-width;
  padding: $box-padding;
  &:after {
    content: attr(class);
  }
}
.container { @extend .green; width: 100%; }

.pink   { background: pink;       border-color: darkred;    }
.green  { background: lightgreen; border-color: darkgreen;  }
.blue   { background: lightblue;  border-color: darkblue;   }
.orange { background: moccasin;   border-color: darkorange; }

[class*='hidden-'] { display: none; }

.position-static   { @extend .pink; } // default position is static
.position-absolute { @extend .orange; position: absolute; }
.position-fixed    { @extend .blue;   position: fixed;    }

.c-margin-0-auto { margin: 0 auto; }
.c-top-50pc  { top:  calc(50% - (#{$box-outer-lenght} / 2)); }
.c-left-50pc { left: calc(50% - (#{$box-outer-lenght} / 2)); }

.p-top-0    { top:    0; }
.p-right-0  { right:  0; }
.p-bottom-0 { bottom: 0; }
.p-left-0   { left:   0; }