问:
Centering the text vertically in cylinder shaped div with respect to its content
am trying to place the text vertically center, But it is not staying in center with respect to its content is is changing, help me in this

//note parseInt
//note stop
var person = ['Mom is cooking','Mom is cooking','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching bahubali movie'];
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("
"+person[ctr]+"
");
 }
}

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

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"));
  });
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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}</code>```

<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>

```

答:
I managed to get the desired result. See snippet below

Code added .slot { display:flex;align-items:center;justify-content:center;}

Removed margin-top:6px from .slots .wrapper

Changed padding:20px to padding:0 20px on .slots_a and .slots_b

//note parseInt
//note stop
var person = ['Mom is cooking','Mom is cooking','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching bahubali movie'];
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("
"+person[ctr]+"
");
 }
}

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

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"));
  });
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.slot { display:flex;align-items:center;justify-content:center;}
.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: 0 20px;
width: 170px;
height: 117px;
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: 0 20px;
width: 225px;
height: 117px;
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:0px;
 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}</code>```

<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>

```

Body:
am trying to place the text vertically center, But it is not staying in center with respect to its content is is changing, help me in this

//note parseInt
//note stop
var person = ['Mom is cooking','Mom is cooking','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching bahubali movie'];
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("
"+person[ctr]+"
");
 }
}

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

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}

<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>

Body:
I managed to get the desired result. See snippet below

Code added .slot { display:flex;align-items:center;justify-content:center;}

Removed margin-top:6px from .slots .wrapper

Changed padding:20px to padding:0 20px on .slots_a and .slots_b

//note parseInt
//note stop
var person = ['Mom is cooking','Mom is cooking','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching bahubali movie'];
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"));
  });
}

.slot { display:flex;align-items:center;justify-content:center;}
.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: 0 20px;
width: 170px;
height: 117px;
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: 0 20px;
width: 225px;
height: 117px;
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:0px;
 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>


来源: stackexchange

问:
Neo4J Cypher: Why is assigning nodes to variables required in the shortestPath function
When I try to execute a shortestPath() function between a Person node and a Movie node, like -

```<code>MATCH p=shortestPath((:Person)-[*1..4]->(:Movie))
RETURN length(p)
</code>```

This fails with the error -

```<code>Neo.ClientError.Statement.SyntaxError
shortestPath(...) requires named nodes (line 1, column 9 (offset: 8))
"MATCH p=shortestPath((:Person)-[*1..4]->(:Movie))"
         ^
</code>```

To fix this, I must assign the node labels to variables, like so -

```<code>MATCH pt=shortestPath((p:Person)-[*1..4]->(m:Movie))
RETURN length(pt)
</code>```

This produces the correct return -

```<code>length(pt)
1
1
1
1
1
1
1
1
2
2
3
</code>```

and so on.

Why is this required? I'm not using the variables p or m anywhere in my RETURN clause.

I couldn't find an explanation in the shortestPath() documentation.

答:
I have followed your question to the team during the open cypher meeting in Monday, on this is the answer :

There is no need for those variables any more. there might have been
  in the past, and the check remains for legacy reasons. it's a fair
  feature request.

Cheers

ContentLicense: CC BY-SA 3.0

Body:
When I try to execute a shortestPath() function between a Person node and a Movie node, like -

MATCH p=shortestPath((:Person)-[*1..4]->(:Movie))
RETURN length(p)

This fails with the error -

Neo.ClientError.Statement.SyntaxError
shortestPath(...) requires named nodes (line 1, column 9 (offset: 8))
"MATCH p=shortestPath((:Person)-[*1..4]->(:Movie))"
         ^

To fix this, I must assign the node labels to variables, like so -

MATCH pt=shortestPath((p:Person)-[*1..4]->(m:Movie))
RETURN length(pt)

This produces the correct return -

length(pt)
1
1
1
1
1
1
1
1
2
2
3

and so on.

Why is this required? I'm not using the variables p or m anywhere in my RETURN clause.

I couldn't find an explanation in the shortestPath() documentation.


问:
Get all users from Openfire server to android using asmack
I am creating a chat application on android and using asmack library for openfire xmpp. I am stuck at getting all users from server. I have tried many codes but none of them worked as i desired. What i need to do on server is manually add users to a group, then use

```<code>private ArrayList<String> getAllUsers(int num) {

    ArrayList<String> users = new ArrayList<String>();
    Roster roster = connection.getRoster();

    System.out.println("**Number Users: " + roster.getEntryCount());
    Collection<RosterEntry> entries = roster.getEntries();
    for (RosterEntry entry : entries) {
        users.add(entry.getName());
        System.out.println("User: " + entry.getName());
    }
    System.out.println("**Number Users: " + roster.getEntryCount());

    return users;
}
</code>```

to get users inside the group i personally created. What i want to get is all the users available on openfire, or a way to add users to a specific group on openfire. How can I do that?

If I can get users by using groups then how to add users dynamically to a specific group?

答:
Use Roaster as below.

```<code>        Roster roster = Roster.getInstanceFor(connection);
        Collection<RosterEntry> entries = roster.getEntries();
        for (RosterEntry rosterEntry : entries){

            System.out.println("xmpp.Roster.user "+ rosterEntry.getUser());
            System.out.println("xmpp.Roster.type "+ rosterEntry.getType().name());
            System.out.println("xmpp.Roster.presence "+ roster.getPresence(rosterEntry.getUser()).getType());
        }
</code>```

