Overlay Factory - No Buttons

index.haml

.box
  .box1.shadow
  .box2.shadow
  .box3.shadow
  .box4.shadow
  .box5.shadow
  
  %h3
    Click an element to create an overlay around it, press any key to clear the overlays. 
    
  %h4
    The overlays will not clear until you hit a key and will continue to stack until you do.
    
  %p
    In the other mode, the overlays will hang onto the target when resizing the window.
    
  .box2.shadow
  .box3.shadow
-#   %button.btn
-#     Overlay it
-#   %button.btn.btn-clear
-#     Clear All
 
 

overlay-factory-no-buttons.markdown

Overlay Factory - No Buttons

Fork of 'completed' version - going to refactor this some.

A Pen by Matt on CodePen.

License.

script.js

/* the sole purpose of this is to use in an onboarding lib for targeted element highlighting without the need to worry about element position / z-index */

var createOverlays = function(ev) {
  
  console.log(this)
  console.log(ev);
  var $mainContainer = $(".box");
  var $mainContainerWidth = $mainContainer.outerWidth();
  var $mainContainerHeight = $mainContainer.outerHeight();
  // var $target = $(".box2");
  var $target = $(ev.target);
  var $targetWidth = $target.outerWidth();
  var $targetHeight = $target.outerHeight();
  var $targetOffset = $target.offset();
  var $targetOffsetTop = $target.offset().top;
  var $targetOffsetLeft = $target.offset().left;
 
  /*******************   TOP OVERLAY   ******************/
  function createTopOverlay() {    
      
    var overlayProps = {
      "height": $targetOffsetTop,
      "class": "topOverlay"
    };
    
    overlayFactory(overlayProps);
  };
  
  /*****************   BOTTOM OVERLAY   ****************/
  function createBottomOverlay() {
      
    var overlayTop = $targetOffsetTop + $targetHeight;
    var overlayHeight = ($mainContainerHeight - $targetOffsetTop - $targetHeight);
    
    var overlayProps = {
      "height": overlayHeight,
      "top": overlayTop,
      "class": "bottomOverlay"
    };
    
    overlayFactory(overlayProps);
  };
  
  /******************   LEFT OVERLAY   *****************/
  function createLeftOverlay() {
     
    var overlayHeight = $targetHeight;  
    var overlayWidth = $targetOffsetLeft;
    var overlayTop = $targetOffsetTop;
    
    var overlayProps = {
      "height": overlayHeight,
      "top": overlayTop,
      "width": overlayWidth,
      "class": "leftOverlay"
    };
    
    overlayFactory(overlayProps);
  };

  /******************   RIGHT OVERLAY   *****************/
  function createRightOverlay() {   
 
    var overlayLeft = $targetOffsetLeft + $targetWidth;
    var overlayTop = $targetOffsetTop;
    var overlayHeight = $targetHeight;
    var overlayWidth = ($mainContainerWidth - $targetWidth - $targetOffsetLeft);    
    
    var overlayProps = {
      "height": overlayHeight,
      "top": overlayTop,
      "width": overlayWidth,
      "left": overlayLeft,
      "class": "rightOverlay"
    };
    
    overlayFactory(overlayProps);
      
  };
  
   /******************   OVERLAY FACTORY   *****************/
   function overlayFactory(overlayProps) {
     var overlayDiv = $('<div />', {
       "class": 'tourOverlay ' + overlayProps.class,
       "data-label": 'tourOverlay',
       "height": overlayProps.height,
       "width": overlayProps.width    
     });
     
     overlayDiv.css("top", overlayProps.top || 0)
     overlayDiv.css("left", overlayProps.left || 0)
     $('body').append(overlayDiv);
     
  };
  
  /***********************   INIT   **********************/
  function init() {
    createTopOverlay();
    createBottomOverlay();
    createLeftOverlay();
    createRightOverlay();
  } 
  
  return init();
};

function clearOverlays() {
  $( '[data-label="tourOverlay"]' ).remove();
}

window.onresize = function(){
    clearOverlays()
    createOverlays();  
}


$(this).on('click', createOverlays);

$( "body" ).on('keydown', clearOverlays);

// $('.btn').on('click', createOverlays);
// $('.btn-clear').on('click', clearOverlays);
// var $target = $(".box2");

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>

style.css

body {
  margin: 0 !important;
  font-family: Lato;
  letter-spacing: 1px;
  line-height: 1.5;
  font-weight: 300 !important;
}

.box > *:not(:first-child) {
  margin-top: 30px !important;
}

h3,
h4,
p {
  margin-top: 20px !important;
  padding: 0px 30px 0;
  text-align: center;
  
}

p {
  margin-top: 0;
}

.box {
  height: 100vh;
  color: white;
  background: linear-gradient(to left, #4776E6, #8E54E9);
}

.shadow {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.box1,
.box3 {
  height: 40px;
  background: rgb(255, 255, 0);
  margin: auto;
  position: relative;
  z-index: 11;
}

.box3 {
  height: 70px !important;
  background: rgb(24, 255, 255);
}

.box2 {
  width: 300px;
  height: 40px;
  background: rgb(255, 82, 82);
  margin: 5px auto;
  position: relative;
  z-index: 11;
}

.btn {
  margin-top: 40px;
  height: 50px;
  width: 100px;
  background: rgb(178, 255, 89);
  color: black;
  font-size: 1rem;
}

.box4 {
  background: rgb(213, 0, 249);
  width: 50vw;
  height: 6vw;
  margin-top: 20px;
}

.box5 {
  background: rgb(178, 255, 89);
  width: 50vw;
  height: 6vw;
  margin-top: 20px;
  margin-left: auto;
}

.btn-clear {
  background: rgb(255, 82, 82);
}

.tourOverlay {
  pointer-events: none;
}

.topOverlay,
.bottomOverlay,
.rightOverlay,
.leftOverlay {
  z-index: 1000;
  position: absolute;
  background: rgba(0, 0, 0, .5);
}

.bottomOverlay,
.topOverlay {
  width: 100%;
  left: 0;
}

.leftOverlay {
  left: 0;
}