Bootstrap Snippet timeline using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
  <div class="row">
  <div class="col-md-10 col-md-offset-1">
    <h2 class="text-center"> Responsive facebook style timeline design - wsnippets.com</h2>
    <ul class="timeline">
    <li>
      <div class="timeline-badge primary"><a><i class="glyphicon glyphicon-time invert" title="Now" id=""></i></a></div>
      <div class="timeline-panel">
        <form action="update.php" method="post" role="form" enctype="multipart/form-data" class="facebook-share-box">
          <div class="timeline-body">
            <div class="share-form">
              <ul class="post-types">
                <li class="post-type">
                  <a class="status" id="shareType" href="#"><i class="icon icon-file"></i> Status</a>
                </li>
                <li class="post-type">
                  <a class="photos" id="shareType" href="#"><i class="icon icon-camera"></i> Photos</a>
                </li>
                <li class="post-type">
                  <a class="videos" id="shareType" href="#"><i class="icon icon-film"></i> Video</a>
                </li>
              </ul>
              <div class="share">
                <div class="arrow"></div>
                <div><textarea name="message" cols="40" rows="10" id="status_message" class="form-control message" style="height: 62px; overflow: hidden;" placeholder="What's on your mind ?"></textarea> </div>
                <div class="image hide">
                  <input type="file" class="form-control" name="image" id="image">
                </div>
                <div class="video hide">
                  <input type="text" class="form-control" placeholder="Youtube or Vimeo video URL" id="videoUrl" name="videoUrl">
                </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  padding-top: 40px;
  padding-bottom: 40px;
  background: #fdfdfd;
}
.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}
.profile-cover {
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);     
}
.timeline > li {
  margin-bottom: 20px;
  position: relative;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$(document).ready(function(){
  $('.status').click(function() { $('.arrow').css("left", 0);});
  $('.photos').click(function() { $('.arrow').css("left", 80);});
  $('.videos').click(function() { $('.arrow').css("left", 160);});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"timeline"
Bootstrap 3.3.0 Snippet by haoHu

Related: See More

Questions / Comments:

"timeline" Bootstrap 3.3.0 Snippet by haoHu

Related: See More

Questions / Comments:

"timeline"
Bootstrap 3.3.0 Snippet by haoHu