<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/rockkk/pen/JKjMdJ?limit=all&page=21&q=mobile" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">.mobile{
background-image: url(http://mockuphone.com/static/images/phones/iphone6/iphone6_silver_portrait.png);
background-repeat: no-repeat;
background-size: content;
display: inline-block;
width: 330px;
height: 640px;
background-position: center;
content: '';
position: relative;
}
.chat-w {
background-color: #fff;
display: inline-block;
height: 461px;
width: 262px;
position: absolute;
top: 80px;
border-radius: 4px;
left: 25px;
overflow: hidden;
}
body{
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin:0;
background-color: #ccc;
}
ul{
margin: 0;padding: 0;
}
ul li{
list-style-type: none;
display: none;
margin: 10px;
clear: both;
overflow: hidden;
padding: 10px;
}
.bubble {
position: relative;
width: 80%;
padding: 8px;
float: left;
display: inline-block;
vertical-align:middle;
font-size: 13px;
color: #333;
text-align: left;
background-color: #e5e5ea;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 10px 0px rgba(97, 97, 97, 0.5);
-moz-box-shadow: 2px 2px 10px 0px rgba(97, 97, 97, 0.5);
box-shadow: 2px 2px 10px 0px rgba(97, 97, 97, 0.5);
}
.bubble2 {
position: relative;
width: 80%;
padding: 8px;
float: right;
text-align: left;
display: inline-block;
vertical-align:middle;
font-size: 13px;
color: #fff;
background-color: #1289fe;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 10px 0px rgba(97, 97, 97, 0.5);
-moz-box-shadow: 2px 2px 10px 0px rgba(97, 97, 97, 0.5);
box-shadow: 2px 2px 10px 0px rgba(97, 97, 97, 0.5);
}
.bubble:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 0;
left: -10px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #e5e5ea;
display: block;
width: 0;
z-index: 1;
}
.bubble2:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin:auto;
height: 0px;
right: -10px;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #1289fe;
display: block;
width: 0;
z-index: 1;
}
.scroll{
width: 210px;
overflow: hidden;
height: 80px;
display: inline-block;
position: relative;
}
.car{
width: 700px;
display: inline-block;
position: absolute;
left: 0;
top: 0;
}
.car span{
padding: 20px;
border: 1px solid #000;
text-align: center;
display: inline-block;
float: left;
width: 160px;
margin: 0 10px;
}
</style></head><body>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="mobile">
<div class="chat-w">
<ul>
<li>
<div class="bubble2">I am looking for product manager roles in Bangalore.</div>
</li>
<li>
<div class="bubble">Sure. Any industry you prefer?</div>
</li>
<li>
<div class="bubble2">The role at Amazon looks interesting.</div>
</li><li>
<div class="bubble">Yes, that surely is a good match.</div>
</li>
<li>
<div class="bubble2">I had a couple of questions though.</div>
</li><li>
<div class="bubble">Do you want to have a quick call?</div>
</li>
<li>
<div class="bubble2">How about 8pm tonight?</div>
</li>
<li>
<div class="bubble">Perfect. Micro Calendar Invite.</div>
</li>
<li class="slider">
<div class="scroll">
<div class="car">
<span class="items">1</span><span class="items">2</span><span class="items">3</span>
</div>
</div>
</li>
<br /><br /><br /><br /><br /><br />
</ul>
</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script >// var ulLength = $('ul li').length;
// $('.no').text(ulLength);
// var time = 50;
// var closure_func = function(closureArg, closuretime) {
// setTimeout(function(timeout_arg) {
// var current_height = $(".chat-w").prop("scrollHeight");
// $(".chat-w").delay(1600).animate({
// scrollTop: current_height
// }, 2000, function() {
// $("li:nth-child(" + timeout_arg + ")").show("drop", {
// direction: "down",
// easing: 'easeInOutExpo'
// }, 2000);
// });
// }, (closuretime), closureArg);
// }
// for (i = 1; i <= ulLength; i++) {
// closure_func(i, time);
// //time = time + 50;
// }
// $('li').each(function(i) {
// $(this).delay( i*(2000) ).show("drop", {direction: "down",easing: 'easeInOutExpo'}, 1500);
// var current_height = $(".chat-w").prop("scrollHeight");
// $(".chat-w").animate({
// scrollTop: current_height
// }, 1000);
// });
// $(".car").delay(15000).animate({left: -200}, 1000, function() {
// $(".car").delay(500).animate({left: -400}, 1000);
// });
var current_height = $(".chat-w").prop("scrollHeight");
$("li:nth-child(1)").show("drop", {direction: "down",easing: 'easeInOutExpo'}, 1000, function() {
$("li:nth-child(2)").delay(1000).show("drop", {direction: "down",easing: 'easeInOutCirc'}, 1000, function() {
$("li:nth-child(3)").delay(1000).show("drop", {direction: "down",easing: 'easeInOutCirc'}, 1000, function() {
$("li:nth-child(4)").delay(1000).show("drop", {direction: "down",easing: 'easeInOutCirc'}, 1000, function() {
$("li:nth-child(5)").delay(1000).show("drop", {direction: "down",easing: 'easeInOutCirc'}, 1000, function() {
$(".chat-w").animate({scrollTop: current_height}, 1000, function() {
$("li:nth-child(6)").delay(500).show("drop", {direction: "down",easing: 'easeInOutCirc'}, 1000, function() {
$(".chat-w").animate({scrollTop: current_height}, 1000, function() {
$("li:nth-child(7)").delay(500).show("drop", {direction: "down",easing: 'easeInOutCirc'}, 1000, function() {
$(".chat-w").animate({scrollTop: current_height}, 1000, function() {
$("li:nth-child(8)").delay(500).show("drop", {direction: "down",easing: 'easeInOutCirc'}, 1000, function() {
$(".chat-w").animate({scrollTop: current_height}, 1000, function() {
$("li:nth-child(9)").delay(500).show("drop", {direction: "down",easing: 'easeInOutCirc'}, 1000, function() {
$(".car").delay(1000).animate({left: -220}, 1000, function() {
$(".car").delay(1000).animate({left: -440}, 1000, function() {
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
//# sourceURL=pen.js
</script>
</body></html>