Body:
I am creating a chat application on android and using asmack library for openfire xmpp. I am stuck at getting all users from server. I have tried many codes but none of them worked as i desired. What i need to do on server is manually add users to a group, then use

private ArrayList<String> getAllUsers(int num) {

    ArrayList<String> users = new ArrayList<String>();
    Roster roster = connection.getRoster();

    System.out.println("**Number Users: " + roster.getEntryCount());
    Collection<RosterEntry> entries = roster.getEntries();
    for (RosterEntry entry : entries) {
        users.add(entry.getName());
        System.out.println("User: " + entry.getName());
    }
    System.out.println("**Number Users: " + roster.getEntryCount());

    return users;
}

to get users inside the group i personally created. What i want to get is all the users available on openfire, or a way to add users to a specific group on openfire. How can I do that?

If I can get users by using groups then how to add users dynamically to a specific group?

Body:
Use Roaster as below.

        Roster roster = Roster.getInstanceFor(connection);
        Collection<RosterEntry> entries = roster.getEntries();
        for (RosterEntry rosterEntry : entries){

            System.out.println("xmpp.Roster.user "+ rosterEntry.getUser());
            System.out.println("xmpp.Roster.type "+ rosterEntry.getType().name());
            System.out.println("xmpp.Roster.presence "+ roster.getPresence(rosterEntry.getUser()).getType());
        }


问:
How to use javascript promises ES6 instead of jQuery ajax call?
I was trying to understand how promises works in javascript but I didn't found clear info about this, I would like to know if it possible and it is so how to do this using promises instead this code (equivalent)

```<code>$.ajax({
    type: 'post',
    cache: false,
    url: 'myfile.php',
    data: { info: info },
    datatype: 'json',

    success: function(response) {
        console.log(response);
    }
});
</code>```

I ask this because I want to use only javascript without any framework or plugins, I have no problem with the other new feautures of ES6 just with this one, I hope you can help me, thanks.

答:
You could do it like this</p>

```<code>function doAjax() {
   return $.ajax({
        type: 'post',
        cache: false,
        url: 'myfile.php',
        data: { info: info },
        datatype: 'json',
    });
}
doAjax.then(function(data) {
    // do success stuff
}).fail(function() {
    // do fail stuff
});
</code>```

Body:
I was trying to understand how promises works in javascript but I didn't found clear info about this, I would like to know if it possible and it is so how to do this using promises instead this code (equivalent)

$.ajax({
    type: 'post',
    cache: false,
    url: 'myfile.php',
    data: { info: info },
    datatype: 'json',

    success: function(response) {
        console.log(response);
    }
});

I ask this because I want to use only javascript without any framework or plugins, I have no problem with the other new feautures of ES6 just with this one, I hope you can help me, thanks.

Body:
You could do it like this

function doAjax() {
   return $.ajax({
        type: 'post',
        cache: false,
        url: 'myfile.php',
        data: { info: info },
        datatype: 'json',
    });
}
doAjax.then(function(data) {
    // do success stuff
}).fail(function() {
    // do fail stuff
});


问:
Extract text from html tags using reduce in Javascript
I'm trying to concatenate the inner HTML of each paragraph tag on my page in one single string using reduce. Here's my try:

// JS
let par = Array.from(document.getElementsByTagName("p"));
document.write(par.reduce((a, b) => a + ", " + b.innerHTML));```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!-- HTML -->
<p>Apple</p>
<p>Strawberry</p>
<p>Banana</p></code>```

And here's the (wrong) output:

[object HTMLParagraphElement], Strawberry, Banana

What am I doing wrong?

Many thanks for your help!

答:
As @hsz wrote you should use the empty string accumulator in order for your example to work:

```<code>let par = Array.from(document.getElementsByTagName("p"));
document.write(par.reduce(par.reduce((a,b) => a + ", " + b.innerHTML, '');
</code>```

But you could also first map the array and get the innerHTML property and then reduce

```<code>let par = Array.from(document.getElementsByTagName("p"));
document.write(par.map(a => a.innerHTML).reduce((a, b) => a + ", " + b));
</code>```

Body:
I'm trying to concatenate the inner HTML of each paragraph tag on my page in one single string using reduce. Here's my try:

// JS
let par = Array.from(document.getElementsByTagName("p"));
document.write(par.reduce((a, b) => a + ", " + b.innerHTML));

Apple

Strawberry

Banana

And here's the (wrong) output:

[object HTMLParagraphElement], Strawberry, Banana

What am I doing wrong?

Many thanks for your help!

Body:
As @hsz wrote you should use the empty string accumulator in order for your example to work:

