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

Retrieve information from the index resource using AJAX

I feel like I might be overcomplicating things, but basically, I'm trying to retrieve all the data from an index resource and have it load when a button is clicked using AJAX. I've been using a serializer to tidy up the JSON. Both "/categories" ...

javascriptjqueryruby-on-railsajax

Controlling MVC controls dynamically using jQuery

I'm currently working on a table that contains multiple editable fields corresponding to an MVC model object. Each row has a cell with two buttons that toggle between edit and save functions when clicked. I've successfully implemented a mechanism ...

javascriptc#jqueryasp.netrazor

Can WikiData be accessed by providing a random pageId?

My current project involves creating a Wikipedia Search App with a 'Feel Lucky' button. I have been trying to figure out if it's possible to send a request for Wikidata using a specific pageid, similar to the code below: async function lucky ...

javascriptapicors

Tips for forwarding an image uploaded using Flask Dropzone to a different page

I recently used Flask Dropzone to upload an image into the uploads folder. My goal is to pass this uploaded image to my makeMeme page so that I can display it using the html img tag. Despite my efforts, when I attempt to reference the file for displaying, ...

pythonhtmlflaskfile-uploaddropzone.js

The <iframe> generated by Create-React-App often hinders my ability to interact with or modify the application directly, requiring me to remove it using the browser's element editor

After conducting a global installation of create-react-app, I encountered an issue where instead of editing the rendered content directly in the browser while working on a project, there is a mysterious container created around my app. Upon closer examina ...

javascripthtmlreactjsiframecreate-react-app

Do you typically define a static variable within a function using `this.temp`?

I am looking to implement a static variable within a function that meets the following criteria: It maintains its value across multiple calls to the function It is only accessible within the scope of that function Below is a basic example of how I am mee ...

javascript

Combining a name using JavaScript even if certain parts are not available

How can I efficiently combine name elements without any extra white space in Vue.js? let FirstName = "John" let MI = "G" let LastName = "Jones" let Suffix = "Jr." I want to create let fullName = "John G Jones Jr." However, in cases like this: let First ...

javascript

I'm having trouble getting my HTML button to redirect to a PHP link

I'm attempting to call a PHP script from my HTML file. Here's the snippet of my HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w ...

phphtmlweb

Trouble with using $.ajax to call a PHP function

Hey everyone, I hate to ask for help but I'm really stuck on this issue. I've tried everything and followed all the scenarios on this site, but I just can't seem to get it working. I even added alerts and echoes, but the function doesn' ...

javascriptphpjqueryajax

Tips for preventing PyCharm from automatically completing HTML and Django template tags

While working on Django templates in PyCharm, I noticed that it automatically closes the tags. This can be helpful when starting a new tag, but it becomes annoying when I want to place existing content within a different tag because I have to delete or mov ...

htmldjangopycharm

Issues with the functionality of the shopping cart are causing a disruption

This is the coding for the online shopping cart: <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8" /> <title>Online Shopping Cart</title> <script src="jquery-3.1.1.min.js"></script> ...

javascriptjquery

Tips for sending user ID in Django AJAX requests

I am working on ajaxifying a like button that functions correctly without ajax. To achieve this, I have defined a static file: $(function(){ $('#like').click(function(){ $.ajax({ type: "POST", url: "/news/lik ...

jqueryajaxdjango

jQuery Slider Showing Incorrect Images

My jQuery slider is acting strangely. It hides the first image, shows the second one, but then just repeats the cycle by showing the first image again instead of loading the third one. I'm puzzled about what could be causing this issue in my code. Do ...

javascriptjqueryhtmlcss

Tips for accessing elements other than the root element using this.$el

Within my template, the structure is as follows: <div v-show="showContent" class="content-block-body"> <div class="slider-pro"> <div class="sp-slides"> <slide v-for="block in subItems" ...

javascriptvue.jsvuejs2

From JSON to PNG in one simple step with Fabric.js

I am looking for a way to generate PNG thumbnails from saved stringified JSON data obtained from fabric.js. Currently, I store the JSON data in a database after saving it from the canvas. However, now I want to create a gallery of PNG thumbnails using thi ...

javascriptjqueryjsonfabricjs

Navigating with Node.js: Understanding how to showcase the response data within a list structure

I am brand new to working with node.js and I'm looking to display the data I receive as a response on my webpage. Currently, I can see the output in my console. Is there a way to show this data on my actual page? GET Request: app.get('/bestell_ ...

javascriptmysqlnode.jsserver

Most efficient method for nesting child objects within an array of objects using JavaScript

Hey experts, I'm on the hunt for the most efficient method to transform this data: [ { "id": 1, "animal": "cat", "age": 6, "name": "loky" }, { "id": 2, "animal": &quo ...

javascriptarraysjsonobjectnest

Creating sophisticated TypeScript AngularJS directive

Recently, I came across a directive for selecting objects from checkboxes which can be found at this link: The issue I'm facing is that we are using TypeScript and I am unsure of how to implement the directive in TypeScript. From what I understand, ...

javascriptangularjstypescriptangular-directive

A guide on locating the row number of a table with Selenium Webdriver in Java

I have a table that contains multiple rows and columns. Here is an example of the HTML code: <!-- language: lang-html --> <div id="ScheduleTable-01" class="widget Scheduletable suppress-errors Schedule-grid" data-widget="ScheduleTable"> ...

javahtmlseleniumwebdriver

Send an AJAX parameter and retrieve it on the expressjs server side of the application

It seems like there's a crucial piece missing here. Let's begin with an AJAX call that can be executed in the <script> tag to send data to the backend. It might look something like this: function changeDom(){ console.log('connectin ...

htmlnode.jsajaxexpress