Arrow movement by pixel

Does anyone know how to make an arrow move by an amount of pixel or space every hour?
For example in the image below the arrow will move down to the next when an hour has gone by.

Do you want the arrow to slide down to the next hour, or just appear? If it can just appear, probably the easiest way would be to have an arrow image beside each time, but show or hide the image depending on the hour. Can you write the JavaScript code for that?

All of the following will work. I just need help with doing it

I think the image show or hide will work. Can you help?

I am not an expert in JavaScript, but I can get you started and maybe some of the JavaScript gurus will chime in with their input.

We need some html to start with that will result in those hours with an arrow image beside each one of them. Will you have the hours all displayed from the start, or do you want them to be displayed one at a time each hour like a timer?

Can you write that html and post it here for us to see?

Not all the hours: just hours from 8am to 6pm. I have the html below with the css. For the arrow any arrow image can be used

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
    <img src="image.png" class="logo" id = "img1" >
    <img src="image.png" class="logo2" id = "img1" >
    </body>
</html>

.logo {
position: absolute;
left: 2%;
top:10px;
width:3%;
height:3%;
}

.logo2 {
position: absolute;
left: 2%;
top:50px;
width:3%;
height:3%;
}

You are using an id of img1 twice. By rule, an id is only used once on a page.

1 Like

I know that! I would like to get help with making this work if you read above

Does anyone know or can help with this?

Hi there surajkay19,

check out the attachment, it may suit your requirements. :winky:

surajkay19.zip (2.9 KB)

coothead

Hell there, Thank you for taking the time to help. I really appreciate your help. Is there a way I can space between the Li tags? For example an amount of pixel for each time?

Do you understand how the code you were given works?

1 Like

yes I do. I am trying to modify it to make it works.

Hi there surajkay19,

I am sorry but I forgot to actually “make the clock tick”. :wonky:

So change the existing “arrow.js” from post #10 file with the attached…

arrow.zip (437 Bytes)

coothead

Thanks it’s working really good. Just have a question, How can place the time ontop of the embeded pdf below? Right now is showing up under the pdf I want it to align to the left ontop of the grey section.

Hi there surajkay19,

members would really need to see a link to the page in question or
failing that all the the code that produces the page in question. :winky:

coothead

Here are the files surajkay19.zip (143.2 KB)

Hi there surajkay19,

this may be a little closer to your requirements…

surajkay19-v2.zip (143.4 KB)

coothead

Thanks it works. I just have a small problem I was trying to fix and can’t figure how to get my links to display horizontally on top of the pdf. Can you please help me? Ive attached the code below.surajkay19-v2.zip (143.5 KB)

Hi there surajkay19,

I think that it would be better to have them displayed vertically.

surajkay19-v3.zip (143.5 KB)

coothead