grect_inset

pebble grect_inset

by Barry Carter

HTML

<button id="btn">Next</button>

<div id="banner-message">
  <div id="test"></div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  height: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#test, #test1 {
  position: absolute;
  background-color: blue;
  width: 350px;
  height: 350px;
  opacity: 50%;
}

#test1 {
  background-color: red;
}

JavaScript

var i = 0;
// find elements
var rect = $("#test");
var inside_rect = $("#banner-message");

// handle click and add class
$("#btn").on("click", function(){
  //$("#test").css({top: 0});
  testf(i+=10, -20, 10, -16);
})

var testf = function(a, b, c, d)
{
  var p = rect.position();
	var ip = inside_rect.offset();
  var x,y,w,h;

	// all sides
	if (!b) {
  	x = a;
    y = a;
    w = inside_rect.width() - (2 * a);
    h = inside_rect.height() - (2 * a);
    x = ip.left + x;
  	y = ip.top + y;
  	rect.css({left: x, top: y, position: "absolute"});
    rect.width(w);
    rect.height(h);
  	return;
  }
  
  // top & bottom, right & left
	if (!c) {
  	x = b;
    y = a;
    w = inside_rect.width() - (2 * b);
    h = inside_rect.height() - (2 * a);
    x = ip.left + x;
  	y = ip.top + y;
  	rect.css({left: x, top: y, position: "absolute"});
    rect.width(w);
    rect.height(h);
  	return;
  }
  
  // top, right & left, & bottom
	if (!d) {
  	x = b;
    y = a;
    w = inside_rect.width() - (2 * b);
    h = inside_rect.height() - a - c;
    x = ip.left + x;
  	y = ip.top + y;
  	rect.css({left: x, top: y, position: "absolute"});
    rect.width(w);
    rect.height(h);
  	return;
  }
  
  
  // top, right, bottom, left
	x = d;
  y = a;
  w = inside_rect.width() - b - d;
  h = inside_rect.height() - a - c;
  x = ip.left + x;
  y = ip.top + y;
  rect.css({left: x, top: y, position: "absolute"});
  rect.width(w);
  rect.height(h);
}