No it’s not a shadow or design concept but an error in the code Paul posted. The inline block was missing.
The element should be inline-block as in the code I just posted 
1 Like
Well that is what I was thinking but the design looked different; hence my confusion in the different look. I had changed the color scheme after the first one and this is what it looks like. So can I make it look like before:
Yes add the display:inline-block
All okay, but please explain why you change it. I googled it and don’t understand. Why do you call it an error. Is it security or will something go wrong?
I didn’t change it. It was always in my code and in the original.
Paul must have mislaid it when he copied and pasted
I called it an error because that’s not how it was supposed to look.
4 Likes
I was experiment with the CSS by having the hidden part inside of the clock div, but the inline-block was messing up my attempts. That’s why I moved the hidden part outside of the clock div. I didn’t even notice those presentation differences, and forgot to put things in the CSS back to how it was.
My skills are in JS, so please excuse some CSS confusion on my part.
1 Like
To help remedy things, I’ve updated the codePen so that the inline-block is restored, and the presentation improved.
2 Likes
Nothing to excuse - wish I had them!
I honestly couldn’t understand completely. Am I right to understand that you were trying to hind the link? That was my initial thought. But if it was that wasn’t important because the link was the same page. Using ASP, the first half of the page relied on the time in the database and I use a response.end function which prevents the 2nd half of the code to work. Once the time in the JS clock expired then the link appears to activate that part of the page. Hence, I didn’t have to hind anything.
Hope I explained that okay! Your help is invaluable and very much appreciated.
Thanks!
If I can bring in 11 minutes - 24 seconds (00:00 format) rather than an integer, how can I get that to work with this code? Meaning to parse and remove the “minutes”, the “-” and the “seconds” and then apply that to a formula.
So unlike before where countdown equals an integer it would be in minutes and seconds.
document.querySelector("#clocklink").classList.add("hide");
const deadline = new Date(Date.parse(new Date()) + <%=countdown%> *60 * 1000);
initializeClock("clockdiv", deadline);Thank you!
You can receive the countdown amount to a separate variable, then extract out what you need from it.
const time = "<%=countdown%>";
const [match, minutes, seconds] = time.match(/(\d+).*(\d+)/);
const countdown = minutes * 60 + seconds;
And then you can use that countdown variable in the deadline line of code, instead of the asp one.
1 Like
Paul,
I must be missing something because it’s not working. To clarify, I have this block of code:
document.querySelector("#clocklink").classList.add("hide");
const deadline = new Date(Date.parse(new Date()) + <%=countdown%> *60 * 1000);
initializeClock("clockdiv", deadline);Exactly what do you want me to replace it with?
Thank you.
Your code goes below my code. The only thing to replace in your code is what I instructed you to replace at the end of my post. I will requote you what I said:
Still not getting it to work. Sorry for the brain freeze.
Isn’t the variable <%=countdown%> ?
None of these work if that is what you are talking about:
const deadline = new Date(Date.parse(new Date()) + <%=countdown%> *60 * 1000);or this
const deadline = <%=countdown%>;The asp variable is <%=countdown%>.
It is the countdown JS variable that contains the appropriate number of seconds instead.
Remove the asp markings from countdown, so that only the JS countdown variable is used there instead.
Geesh - of course! I am thinking so much in ASP I am always thinking using the <% %>.
Ok, so I have the clock working, it gives me this:
Countdown =
20 minutes - 22 seconds
So it’s not matching up.
This is what I have:
const time = "<%=countdown%>";
const [match, minutes, seconds] = time.match(/(\d+).*(\d+)/);
const countdown = minutes * 60 + seconds;
document.querySelector("#clocklink").classList.add("hide");
const deadline = countdown;
initializeClock("clockdiv", deadline);The rest of what was on the deadline line shouldn’t change at all. Put that back to what it was.
The only part that changes is that <%=countdown%> on the deadline line gets changed to be countdown instead.
I tried that before…and now trying again. When I refresh the page several times, the clock doesn’t match the countdown time. An example:
countdown = 00 minutes - 07 seconds
or
countdown = 22 minutes - 53 seconds
stares in stunned amazement
No - I give up. Someone else can deal with you.
Well I appreciate your help, don’t understand the comment. I did this, what I thought you said, and doesn’t seem to work:
const deadline = new Date(Date.parse(new Date()) + countdown *60 * 1000);Okay, I’m back home and aren’t feeling hangry after having had dinner, so can progress with more beneficial assistance.
I’ve updated the codePen code at https://codepen.io/pmw57/pen/oNLzaxz
I’ve made a few updates in there to get things demo’d properly, and it’s only the time line that you need to change, so that the appropriate asp information can be placed there.
1 Like