Generate a dynamic vertical line that glides smoothly over the webpage, gradually shifting from one end to the other within a set duration using javascript

I have designed a calendar timeline using html. My goal is to implement a vertical line that moves from left to right as time progresses, overlaying all other html elements. This functionality is similar to Google Calendar's way of indicating the current time of day.

Here is an example of what I am trying to achieve:

https://i.stack.imgur.com/lnjRP.png

The black vertical line in the image above is what I am aiming to create using javascript. It should be displayed on top of all other elements on the page.

This task is part of a university project and I am unsure where to begin with this implementation.

Currently, I have a progress bar element (built with twitter bootstrap) and some javascript code that updates the width percentage of the progress bar based on the calculated value of currentTime/(end-start).

javascriptjqueryhtmlcss

Answer №1

If you're looking to enhance efficiency, this example is a good starting point.

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>

Answer №2

Styling with CSS:

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

You can then add animation to the width using CSS or adjust the left value using javascript

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to resolve the error message "TypeError: 'setOption' is not a function on type 'MutableRefObject' in React"

CODE export default function EChart({ option, config, resize }) { let chart = useRef(null) let [chartEl, setChartEl] = useState(chart) useEffect(() => { if (resize) { chartEl.resize() } if (!chartEl.cu ...

javascriptreactjstypescriptnext.jsecharts

Two separate ajax functions executed sequentially both yield identical results

I am encountering a strange issue with 2 different ajax functions being called consecutively. Each function fetches a different value and populates different text boxes, but they both return the value of the first function called. Here is the code snippet ...

javascriptjqueryajax

Ways to display the main image on a blog post

This piece of code is designed for displaying the relevant post associated with wp_ai1ec_events function display_event($atts ) { global $wpdb; $event = $wpdb->get_results("SELECT * FROM wp_ai1ec_events ORDER BY start"); ...

phphtmlcsswordpress

I can't understand why my body width is so disproportionately larger than usual

https://i.stack.imgur.com/jbeyI.png Encountering a new issue now. The width of my body is unusually high and I can't seem to identify the cause. I have included the code below. Tried adjusting margins but no luck. Searched for solutions online wi ...

htmlcss

How can I trigger the rendering of a component by clicking a button in a separate component?

I am currently facing a challenge in rendering a component with an "Edit" button that is nested within the component. I attempted to use conditional rendering in my code, but unfortunately, I am struggling to make it work as expected. Does anyone have any ...

javascriptreactjsreduxconditional-rendering

Visual Studio is refusing to highlight my code properly, intellisense is failing to provide suggestions, and essential functions like go to definition are not functioning as expected

Due to a non-disclosure agreement, I am unable to share any code. However, I am experiencing an issue with Visual Studio not highlighting my code or allowing me to utilize its built-in tools. While I can rebuild the project, I cannot edit or access any fil ...

htmlangulartypescriptidevisual-studio-2022

The issue of the back button not functioning in the React Multi-level push menu SCSS has

I have been developing a mobile-friendly Multi-level push navigation menu for my website using dynamically generated links based on projects from my GitHub account. I found a push menu on CodePen here and am in the process of integrating it into React inst ...

cssreactjssassnavigationnext.js

The Node.js application gracefully exited with code 0 with Forever

Running a Node.js Express app on CentOs 6.5 using the root account: root@vps [/home/test/node]# npm start app.js > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedacbdddaee9e809e809f">[email protected]</a> s ...

javascriptnode.jsexpressforever

The behavior of -webkit-border-radius differs from that of -moz-border-radius

My website is displaying differently on Safari compared to Firefox. I want the CSS to make it look consistent across both browsers. I understand that I could use two div boxes - one for the outline and one for the image. However, I prefer how Firefox only ...

safaricss

Rails application experiencing issues with AJAX success function after implementing Twilio SMS sending functionality

I have built a Rails application where my view triggers an Ajax POST request to the server, sending a phone number along with it. The controller then utilizes this phone number to invoke a model method that leverages the Twilio API for sending an SMS to th ...

jqueryruby-on-railsajaxtwilio

Exploring carousel elements in Selenium using Python

As a user of Selenium, I am trying to loop through the games displayed in the carousel on gog.com and print out all the prices. Below are two random XPaths that lead to the information within the carousel: /html/body/div[2]/div/div[3]/div/div[3]/div[2]/di ...

pythonhtmlseleniumxpath

The essential guide to creating a top-notch design system with Material UI

Our company is currently focusing on developing our design system as a package that can be easily installed in multiple projects. While the process of building the package is successful, we are facing an issue once it is installed and something is imported ...

javascripttypescriptmaterial-uies6-modulesparcel

"Utilizing Vue.js for frontend, this app utilizes axios from the client side, rather than

As a newcomer to the world of programming, I apologize if my question sounds basic. I currently have a setup where a Vue.js application is running on a Linux Red Hat server with Apache installed via XAMPP. Additionally, an ASP.NET Core 6 Web API applicatio ...

javascriptvue.jsasp.net-coreaxiosredhat

Modifying the background color of a div with ng-click functionality

Having trouble changing the background color of a div that is already styled with white for odd elements and grey for even elements. I'm not sure why it's not working in Jsfiddle. The div also has an ng-click attribute that I haven't include ...

javascriptangularjsangularjs-ng-repeat

What method is most effective for duplicating objects in Angular 2?

Is it just me, or does Angular 1.x have methods on the global angular object like angular.copy and angular.shallowCopy that are missing in Angular 2? It seems like there is no equivalent version in Angular 2 documentation. If Angular 2 doesn't plan on ...

javascriptangularjsangular

Customizing the appearance of default UI elements in asp.net

Recently, I was tasked with creating an image uploading function for a web application using asp.net. To start off, I utilized the standard input asp.net button along with the browse and filename label. The implementation of this code is quite straightforw ...

htmlasp.netvb.net

Is it possible to customize the close icons on the autocomplete feature in Material UI?

Is there a solution to change the icon while keeping its function when clicked? I am looking to replace this Icon <Autocomplete multiple id="checkboxes-tags-demo" options={top100Films} disableCloseOnSelect getOpt ...

javascriptreactjsautocompletematerial-ui

Barba.js (Pjax.js) and the power of replacing the <head> tag

I have been using barba.js to smoothly transition between pages without having to reload the entire site. If you want to see an example, take a look here. Here is a snippet of code from the example: document.addEventListener("DOMContentLoaded", func ...

javascriptjquerypjax

Achieving an oval shape using HTML5 and CSS3: Step-by-step guide

<!DOCTYPE html> <head> <title> Oval shape</title> </head> <body> <div style="width:400px; height:400px; background-color:#ff0;">Oval</div> <p> Exploring the creation of an oval shape using HTML5 ...

htmlcsscss-shapes

Revealing non-div elements with the CSS hover attribute

I'm looking for a way to utilize the CSS hover property on individual elements within a div in order to affect specific span elements. For example, hovering over "something1" should reveal "text1" and so forth. Is there a way to achieve this without ...

htmlcsshovercss-selectors