javascript - 获取可见 Div 的 id，所有方法均失败

Question

我正在尝试获取我的第一个纺车的可见 Div id，总是将值设为 0。我想要可见部分的确切 id。任何帮助将不胜感激

$("div.slot").not(":hidden").prop("id");

使用上面的代码，但得到了结果。

//note parseInt
//note stop
var person = ['Mom','Dad','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching'];
var clicks = true;
var spinCount = 0;
var lifeCount = 4;
function go(){
	addpersonSlots($("#slots_a .wrapper"));
	moveSlots($("#slots_a .wrapper"),'a');
	addSituationSlots($("#slots_b .wrapper"));
	moveSlots($("#slots_b .wrapper"));
}

$(document).ready(
	function(){
		addpersonSlots($("#slots_a .wrapper"));
		addSituationSlots($("#slots_b .wrapper"));
	}		
);

function addpersonSlots(jqo){
	for(var i = 0; i < 15; i++){
		var ctr = Math.floor(Math.random()*person.length);
		jqo.append("<div class='slot' id="+i+">"+person[ctr]+"</div>");		
	}
}

function addSituationSlots(jqo){
	for(var i = 0; i < 15; i++){
		var ctr = Math.floor(Math.random()*situation.length);
		jqo.append("<div class='slot' id="+i+">"+situation[ctr]+"</div>");		
	}
}

function moveSlots(jqo){
		var time = 1000;
		time += Math.round(Math.random()*1000);
		jqo.stop(true,true);
		var marginTop = parseInt(jqo.css("margin-top"), 10)		
		marginTop -= (7 * 100)		
		jqo.animate(
		{"margin-top":marginTop+"px"},
		{'duration' : time, 'easing' : "linear"}).promise().done(function ()
		{
				alert($("div.slot").not(":hidden").prop("id"));
		});
}

.first-step-div{
	background:#dddddd;
	margin:0 auto;
	text-align:center;
	padding:80px 0px;
	position:relative;
}
#back_link{
	position: absolute;
	left: 34px;
	bottom: 28px;
}
.problem-count{
	height:45px;
	width:50px;
	border-radius:10px;
	margin-bottom:10px;
	background:#e7e8e9;	
}
.problem-count span{
	position: relative;
	top: 4px;	
	font-size:25px;
	font-weight:700;
} 
.label-text{
	font-size:20px;
	color:#444;
	font-weight:600;
}
.earned-dibbs{
	font-size:40px;
	font-weight:600;
}
.problem-count.active{
	height:50px;
	width:50px;
	border-radius:10px;
	margin-bottom:10px;
	background:#fff !important;	
}
.sticky-notes{
	padding:30px;
}
.round-1{
	background:#fff;
	margin:0 auto;
	text-align:center;
	border-radius:15px;
	width:320px;
	padding:50px 0px;
}
.problem-text{
	background: #fff;
	border-radius: 10px;
	overflow: auto;
	width: 376px;
	font-size: 16px;
	text-align: left;
	padding: 15px;
	color:#58585a;	
	min-height: 172px;
	max-height:172px;
}
.problem-user-icon{
	height:25px;
	width:25px;
	background:#18b1a0;
	margin-bottom:10px;
}
.round-label{
	font-size:30px;
	color:#f05f9d;
	font-weight:700;
}
.round-label-text{
	font-size:24px;
	color:#18b1a0;
	cursor:pointer;
}
.count-knowls div{
	display:inline;
}
.knowls-num, .dibbs-num{
	font-size:25px;
	font-weight:700;
}
.spin-title{
	font-size:20px;
	padding:8px 15px;
	text-align:center;
	background:#ddd;
	border-radius:10px;
	font-weight:700;
	width:268px;
	position: relative;
	top: 8px;
}
.title-border{
	border:5px dotted #999;
}
.page-header{
	margin:0px;
}
#rcorners_parent {
position: relative;
background: #ddd;
padding: 20px; 
border-radius: 15px 50px 50px 15px / 8% 80% 80% 8%;
overflow: hidden;
padding: 42px 0px 32px 0px;
}
#rcorners_parent::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #bdbec0;
border-radius: 100%;
}