let par = Array.from(document.getElementsByTagName("p"));
document.write(par.reduce(par.reduce((a,b) => a + ", " + b.innerHTML, '');

But you could also first map the array and get the innerHTML property and then reduce

let par = Array.from(document.getElementsByTagName("p"));
document.write(par.map(a => a.innerHTML).reduce((a, b) => a + ", " + b));


问:
Are indexes really required in the datastore?
I'm a bit confused by some of the GAE documentation.  While I intend to add indexes to optimize performance of my application, I wanted to get some clarification on if they are only suggested for this purpose or if they are truly required.

Queries can't find property values
  that aren't indexed. This includes
  properties that are marked as not
  indexed, as well as properties with
  values of the long text value type
  (Text) or the long binary value type
  (Blob).

A query with a filter or sort order on
  a property will never match an entity
  whose value for the property is a Text
  or Blob, or which was written with
  that property marked as not indexed.
  Properties with such values behave as
  if the property is not set with regard
  to query filters and sort orders.

from http://code.google.com/appengine/docs/java/datastore/queries.html#Introduction_to_Indexes

The first paragraph leads me to believe that you simply cannot sort or filter on unindexed properties.  However, the second paragraph makes me think that this limitation is only confined to Text or Blob properties or properties specifically annotated as unindexed.

I'm curious about the distinction because I have some numeric and string fields that I am currently sorting/filtering against in a production environment which are unindexed.  These queries are being run in a background task that mostly doesn't care about performance (would rather optimize for size/cost in this sitation). Am I somehow just lucky that these are returning the right data?

答:
you must use index if you want to use two or more filter function in one single query.

e.g:

Foobar.filter('foo =', foo).filter('bar =', bar)

if you just query with one filter, no need to use index, which is auto-generated.

for Blob and Text, you can't generate index for them, even you specify it in index.yaml, meanwhile you can't use filter in them.

e.g.

class Foobar(db.Model):

  content = db.TextProperty()

Foobar.filter('content =', content)

codes above will raise an Error because TextProperty can't be assigned a index and can't be matched.

ContentLicense: CC BY-SA 2.5


问:
How to retrieve url of the image uploaded on Amazon S3
I am new to Amazon S3. I want to upload all my images / PDF to S3 and let the user access those by using the URL. I am reading up the documentation and landed on this page:

http://docs.aws.amazon.com/AmazonS3/latest/dev/UploadObjSingleOpNET.html

This sample only uploads the image. How would I get the URL of the uploaded image so I can store them in my database and my user can use them to view the image?

For eg. Shouldn't it offer some url like http://aws.amazon.com/bucket-name/image-name.jpg and then I can type in that url in the browser and view my uploaded image from amazon.

Any help is appreciated.

答:
Amazon don't give you the URL because the structure is already know before you upload a file.</p>

```<code>http(s)://<bucket>.s3.amazonaws.com/<object>
http(s)://s3.amazonaws.com/<bucket>/<object>
</code>```

Body:
Amazon don't give you the URL because the structure is already know before you upload a file.

http(s)://<bucket>.s3.amazonaws.com/<object>
http(s)://s3.amazonaws.com/<bucket>/<object>


问:
"proc_open() has been disabled for security reasons" - PHP Error

proc_open() has been disabled for security reasons

I'm with free hosting at the moment (Hostinger) - Making a personal site for my use only and a few others.

I know I am supposed to remove the proc_open from the php.ini but I can't access it due to my shared hosting plan.

The code surrounding the proc_open in my code is as follows - If you require the full code please let me know. I've tried commenting parts out but it returns errors.

All I want is to remove it and allow for the code to run fine.

```<code><?php
// Initializing
if (!isset($ACCOUNTS)) $ACCOUNTS = array();
if (isset($USER) && isset($PASSWORD) && $USER && $PASSWORD) $ACCOUNTS[$USER] = $PASSWORD;
if (!isset($HOME_DIRECTORY)) $HOME_DIRECTORY = '';
$IS_CONFIGURED = count($ACCOUNTS) >= 1 ? true : false;

// Command execution
function execute_command($command) {
    $descriptors = array(
        0 => array('pipe', 'r'), // STDIN
        1 => array('pipe', 'w'), // STDOUT
        2 => array('pipe', 'w')  // STDERR
    );

    $process = proc_open($command . ' 2>&1', $descriptors, $pipes);
    if (!is_resource($process)) die("Can't execute command.");

    // Nothing to push to STDIN
    fclose($pipes[0]);

    $output = stream_get_contents($pipes[1]);
    fclose($pipes[1]);

    $error = stream_get_contents($pipes[2]);
    fclose($pipes[2]);

    // All pipes must be closed before "proc_close"
    $code = proc_close($process);

    return $output;
}
</code>```

答:
You may try to overwrite default php.ini. In the past, I used to successful with another share host, follow this step

You create your own php.ini in your web folder. No need to have all value in php.ini, just something you want to overwrite. For example your php.ini may only have one line like this

```<code>disable_functions = exec,execl,system,passthru,shell_exec,set_time_limit,escapeshellarg,escapeshellcmd,proc_close,ini_alter,proc_open,dl,popen,show_source,posix_getpwuid,getpwuid,posix_geteuid,posix_getegid,posix_getgrgid,open_basedir,safe_mode_include_dir,pcntl_exec,pcntl_fork,putenv,proc_get_status,proc_nice,proc_terminate,pclose,virtual,openlog,popen,pclose,virtual,openlog,escapeshellcmd,escapeshellarg,dl,show_source,symlink,eval,mail
</code>```

Remember to remove proc_open from disable functions

Create .htaccess and add this

```<code><IfModule mod_suphp.c>
suPHP_ConfigPath /home/user/public_html
</IfModule>
</code>```

Remember to change /home/user/public_html with your path

Body:
proc_open() has been disabled for security reasons

I'm with free hosting at the moment (Hostinger) - Making a personal site for my use only and a few others.

I know I am supposed to remove the proc_open from the php.ini but I can't access it due to my shared hosting plan.

The code surrounding the proc_open in my code is as follows - If you require the full code please let me know. I've tried commenting parts out but it returns errors.

All I want is to remove it and allow for the code to run fine.

<?php
// Initializing
if (!isset($ACCOUNTS)) $ACCOUNTS = array();
if (isset($USER) && isset($PASSWORD) && $USER && $PASSWORD) $ACCOUNTS[$USER] = $PASSWORD;
if (!isset($HOME_DIRECTORY)) $HOME_DIRECTORY = '';
$IS_CONFIGURED = count($ACCOUNTS) >= 1 ? true : false;

// Command execution
function execute_command($command) {
    $descriptors = array(
        0 => array('pipe', 'r'), // STDIN
        1 => array('pipe', 'w'), // STDOUT
        2 => array('pipe', 'w')  // STDERR
    );

    $process = proc_open($command . ' 2>&1', $descriptors, $pipes);
    if (!is_resource($process)) die("Can't execute command.");

    // Nothing to push to STDIN
    fclose($pipes[0]);

    $output = stream_get_contents($pipes[1]);
    fclose($pipes[1]);

    $error = stream_get_contents($pipes[2]);
    fclose($pipes[2]);

    // All pipes must be closed before "proc_close"
    $code = proc_close($process);

    return $output;
}

Body:
You may try to overwrite default php.ini. In the past, I used to successful with another share host, follow this step

You create your own php.ini in your web folder. No need to have all value in php.ini, just something you want to overwrite. For example your php.ini may only have one line like this

disable_functions = exec,execl,system,passthru,shell_exec,set_time_limit,escapeshellarg,escapeshellcmd,proc_close,ini_alter,proc_open,dl,popen,show_source,posix_getpwuid,getpwuid,posix_geteuid,posix_getegid,posix_getgrgid,open_basedir,safe_mode_include_dir,pcntl_exec,pcntl_fork,putenv,proc_get_status,proc_nice,proc_terminate,pclose,virtual,openlog,popen,pclose,virtual,openlog,escapeshellcmd,escapeshellarg,dl,show_source,symlink,eval,mail

Remember to remove proc_open from disable functions

Create .htaccess and add this

<IfModule mod_suphp.c>
suPHP_ConfigPath /home/user/public_html
</IfModule>

Remember to change /home/user/public_html with your path


问:
Is there a way to update a trained machine learning model in Weka while making predictions for new data (Java)?
I have implemented  classification algorithms using machine learning using Weka Java. I would like to deploy the trained model on RasberryPi to test.. I want then the trained model get updated every time when it receive the new data and make predictions?? Is there a way to do that with weka Java ?? Could you share your thoughts how to proceed??

Thanks in Advance

答:
Check out the MOA (Massive Online Analysis) package from the Weka developers. It does basically what you want- updating the training model incrementally (= "online").

MOA is (freely) available as a standalone product, or as an extension to Weka, as far as I remember.


问:
How to target the parent class from nested classes in SASS
Is there a way to achieve something like below in SASS without indicating .group-left twice?

```<code>.wrapper .group-left {
  background-color: blue;
}
.wrapper-child:nth-child(2n+2) .group-left {
  background: red;
}
</code>```

I was trying to put ampersand after .group-left, but doesn't work. So, I have to re-select .group-left. Below is my current code.

```<code>.wrapper {
  &:nth-child(2n+2) .group-left {
    background-color: red;
  }
  .group-left {
    background-color: blue;
  }
}
</code>```

Please advise. Thank you.

答:
Try this.</p>

```<code>.wrapper {
    .group-left {
        background-color: blue;
    }
}
.wrapper-child {
    &:nth-child(2n+2) {
        .group-left {
            background: red;
        }
    }
}
</code>```

Body:
Is there a way to achieve something like below in SASS without indicating .group-left twice?

.wrapper .group-left {
  background-color: blue;
}
.wrapper-child:nth-child(2n+2) .group-left {
  background: red;
}

I was trying to put ampersand after .group-left, but doesn't work. So, I have to re-select .group-left. Below is my current code.

.wrapper {
  &:nth-child(2n+2) .group-left {
    background-color: red;
  }
  .group-left {
    background-color: blue;
  }
}

Please advise. Thank you.

Body:
Try this.

.wrapper {
    .group-left {
        background-color: blue;
    }
}
.wrapper-child {
    &:nth-child(2n+2) {
        .group-left {
            background: red;
        }
    }
}


问:
CocoaPods issues while adding a new pod
My CocoaPods works fine until I try to install a new one.

If I try to install a new pod, then there are several issues in charts pod, else it works fine.

How do I fix it?

The errors show up as below:

My podfile is as below:

```<code># Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
use_frameworks!

target 'Tranquil' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks

# Pods for TranquillocationText
pod 'GooglePlaces'
pod 'UICircularProgressRing'
pod 'Alamofire', '~> 4.0' . //if i try to add this pod then error occurs
pod 'Charts'
end
</code>```

答:
Note: Ensure swift language version of your project. Here is how you can see/check your swift language version.

You have two options as solution to your query:

If your project has Swift versio 4.0
- You should choose/download POD compatible to your project's swift language (Share me POD info and swift version, so I can provide you exact pod version version for your pod library suitable for project).

If your project has swift version below 4.0
- You need to migrate your project into Swift 4.0 (if you've not migrated it). Here is ref question and answer, how to migrate from swift (below) <4.0 to 4.0.

Xcode 9 Swift Language Version (SWIFT_VERSION)

According to snapshot added by you in your question - Swift 3.x is your current project language version and pod 'Charts' is supporting swift 4.

```<code>pod 'Charts'
</code>```

Here is list of previous release supporting Swift version below 4.0.

https://github.com/danielgindi/Charts/releases

Try previous release of cosmos like:

```<code>pod 'Charts', '~> 3.0.3'
// or
pod 'Charts', '~> 3.0.2'
// or
pod 'Charts', '~> 3.0.1'
</code>```

'

Similar way you can find previous release of Alamofire (supporting Swift below 4.0) from here - Alamofire - Releases

Try this with Swift 3.2 and see:

```<code>platform :ios, '9.0'
use_frameworks!

target 'Tranquil' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks

# Pods for TranquillocationText
pod 'GooglePlaces'
pod 'UICircularProgressRing', '~> 1.7'
pod 'Alamofire', '~> 4.0'
pod 'Charts', '3.0.3'
pod 'SwiftyJSON', '3.0.0'

end
</code>```

Title: CocoaPods issues while adding a new pod

Body:
My CocoaPods works fine until I try to install a new one.

If I try to install a new pod, then there are several issues in charts pod, else it works fine.

How do I fix it?

The errors show up as below:

My podfile is as below:

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
use_frameworks!

target 'Tranquil' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks

# Pods for TranquillocationText
pod 'GooglePlaces'
pod 'UICircularProgressRing'
pod 'Alamofire', '~> 4.0' . //if i try to add this pod then error occurs
pod 'Charts'
end

Body:
Note: Ensure swift language version of your project. Here is how you can see/check your swift language version.

You have two options as solution to your query:

If your project has Swift versio 4.0
- You should choose/download POD compatible to your project's swift language (Share me POD info and swift version, so I can provide you exact pod version version for your pod library suitable for project).

If your project has swift version below 4.0
- You need to migrate your project into Swift 4.0 (if you've not migrated it). Here is ref question and answer, how to migrate from swift (below) <4.0 to 4.0.

Xcode 9 Swift Language Version (SWIFT_VERSION)

According to snapshot added by you in your question - Swift 3.x is your current project language version and pod 'Charts' is supporting swift 4.

pod 'Charts'

Here is list of previous release supporting Swift version below 4.0.

https://github.com/danielgindi/Charts/releases

Try previous release of cosmos like:

pod 'Charts', '~> 3.0.3'
// or
pod 'Charts', '~> 3.0.2'
// or
pod 'Charts', '~> 3.0.1'

'

Similar way you can find previous release of Alamofire (supporting Swift below 4.0) from here - Alamofire - Releases

Try this with Swift 3.2 and see:

platform :ios, '9.0'
use_frameworks!

target 'Tranquil' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks

# Pods for TranquillocationText
pod 'GooglePlaces'
pod 'UICircularProgressRing', '~> 1.7'
pod 'Alamofire', '~> 4.0'
pod 'Charts', '3.0.3'
pod 'SwiftyJSON', '3.0.0'

end


问:
How to pass hashmap to jsp from servlet request.setatttibute
How to pass linkedhashmap from java servlet to jsp using request.setatttibute() and how to use it in the jsp`

```<code>LinkedHashmap<String,Person> link = new LinkedHashmap<String,Person>()
request.settattribute("hash",link)
</code>```

Now how do I get it in the jsp and make it work

答:
Here is how you can put the request attribute and then get it.</p>

```<code>    Map link = new LinkedHashMap();
    link.put("key", "value");
    //put map as request attribute
    request.setAttribute("hash",link);
    //get map as request attribute from the request
    Map link1 =(Map)request.getAttribute("hash");
</code>```

Body:
How to pass linkedhashmap from java servlet to jsp using request.setatttibute() and how to use it in the jsp`

LinkedHashmap<String,Person> link = new LinkedHashmap<String,Person>()
request.settattribute("hash",link)

Now how do I get it in the jsp and make it work

Body:
Here is how you can put the request attribute and then get it.

    Map link = new LinkedHashMap();
    link.put("key", "value");
    //put map as request attribute
    request.setAttribute("hash",link);
    //get map as request attribute from the request
    Map link1 =(Map)request.getAttribute("hash");


问:
Difference between getMap() and getMapAsync()
I am using getMapAsync() instead of getMap() in mapview.But, I wish to know the difference between getMap() and getMapAsync.

答:
So, getMapAsync should be used as it waits till the map is properly initialized and provides the Map instance via a callback. </p>

```<code>public class MapActivity extends Activity implements OnMapReadyCallback {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.map_activity);

        MapFragment mapFrag = (MapFragment) getFragmentManager()
                .findFragmentById(R.id.map);
        mapFrag.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap map) {
        // Place your logic here
        map.setIndoorEnabled(true);
        map.setBuildingsEnabled(true);
        map.getUiSettings().setZoomControlsEnabled(false);
    }
}
</code>```

Body:
So, getMapAsync should be used as it waits till the map is properly initialized and provides the Map instance via a callback.

public class MapActivity extends Activity implements OnMapReadyCallback {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.map_activity);

        MapFragment mapFrag = (MapFragment) getFragmentManager()
                .findFragmentById(R.id.map);
        mapFrag.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap map) {
        // Place your logic here
        map.setIndoorEnabled(true);
        map.setBuildingsEnabled(true);
        map.getUiSettings().setZoomControlsEnabled(false);
    }
}


问:
Multiple instances of same jQuery plugin
In an aspx page I am calling a jquery plugin for two listboxes as below.

```<code>$(document).ready(function() {
     $("select.select_AdditionalLanguages").custSelectBox();
     $("select.select_Organisations").custSelectBox();
});
</code>```

Problem is, in the plugin jQuery(this) holds the listbox which was loaded last. Please suggest how to solve this issue. I have also tried the below without any success.

```<code> $(document).ready(function() {

        var languages = $('<%=AdditionalLanguages.ClientID%>');
        if (languages) {
            languages.custSelectBox();
        }
        alert(languages);
        var organizations = $('<%=Organisations.ClientID%>');
        if (organizations) {
            organizations.custSelectBox();
        }
    });
</code>```

EDIT:

Managed to solved this issue by having same class name for both the listboxes and then passing both the list box objects to the plugin
$('select.select_field').custSelectBox(null, $('#EditUsers_Organisations'), $('#EditUsers_AdditionalLanguages'));
This might not be the best solution but nothing else worked for me.

答: Managed to solved this issue by having same class name for both the listboxes and then passing both the list box objects to the plugin $('select.select_field').custSelectBox(null, $('#EditUsers_Organisations'), $('#EditUsers_AdditionalLanguages')); This might not be the best solution but nothing else worked for me.</p>

Body:
In an aspx page I am calling a jquery plugin for two listboxes as below.

$(document).ready(function() {
     $("select.select_AdditionalLanguages").custSelectBox();
     $("select.select_Organisations").custSelectBox();
});

Problem is, in the plugin jQuery(this) holds the listbox which was loaded last. Please suggest how to solve this issue. I have also tried the below without any success.

 $(document).ready(function() {

        var languages = $('<%=AdditionalLanguages.ClientID%>');
        if (languages) {
            languages.custSelectBox();
        }
        alert(languages);
        var organizations = $('<%=Organisations.ClientID%>');
        if (organizations) {
            organizations.custSelectBox();
        }
    });

EDIT:

Managed to solved this issue by having same class name for both the listboxes and then passing both the list box objects to the plugin
$('select.select_field').custSelectBox(null, $('#EditUsers_Organisations'), $('#EditUsers_AdditionalLanguages'));
This might not be the best solution but nothing else worked for me.


问:
Virtualenv OSError - setuptools pip wheel failed with error code 1
I get the following error message when trying to set up a virtual environment with virtualenv 15.0.2 but receive OSError setuptools pip wheel failed with error code 1.

```<code>New python executable in /Users/nathmorissette/projects/tutorial/venv/bin/python
Installing setuptools, pip, wheel...
  Complete output from command /Users/nathmorissett...rial/venv/bin/python - setuptools pip wheel:
  Traceback (most recent call last):
  File "<stdin>", line 4, in <module>
  File "/Users/nathmorissette/miniconda2/lib/python2.7/tempfile.py", line 32, in <module>
    import io as _io
  File "/Users/nathmorissette/miniconda2/lib/python2.7/io.py", line 51, in <module>
    import _io
ImportError: dlopen(/Users/nathmorissette/projects/tutorial/venv/lib/python2.7/lib-dynload/_io.so, 2): Symbol not found: __PyCodecInfo_GetIncrementalDecoder
  Referenced from: /Users/nathmorissette/projects/tutorial/venv/lib/python2.7/lib-dynload/_io.so
  Expected in: dynamic lookup

----------------------------------------
...Installing setuptools, pip, wheel...done.
Traceback (most recent call last):
  File "/Users/nathmorissette/miniconda2/bin/virtualenv", line 9, in <module>
    load_entry_point('virtualenv==15.0.2', 'console_scripts', 'virtualenv')()
  File "/Users/nathmorissette/miniconda2/lib/python2.7/site-packages/virtualenv-15.0.2-py2.7.egg/virtualenv.py", line 711, in main
    symlink=options.symlink)
  File "/Users/nathmorissette/miniconda2/lib/python2.7/site-packages/virtualenv-15.0.2-py2.7.egg/virtualenv.py", line 944, in create_environment
    download=download,
  File "/Users/nathmorissette/miniconda2/lib/python2.7/site-packages/virtualenv-15.0.2-py2.7.egg/virtualenv.py", line 900, in install_wheel
    call_subprocess(cmd, show_stdout=False, extra_env=env, stdin=SCRIPT)
  File "/Users/nathmorissette/miniconda2/lib/python2.7/site-packages/virtualenv-15.0.2-py2.7.egg/virtualenv.py", line 795, in call_subprocess
    % (cmd_desc, proc.returncode))
OSError: Command /Users/nathmorissett...rial/venv/bin/python - setuptools pip wheel failed with error code 1
</code>```

Any ideas how to resolve this issue?

答:
I had this same issue while installing requirements from requirements.txt.

This was what solved the problem for me.

pip install --upgrade virtualenv

pip install --upgrade pip

After doing this, if you ever get errors while trying to install a dependency like below

THESE PACKAGES DO NOT MATCH THE HASHES FROM THE REQUIREMENTS FILE. If you have updated the package versions, please update the hashes. Otherwise, examine the package contents carefully; someone may have tampered with them.
      pbr==3.1.1 from https://pypi.python.org/packages/0c/5d/b077dbf309993d52c1d71e6bf6fe443a8029ea215135ebbe0b1b10e7aefc/pbr-3.1.1-py2.py3-none-any.whl#md5=75a0f55856bfc9220af0d01244afec43 (from -r requirements-test.txt (line 52)):

Expected sha256 60c25b7dfd054ef9bb0ae327af949dd4676aa09ac3a9471cdc871d8a9213f9ac
          Expected     or 05f61c71aaefc02d8e37c0a3eeb9815ff526ea28b3b76324769e6158d7f95be1

Got        b11776d9eb0e7b3988bb7bdef4e2d40cf8c168214374d12d1c4495c1346ac10b

ERROR: could not install deps [-rrequirements-test.txt]; v = InvocationError('/app/.tox/py27/bin/pip install -rrequirements-test.txt (see /app/.tox/py27/log/py27-1.log)', 1)

________________________________ summary _______________________________

ERROR:   py27: could not install deps [-rrequirements-test.txt]; v = InvocationError('/app/.tox/py27/bin/pip install -rrequirements-test.txt (see /app/.tox/py27/log/py27-1.log)', 1)

Then use pip --no-cache-dir install <package-name> to install the package; where <package-name> is the name of the package you want to install.

e.g pip --no-cache-dir install pbr

Body:
I get the following error message when trying to set up a virtual environment with virtualenv 15.0.2 but receive OSError setuptools pip wheel failed with error code 1.

New python executable in /Users/nathmorissette/projects/tutorial/venv/bin/python
Installing setuptools, pip, wheel...
  Complete output from command /Users/nathmorissett...rial/venv/bin/python - setuptools pip wheel:
  Traceback (most recent call last):
  File "<stdin>", line 4, in <module>
  File "/Users/nathmorissette/miniconda2/lib/python2.7/tempfile.py", line 32, in <module>
    import io as _io
  File "/Users/nathmorissette/miniconda2/lib/python2.7/io.py", line 51, in <module>
    import _io
ImportError: dlopen(/Users/nathmorissette/projects/tutorial/venv/lib/python2.7/lib-dynload/_io.so, 2): Symbol not found: __PyCodecInfo_GetIncrementalDecoder
  Referenced from: /Users/nathmorissette/projects/tutorial/venv/lib/python2.7/lib-dynload/_io.so
  Expected in: dynamic lookup

----------------------------------------
...Installing setuptools, pip, wheel...done.
Traceback (most recent call last):
  File "/Users/nathmorissette/miniconda2/bin/virtualenv", line 9, in <module>
    load_entry_point('virtualenv==15.0.2', 'console_scripts', 'virtualenv')()
  File "/Users/nathmorissette/miniconda2/lib/python2.7/site-packages/virtualenv-15.0.2-py2.7.egg/virtualenv.py", line 711, in main
    symlink=options.symlink)
  File "/Users/nathmorissette/miniconda2/lib/python2.7/site-packages/virtualenv-15.0.2-py2.7.egg/virtualenv.py", line 944, in create_environment
    download=download,
  File "/Users/nathmorissette/miniconda2/lib/python2.7/site-packages/virtualenv-15.0.2-py2.7.egg/virtualenv.py", line 900, in install_wheel
    call_subprocess(cmd, show_stdout=False, extra_env=env, stdin=SCRIPT)
  File "/Users/nathmorissette/miniconda2/lib/python2.7/site-packages/virtualenv-15.0.2-py2.7.egg/virtualenv.py", line 795, in call_subprocess
    % (cmd_desc, proc.returncode))
