Twitter Bootstrap Question posted in

Create a vertical line that overlays all html content and moves across the page over a certain period of time (javascript)-Twitter bootstrap

I’ve created a calendar timeline in html. I want to create a vertical line that progresses from left to right over time, the line needs to overlay all the html elements. Similar to Google calendar’s way of letting you know what time of day you are at.

An example below of what I want:

timeline

The black line going vertically across is what I want to create in javascript. I want it to be on top of all elements

I’m trying to create this for a university project and I have no clue where to start

So far I have a progress bar element (using twitter bootstrap) and javascript that updates the width % of the progress bar by calculating the % val of currentTime/(end-start)

Tags:

2

Answers


  1. 0

    CSS:

    position: fixed; 
width: 2px; 
height: 100vh; 
background-color: #222; 
left: 0; 
top: 0; 
bottom: 0; 
z-index: 100

    Then animate CSS width or javascript the left value

    Login or Signup to reply.
  2. 0

    This is a rough example of where to start. You want to look for efficiency now

    var vline=$('#vline');
setInterval(function(){
  vline.css('left', parseInt(vline.css('left')) + 1);
}, 50);
    #vline{
  position: fixed;
  height: 100%;
  width: 0px;
  border: 1px solid red;
  top: 0;
  left: 0;
  z-index: 1000000
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vline"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search