#slots_a {
position: relative;
background: #fff;
padding: 20px; 
width: 170px;
height: 100px;   
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_a::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
} 

#slots_b {
position: relative;
background: #fff;
padding: 20px; 
width: 225px;
height: 100px;   
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_b::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
} 

#slots_c {
position: relative;
background: #18b1a0;
padding: 20px; 
width: 225px;
height: 100px;   
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
}
#slots_c::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
}
.slot {
	font-size:32px;
}
.slots .wrapper{
	margin-top:6px;
	width:100px;

}
.slots .slot{
	width:100px;
	height:117px;
	text-align:center;
}
.spin-person{
	font-size:16px;
}
.nob-img{
	position: absolute;
	top: 18px;
	right: -26px;
}

.spin{
	background:#18b1a0 !important;
	border:1px solid #18b1a0 !important;
	color:#fff !important;
	font-weight:600 !important;
}
.spin:hover{
	background:#18b1a0 !important;
	border:1px solid #18b1a0 !important;
	color:#fff !important;
	font-weight:600 !important;
}
.spin-button{
	padding:10px 34px;
	border-radius:14px;
	font-weight:600;
	font-size:20px;
}
.pink{
	background:#f05f9d;
	border:1px solid #f05f9d;
	color:#fff;
	font-weight:600;
}
.pink:hover{
	background:#f05f9d;
	border:1px solid #f05f9d;
	color:#fff;
	font-weight:600;
}
.pink-button{
	padding: 10px 11px;
	border-radius: 14px;
	font-weight: 600;
	font-size: 16px;
}
.step-one, .step-two{
	background:#e1e65d !important;
	border-radius:25px;
	font-size:20px;
	color:#fff;
	border-color:#e1e65d !important;
	font-weight:600;
	padding:10px 15px;
	cursor:pointer;
}
.step-three{
	background:#f05e9d !important;
	border-radius:25px;
	font-size:20px;
	color:#fff;
	border-color:#f05e9d !important;
	font-weight:600;
	padding:10px 15px;
	cursor:pointer;
}
.step-four{
	background:#54cbec !important;
	border-radius:25px;
	font-size:20px;
	color:#fff;
	border-color:#54cbec !important;
	font-weight:600;
	padding:10px 15px;
	cursor:pointer;
}
.glyphicon-triangle-bottom{
	position:relative;
	top:4px;
}
.gif-title{
	color:#f074a9;
	font-size:18px;
	font-weight:600;
	text-align:center;
	margin-top:10px;
}
.col-centered{
	float: none;
	margin: 0 auto;
}
.gif-box{
	text-decoration:none;
	cursor:pointer;
}
.gif-box:hover{
	text-decoration:none;
	cursor:pointer;
}
.orange-button{
	padding:10px 34px;
	border-radius:14px;
	font-weight:600;
	font-size:20px;
}
.btn-container{
	margin:18px 0px;			
}
.draw-steps{
	border:2px dashed #666;
	border-radius:10px;
	margin-bottom:30px;
}
.step-num{
	color:#666;
	font-size:50px;
	font-weight:600;
	position:relative;
	top:10px;
}
.idea-steps-label{
	font-size:18px;
	text-align:left;
}
.draw-title{
	color:#54cbec;
	font-size:20px;
	text-align:left;
	font-weight:600;
	margin-bottom:10px;
}
a:hover{
	text-decoration:none !important;
}
.btn.grey {
	background: grey none repeat scroll 0 0;
	border-color: grey;
	color: #fff;
	cursor:not-allowed !important;
	pointer-events:auto !important;
}
.glyphicon-circle-arrow-left{
	left: -10px;
}

#back_link .glyphicon{
	font-size:48px !important;
	color:#818285 !important;
}
#back_link .glyphicon:hover{
	color:#2abbb5 !important;
}
@media screen and (max-width: 600px){
	#back_link {
		position:absolute;
		bottom:5px;
		left:5px;
	}
	#back_link .glyphicon{
		font-size:35px !important;
	}
	.step-one, .step-two, .step-three, .step-four{
		font-size:18px;
	}  
}