OSError: Command /Users/nathmorissett...rial/venv/bin/python - setuptools pip wheel failed with error code 1

Any ideas how to resolve this issue?


问:
Events not binding for serve side rendered component
I am using reactjs.net to render components server side. My problem is, I have been asked to get the HTML strings for both the component and the corresponding javascript via an ajax call and render the component.

This is my method which gives the HTML string.

```<code>  public JsonResult GetComponent(string strComponentName)
  {
        string strHtml = "";
        IHtmlContent htmlc= HtmlHelperExtensions.React(null, String.Format("Components.{0}", strComponentName), new { });
        strHtml = GetString(htmlc);
       IHtmlContent jscript  = HtmlHelperExtensions.ReactInitJavaScript(null);
        string strJavascript = GetString(jscript);
        jsonresponse jr = new jsonresponse();
        jr.html = strHtml;
        jr.javascript = strJavascript;
        return Json(jr);
 }
</code>```

Now, this function is called on the click event of a few buttons. After the received strings are rendered.

```<code> fetchComp() {
     let FETCH_URL: string = "/Home/GetComponent?strComponentName=" + this.props.componentName;
     fetch(FETCH_URL, {
         method: 'GET'
     })
         .then(response => response.json())
         .then(json => {
             console.log("json from wrapper", json);
             const html = json.html;
             const javascript = json.javascript;
             this.setState({ html: html, javascript: javascript,rendered: true });
             console.log("state val", this.state);

         });
}
</code>```