.sticky {
	margin: 0;
	padding: 8px 10px;
	width:205px;
	height:200px;
	font-size: 1.4em;
	border:1px #E8Ds47 solid;
	background:#f2f4ce;
	box-shadow: 3px 3px 5px #666;
	-moz-box-shadow: 3px 3px 5px #666;
	-webkit-box-shadow: 3px 3px 5px #666;
}
.sticky p {
	text-align: center;
}
.sticky textarea {
	width:184px;
	height:180px;
	background:#f2f4ce;
	border-bottom:none !important;
}
.sticky ol {
	margin: 12px;
}
.r-index{
 z-index: 0;
}
.a-index{
 z-index: 99;
}
.sticky-container {
  position: relative;
}
.sticky {
  position: absolute;
}
/*time container*/
button[data-setter] {
  outline: none;
  background: transparent;
  border: none;
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 18px;
  width: 25px;
  height: 30px;
  color: #F7958E;
  cursor: pointer;
}

button[data-setter]:hover { opacity: 0.5; }

.time-container {
  position: relative;
  top: 130px;
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

.setters {
  position: absolute;
  left: 85px;
  top: 75px;
}

.minutes-set {
  float: left;
  margin-right: 28px;
}

.seconds-set { float: right; }

.controlls {
	position: absolute;
	left: 37%;
	top: 52px;
	text-align: center;
}

.display-remain-time {
	font-weight: 700;
	font-size: 32px;
	color: #fff;
}

#pause {
  outline: none;
  background: transparent;
  border: none;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  position: relative;
}

.play::before {
  display: block;
  content: "";
  position: absolute;
  top: 8px;
  left: 16px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 22px solid #F7958E;
}

.pause::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 15px;
  height: 30px;
  background-color: transparent;
  border-radius: 1px;
  border: 5px solid #F7958E;
  border-top: none;
  border-bottom: none;
}

#pause:hover { opacity: 0.8; }

.e-c-base {
  fill: none;
  stroke: #fff;
  stroke-width: 4px
}

.e-c-progress {
  fill: none;
  stroke: #18b1a0;
  stroke-width: 10px;
  transition: stroke-dashoffset 0.7s;
  -webkit-transition: stroke-dashoffset 0.7s;
}

.e-c-pointer {
  fill: #FFF;
  stroke: #F7958E;
  stroke-width: 2px;
}