the render method is as follows

```<code> render() {
     if (!this.state.rendered) {
         this.fetchComp();
     }
return (<div>
    <div dangerouslySetInnerHTML={{ __html: this.state.html+" <script src=\"~/dist/client.bundle.js\"></script>" +this.state.javascript }} />

</div>);
}
</code>```

The events for the rendered component are not working. even though the javascript required events have been rendered along with the component.

Edit: I also tried adding the script to the main body by creating a script element and appending to document.body. didn't work

答:
So figured out the problem. Just rendering the javascript code wont attach the events. you need the code to be executed for the events to be attached.Remove  tags from your javascript string then use eval function.

```<code>  eval(this.state.javascript.replace('<script>','').replace('</script>',''));
</code>```

Disclaimer: eval is known to cause problems. though i haven't encountered any.

Body:
I am using reactjs.net to render components server side. My problem is, I have been asked to get the HTML strings for both the component and the corresponding javascript via an ajax call and render the component.

This is my method which gives the HTML string.

  public JsonResult GetComponent(string strComponentName)
  {
        string strHtml = "";
        IHtmlContent htmlc= HtmlHelperExtensions.React(null, String.Format("Components.{0}", strComponentName), new { });
        strHtml = GetString(htmlc);
       IHtmlContent jscript  = HtmlHelperExtensions.ReactInitJavaScript(null);
        string strJavascript = GetString(jscript);
        jsonresponse jr = new jsonresponse();
        jr.html = strHtml;
        jr.javascript = strJavascript;
        return Json(jr);
 }