#e-pointer { transition: transform 0.7s; -webkit-transition: -webkit-transform: 0.7s; }
.sticky-note-div{
	background:#f2f4ce;
	box-shadow: 5px 5px 5px #666;
	-moz-box-shadow: 5px 5px 5px #666;
	-webkit-box-shadow: 5px 5px 5px #666;
	height:215px;
	width:22%;
	display:inline-block;
	margin-right:2%;
	margin-bottom:10px;
	position:relative;
	cursor:pointer;
}
.sticky-note-div img{
	position: absolute;
	right: 5px;
	top: 5px;
}
.sticky-note-div:last-child{
	margin-right:0px;
}
@media only screen and (max-width: 768px) {
    .nob-img {
		position: absolute;
		top: 41px;
		right: -26px;
	}
	#slots_a {
		width:160px;
		margin-right:15px;
	}
	#slots_b {
		width:205px;
		margin-right:15px;
	}
	#slots_c {
		width:205px;
		margin-right:0px;
	}
	.time-container {
		position: relative;
		top: 35px;
	}
}
@media only screen and (max-width: 540px) {
    .nob-img {
		position: absolute;
		top: 262px;
		right: -22px;
	}
	#slots_a, #slots_b, #slots_c {
		width:210px;
		margin-right:0px;
		margin-bottom:10px;
	}
	.problem-text{
		visibility:hidden;
	}
}
.card{
	background:#fff;
	margin-bottom:40px;
}
.card .tab-content{
	max-width:100% !important;
	font-size:18px !important;
	min-height: 300px;
	max-height:514px;
	overflow: auto;
}
.card .nav-tabs { border-bottom: 2px solid #DDD; }
.card .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.card .nav-tabs > li > a { border: none; color: #ffffff;background: #58585a; font-size:16px;font-weight:600;}
.card .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none;  color: #58585a !important; background: #fff; }
.card .nav-tabs > li > a::after { content: ""; background: #58585a; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; -webkit-transition: all 250ms ease 0s; transform: scale(0);-webkit-transform: scale(0); }
.card .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1);-webkit-transform: scale(1); }
.card .tab-nav > li > a::after { background: #58585a none repeat scroll 0% 0%; color: #fff; }
.card .tab-pane { padding: 15px 0; }
.card .tab-content{padding:20px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div id="rcorners_parent">
<div class="slots"  id="slots_a">
<div class="wrapper" ></div>
</div>
<div class="slots"  id="slots_b">
<div class="wrapper" ></div>
</div>											
<div id="spin_btn_div">
<div class="btn-container" style="margin-bottom:0px;">
<button id="proceed_btn"  style="display:none;font-size:20px;" class="btn pink pink-button shooter-btn" onClick="go();">Proceed</button>
<button id="spin_btn" style="margin-left:10px;margin-right:10px;" class="btn spin spin-button shooter-btn" onClick="go();">Spin</button>
</div>
</div></div>
</div>

Answer 1

请查看添加的函数intersectRect，它测试两个边界框是否相交，以及获取可见插槽的函数getVisibleSlot。

我还修改了您的 go 函数的逻辑，以在那里定义 promise 处理程序，因为我需要一个范围变量。

我在评论中添加了我想到的逻辑。

//note parseInt
//note stop
function intersectRect(r1, r2) {
  return !(r2.left > r1.right || 
           r2.right < r1.left || 
           r2.top > r1.bottom ||
           r2.bottom < r1.top);
}

function getVisibleSlot($parent) {
    var boundingRect = $parent.get(0).getBoundingClientRect();
    $found = null;
    /** last one to pass te test is the one. 
        this is because the element above the visible one will have a tiny portion 
        visible.
        but the .each parses from "top to bottom" so the last match is the right one, 
        because the element under the "visible" element will not test as visible.
     **/
    $parent.find('div.slot').each(function(index, element) {
        // get the bounding boxes.
        
       
       var newRect = element.getBoundingClientRect();
       
       // check for overlap(if it's visible)
       if(intersectRect(boundingRect, newRect)) {
          $found = $(element);
       }
       
       });
   
   return $found;
}

var person = ['Mom','Dad','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching'];
var clicks = true;
var spinCount = 0;
var lifeCount = 4;
function go(){
  var run = 0;
  var done = function ()
		    { 
           /**
             only run when the second wheel is done spinning.
             defined here so we can make use of a scoped variable run to count the number
             of completed animations.
             Needed to define here, because they use a random time to spin.
           */
           if(run >= 1) {
              
              var $person = getVisibleSlot($('#slots_a'));
              var $situation = getVisibleSlot($('#slots_b'));
              console.log($person.text(),'is',$situation.text());
           }
           else {
              run++;
           }
        };
	addpersonSlots($("#slots_a .wrapper"));
	moveSlots($("#slots_a .wrapper"),done);
	addSituationSlots($("#slots_b .wrapper"));
	moveSlots($("#slots_b .wrapper"),done);
}

$(document).ready(
	function(){
		addpersonSlots($("#slots_a .wrapper"));
		addSituationSlots($("#slots_b .wrapper"));
	}		
);

function addpersonSlots(jqo){
	for(var i = 0; i < 15; i++){
		var ctr = Math.floor(Math.random()*person.length);
		jqo.append("<div class='slot' id="+i+">"+person[ctr]+"</div>");		
	}
}

function addSituationSlots(jqo){
	for(var i = 0; i < 15; i++){
		var ctr = Math.floor(Math.random()*situation.length);
		jqo.append("<div class='slot' id="+i+">"+situation[ctr]+"</div>");		
	}
}

function moveSlots(jqo, complete){
		var time = 1000;
		time += Math.round(Math.random()*1000);
		jqo.stop(true,true);
		var marginTop = parseInt(jqo.css("margin-top"), 10)		
		marginTop -= (7 * 100)		
    
		jqo.animate(
		{"margin-top":marginTop+"px"},
		{'duration' : time, 'easing' : "linear"}).promise().done(complete);
     
}

.first-step-div{
	background:#dddddd;
	margin:0 auto;
	text-align:center;
	padding:80px 0px;
	position:relative;
}
#back_link{
	position: absolute;
	left: 34px;
	bottom: 28px;
}
.problem-count{
	height:45px;
	width:50px;
	border-radius:10px;
	margin-bottom:10px;
	background:#e7e8e9;	
}
.problem-count span{
	position: relative;
	top: 4px;	
	font-size:25px;
	font-weight:700;
} 
.label-text{
	font-size:20px;
	color:#444;
	font-weight:600;
}
.earned-dibbs{
	font-size:40px;
	font-weight:600;
}
.problem-count.active{
	height:50px;
	width:50px;
	border-radius:10px;
	margin-bottom:10px;
	background:#fff !important;	
}
.sticky-notes{
	padding:30px;
}
.round-1{
	background:#fff;
	margin:0 auto;
	text-align:center;
	border-radius:15px;
	width:320px;
	padding:50px 0px;
}
.problem-text{
	background: #fff;
	border-radius: 10px;
	overflow: auto;
	width: 376px;
	font-size: 16px;
	text-align: left;
	padding: 15px;
	color:#58585a;	
	min-height: 172px;
	max-height:172px;
}
.problem-user-icon{
	height:25px;
	width:25px;
	background:#18b1a0;
	margin-bottom:10px;
}
.round-label{
	font-size:30px;
	color:#f05f9d;
	font-weight:700;
}
.round-label-text{
	font-size:24px;
	color:#18b1a0;
	cursor:pointer;
}
.count-knowls div{
	display:inline;
}
.knowls-num, .dibbs-num{
	font-size:25px;
	font-weight:700;
}
.spin-title{
	font-size:20px;
	padding:8px 15px;
	text-align:center;
	background:#ddd;
	border-radius:10px;
	font-weight:700;
	width:268px;
	position: relative;
	top: 8px;
}
.title-border{
	border:5px dotted #999;
}
.page-header{
	margin:0px;
}
#rcorners_parent {
position: relative;
background: #ddd;
padding: 20px; 
border-radius: 15px 50px 50px 15px / 8% 80% 80% 8%;
overflow: hidden;
padding: 42px 0px 32px 0px;
}
#rcorners_parent::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #bdbec0;
border-radius: 100%;
}

#slots_a {
position: relative;
background: #fff;
padding: 20px; 
width: 170px;
height: 100px;   
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_a::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
} 

#slots_b {
position: relative;
background: #fff;
padding: 20px; 
width: 225px;
height: 100px;   
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_b::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
} 

#slots_c {
position: relative;
background: #18b1a0;
padding: 20px; 
width: 225px;
height: 100px;   
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
}
#slots_c::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
}
.slot {
	font-size:32px;
}
.slots .wrapper{
	margin-top:6px;
	width:100px;

}
.slots .slot{
	width:100px;
	height:117px;
	text-align:center;
}
.spin-person{
	font-size:16px;
}
.nob-img{
	position: absolute;
	top: 18px;
	right: -26px;
}

.spin{
	background:#18b1a0 !important;
	border:1px solid #18b1a0 !important;
	color:#fff !important;
	font-weight:600 !important;
}
.spin:hover{
	background:#18b1a0 !important;
	border:1px solid #18b1a0 !important;
	color:#fff !important;
	font-weight:600 !important;
}
.spin-button{
	padding:10px 34px;
	border-radius:14px;
	font-weight:600;
	font-size:20px;
}
.pink{
	background:#f05f9d;
	border:1px solid #f05f9d;
	color:#fff;
	font-weight:600;
}
.pink:hover{
	background:#f05f9d;
	border:1px solid #f05f9d;
	color:#fff;
	font-weight:600;
}
.pink-button{
	padding: 10px 11px;
	border-radius: 14px;
	font-weight: 600;
	font-size: 16px;
}
.step-one, .step-two{
	background:#e1e65d !important;
	border-radius:25px;
	font-size:20px;
	color:#fff;
	border-color:#e1e65d !important;
	font-weight:600;
	padding:10px 15px;
	cursor:pointer;
}
.step-three{
	background:#f05e9d !important;
	border-radius:25px;
	font-size:20px;
	color:#fff;
	border-color:#f05e9d !important;
	font-weight:600;
	padding:10px 15px;
	cursor:pointer;
}
.step-four{
	background:#54cbec !important;
	border-radius:25px;
	font-size:20px;
	color:#fff;
	border-color:#54cbec !important;
	font-weight:600;
	padding:10px 15px;
	cursor:pointer;
}
.glyphicon-triangle-bottom{
	position:relative;
	top:4px;
}
.gif-title{
	color:#f074a9;
	font-size:18px;
	font-weight:600;
	text-align:center;
	margin-top:10px;
}
.col-centered{
	float: none;
	margin: 0 auto;
}
.gif-box{
	text-decoration:none;
	cursor:pointer;
}
.gif-box:hover{
	text-decoration:none;
	cursor:pointer;
}
.orange-button{
	padding:10px 34px;
	border-radius:14px;
	font-weight:600;
	font-size:20px;
}
.btn-container{
	margin:18px 0px;			
}
.draw-steps{
	border:2px dashed #666;
	border-radius:10px;
	margin-bottom:30px;
}
.step-num{
	color:#666;
	font-size:50px;
	font-weight:600;
	position:relative;
	top:10px;
}
.idea-steps-label{
	font-size:18px;
	text-align:left;
}
.draw-title{
	color:#54cbec;
	font-size:20px;
	text-align:left;
	font-weight:600;
	margin-bottom:10px;
}
a:hover{
	text-decoration:none !important;
}
.btn.grey {
	background: grey none repeat scroll 0 0;
	border-color: grey;
	color: #fff;
	cursor:not-allowed !important;
	pointer-events:auto !important;
}
.glyphicon-circle-arrow-left{
	left: -10px;
}