Now, this function is called on the click event of a few buttons. After the received strings are rendered.

 fetchComp() {
     let FETCH_URL: string = "/Home/GetComponent?strComponentName=" + this.props.componentName;
     fetch(FETCH_URL, {
         method: 'GET'
     })
         .then(response => response.json())
         .then(json => {
             console.log("json from wrapper", json);
             const html = json.html;
             const javascript = json.javascript;
             this.setState({ html: html, javascript: javascript,rendered: true });
             console.log("state val", this.state);

         });
}

the render method is as follows

 render() {
     if (!this.state.rendered) {
         this.fetchComp();
     }
return (

);
}

The events for the rendered component are not working. even though the javascript required events have been rendered along with the component.

Edit: I also tried adding the script to the main body by creating a script element and appending to document.body. didn't work

Body:
So figured out the problem. Just rendering the javascript code wont attach the events. you need the code to be executed for the events to be attached.Remove  tags from your javascript string then use eval function.

  eval(this.state.javascript.replace('<script>','').replace('</script>',''));

Disclaimer: eval is known to cause problems. though i haven't encountered any.


问:
Node.js - I want to get hash in app.js
app.js

```<code>app.post('/upload', upload.single('userfile'), function(req, res){

  res.cookie('filename', req.file.originalname);
  res.cookie('filesize', req.file.size);
  var filename = __dirname +'/'+ req.file.path;
  console.log(hash(filename))

  res.cookie('hash', hash(filename));
  res.redirect('/hash')

})
</code>```