#back_link .glyphicon{
	font-size:48px !important;
	color:#818285 !important;
}
#back_link .glyphicon:hover{
	color:#2abbb5 !important;
}
@media screen and (max-width: 600px){
	#back_link {
		position:absolute;
		bottom:5px;
		left:5px;
	}
	#back_link .glyphicon{
		font-size:35px !important;
	}
	.step-one, .step-two, .step-three, .step-four{
		font-size:18px;
	}  
}

.sticky {
	margin: 0;
	padding: 8px 10px;
	width:205px;
	height:200px;
	font-size: 1.4em;
	border:1px #E8Ds47 solid;
	background:#f2f4ce;
	box-shadow: 3px 3px 5px #666;
	-moz-box-shadow: 3px 3px 5px #666;
	-webkit-box-shadow: 3px 3px 5px #666;
}
.sticky p {
	text-align: center;
}
.sticky textarea {
	width:184px;
	height:180px;
	background:#f2f4ce;
	border-bottom:none !important;
}
.sticky ol {
	margin: 12px;
}
.r-index{
 z-index: 0;
}
.a-index{
 z-index: 99;
}
.sticky-container {
  position: relative;
}
.sticky {
  position: absolute;
}
/*time container*/
button[data-setter] {
  outline: none;
  background: transparent;
  border: none;
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 18px;
  width: 25px;
  height: 30px;
  color: #F7958E;
  cursor: pointer;
}

button[data-setter]:hover { opacity: 0.5; }