hash.js

```<code>var fs = require('fs');
var crypto = require('crypto');
var algorithm = 'sha256';

module.exports = function(filename){
  var shasum = crypto.createHash(algorithm);
  var s = fs.ReadStream(filename);

  s.on('data', function(data) {
    shasum.update(data)
  })
  var hash;
  s.on('end', function() {
    hash = shasum.digest('hex') // this hash, i want to get in app.js
  })
}
</code>```

I have this two codes.

In hash.js, i want to get 'var hash' in app.js

How can i do it? I don't know what to do.

I need your helps.

答:
hash.js

```<code>module.exports = function(filename){
  var module = {};

  var shasum = crypto.createHash(algorithm);
  var s = fs.ReadStream(filename);

  s.on('data', function(data) {
    shasum.update(data)
  })
  s.on('end', function() {
    module.hash = shasum.digest('hex') // this hash, i want to get in app.js
  })
  return module
}
</code>```

app.js

```<code>var hash_module = require("./hash.js")(filename);
console.log(hash_module.hash)
</code>```

Title: Node.js - I want to get hash in app.js

Body:
app.js

app.post('/upload', upload.single('userfile'), function(req, res){

  res.cookie('filename', req.file.originalname);
  res.cookie('filesize', req.file.size);
  var filename = __dirname +'/'+ req.file.path;
  console.log(hash(filename))

  res.cookie('hash', hash(filename));
  res.redirect('/hash')

})

hash.js

var fs = require('fs');
var crypto = require('crypto');
var algorithm = 'sha256';

module.exports = function(filename){
  var shasum = crypto.createHash(algorithm);
  var s = fs.ReadStream(filename);

  s.on('data', function(data) {
    shasum.update(data)
  })
  var hash;
  s.on('end', function() {
    hash = shasum.digest('hex') // this hash, i want to get in app.js
  })
}

I have this two codes.

In hash.js, i want to get 'var hash' in app.js

How can i do it? I don't know what to do.

I need your helps.

Body:
hash.js

module.exports = function(filename){
  var module = {};

  var shasum = crypto.createHash(algorithm);
  var s = fs.ReadStream(filename);

  s.on('data', function(data) {
    shasum.update(data)
  })
  s.on('end', function() {
    module.hash = shasum.digest('hex') // this hash, i want to get in app.js
  })
  return module
}

app.js

var hash_module = require("./hash.js")(filename);
console.log(hash_module.hash)