.time-container {
  position: relative;
  top: 130px;
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

.setters {
  position: absolute;
  left: 85px;
  top: 75px;
}

.minutes-set {
  float: left;
  margin-right: 28px;
}

.seconds-set { float: right; }

.controlls {
	position: absolute;
	left: 37%;
	top: 52px;
	text-align: center;
}

.display-remain-time {
	font-weight: 700;
	font-size: 32px;
	color: #fff;
}

#pause {
  outline: none;
  background: transparent;
  border: none;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  position: relative;
}

.play::before {
  display: block;
  content: "";
  position: absolute;
  top: 8px;
  left: 16px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 22px solid #F7958E;
}

.pause::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 15px;
  height: 30px;
  background-color: transparent;
  border-radius: 1px;
  border: 5px solid #F7958E;
  border-top: none;
  border-bottom: none;
}

#pause:hover { opacity: 0.8; }

.e-c-base {
  fill: none;
  stroke: #fff;
  stroke-width: 4px
}

.e-c-progress {
  fill: none;
  stroke: #18b1a0;
  stroke-width: 10px;
  transition: stroke-dashoffset 0.7s;
  -webkit-transition: stroke-dashoffset 0.7s;
}

.e-c-pointer {
  fill: #FFF;
  stroke: #F7958E;
  stroke-width: 2px;
}

#e-pointer { transition: transform 0.7s; -webkit-transition: -webkit-transform: 0.7s; }
.sticky-note-div{
	background:#f2f4ce;
	box-shadow: 5px 5px 5px #666;
	-moz-box-shadow: 5px 5px 5px #666;
	-webkit-box-shadow: 5px 5px 5px #666;
	height:215px;
	width:22%;
	display:inline-block;
	margin-right:2%;
	margin-bottom:10px;
	position:relative;
	cursor:pointer;
}
.sticky-note-div img{
	position: absolute;
	right: 5px;
	top: 5px;
}
.sticky-note-div:last-child{
	margin-right:0px;
}
@media only screen and (max-width: 768px) {
    .nob-img {
		position: absolute;
		top: 41px;
		right: -26px;
	}
	#slots_a {
		width:160px;
		margin-right:15px;
	}
	#slots_b {
		width:205px;
		margin-right:15px;
	}
	#slots_c {
		width:205px;
		margin-right:0px;
	}
	.time-container {
		position: relative;
		top: 35px;
	}
}
@media only screen and (max-width: 540px) {
    .nob-img {
		position: absolute;
		top: 262px;
		right: -22px;
	}
	#slots_a, #slots_b, #slots_c {
		width:210px;
		margin-right:0px;
		margin-bottom:10px;
	}
	.problem-text{
		visibility:hidden;
	}
}
.card{
	background:#fff;
	margin-bottom:40px;
}
.card .tab-content{
	max-width:100% !important;
	font-size:18px !important;
	min-height: 300px;
	max-height:514px;
	overflow: auto;
}
.card .nav-tabs { border-bottom: 2px solid #DDD; }
.card .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.card .nav-tabs > li > a { border: none; color: #ffffff;background: #58585a; font-size:16px;font-weight:600;}
.card .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none;  color: #58585a !important; background: #fff; }
.card .nav-tabs > li > a::after { content: ""; background: #58585a; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; -webkit-transition: all 250ms ease 0s; transform: scale(0);-webkit-transform: scale(0); }
.card .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1);-webkit-transform: scale(1); }
.card .tab-nav > li > a::after { background: #58585a none repeat scroll 0% 0%; color: #fff; }
.card .tab-pane { padding: 15px 0; }
.card .tab-content{padding:20px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div id="rcorners_parent">
<div class="slots"  id="slots_a">
<div class="wrapper" ></div>
</div>
<div class="slots"  id="slots_b">
<div class="wrapper" ></div>
</div>											
<div id="spin_btn_div">
<div class="btn-container" style="margin-bottom:0px;">
<button id="proceed_btn"  style="display:none;font-size:20px;" class="btn pink pink-button shooter-btn" onClick="go();">Proceed</button>
<button id="spin_btn" style="margin-left:10px;margin-right:10px;" class="btn spin spin-button shooter-btn" onClick="go();">Spin</button>
</div>
</div></div>
</div>