I have been trying (unsuccessfully) to find a way to force a user on the page before the user can click the next page link. In other words, can JS disable the page next href link and then have it activated within a specified time. And then (1) can this be done with just JS at the top of the page with no div tags around the button; or (2) do you need the JS and the div tags around the next button href link to accomplish this.
Thank you.
Hi,
I’m afraid I didn’t quite get what you are trying to do.
You want to make sure a user views page A before allowing them to view page B. Did I get that right?
Are the pages static, or dynamically generated?
Yes, that is correct. Before going to page A (let say set to 3 mins) the link to go to page B now becomes a active clickable link - but until that time, no way to click page B link.
Static
So you want a link like this:
<a href="#">Don't click me!</a>
to become this:
<a href="www.mydomain.com/whatever">Click me!</a>
After the user has been on the page for three minutes.
Correct?
Hi @javascript7, another approach to actually disable the link would be to set the pointer events to none…
CSS
.disabled {
pointer-events: none;
color: gray;
}
HTML
<a href="http://example.com/" class="disabled">Click me</a>
JS
const link = document.querySelector('.disabled')
window.setTimeout(() => {
link.classList.remove('disabled')
}, 1000)
Edit: Ah forget that, you you can then still access the link using the keyboard. The approach suggested by @James_Hibbard would probably be most fail-safe. Or if you want to keep the href attribute (so you don’t jump to the top of the page when clicking the “disabled” link), you can prevent the default event like so:
const link = document.querySelector('.disabled')
function preventEvent (event) {
event.preventDefault()
}
link.addEventListener('click', preventEvent)
window.setTimeout(() => {
link.removeEventListener('click', preventEvent)
}, 1000)
Basically like that. But I want to be able to click through with that 3 min wait for several pages.
Sorta like this:
<a href="#">Don't click me!</a>
turns into:
<a href="www.mydomain.com/whatever?page=2">Click me!</a>
now I am on page 2
<a href="#">Don't click me!</a>
turns into:
<a href="www.mydomain.com/whatever?page=3">Click me!</a>
now I am on page 3
<a href="#">Don't click me!</a>
turns into:
<a href="www.mydomain.com/whatever?page=4">Click me!</a>
So I can use 1 page with several query strings to go to the next page.
And I really don’t need to have:
<a href="#">Don't click me!</a>
If it could be simpler, just to make the next page unclickable, at the top of the page I can specify to 3 minutes is required on each page.
Can you edit your post and format your code, please. Discourse is parsing the links, so I cannot see what you posted (only the rendered HTML).
I’ve done that for you, @javascript7, but please take note of the issue for future reference.
I just noticed that and was in the process of changing it and looked up and saw a change I didn’t know how that happened. The problem is that I was coping and pasting. Thank you, kind of you!
You could do it like this (building on what m3g4p0p posted above) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.disabled {
pointer-events: none;
color: gray;
}
</style>
</head>
<body>
<a href="#" data-id="1" class="disabled">Text</a>
<a href="#" data-id="2" class="disabled">Text</a>
<script>
function enableLinks(){
links.forEach((link) => {
link.href=`https://www.example.com?page=${link.dataset.id}`;
link.classList.remove('disabled');
});
}
const links = document.querySelectorAll('.disabled');
const minute = 60000;
setTimeout(enableLinks, 3*minute);
</script>
</body>
</html>
Does that do what you want?
Because of the time difference, I need to leave but I will work on it first thing tomorrow and let you know. Thank you all for your help.
No problem.
Assuming this solution does work, there are some things to take into consideration.
href value. Wouldn’t it be better to add the link to the page once the time has elapsed.Anyway, have a good evening. We can gladly pick this up later on.
Does this represent the page url. So in other words, if I had 20 pages, it would need 20 of them?
If so, can it be work like an if/then statement which contains the querystring of “page” then it would apply to any and all of those pages - rather than list then individually?
Depending on how the other code works, I would be open to this idea. How would this work?
These are anchor tags that define hyperlinks, that are used to link from one page to another. So yeah, if you wanted to create 20 links to 20 different pages, then you would 20 of them.
You mean something like this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a {
padding: 5px;
}
.disabled {
pointer-events: none;
color: gray;
}
</style>
</head>
<body>
<script>
function createAnchor(num){
const a = document.createElement('a');
const linkText = document.createTextNode(`Link no. ${num}`);
a.appendChild(linkText);
a.classList.add('disabled');
a.dataset.id = num;
a.href = '#';
document.body.appendChild(a);
}
function enableLinks(){
const links = document.querySelectorAll('.disabled');
links.forEach((link) => {
link.href=`https://www.example.com?page=${link.dataset.id}`;
link.classList.remove('disabled');
});
}
const numLinks = 5;
for (let i=0; i<numLinks; i++){
createAnchor(i+1);
}
const links = document.querySelectorAll('.disabled');
const minute = 60000;
setTimeout(enableLinks, 3*minute);
</script>
</body>
</html>
This will create as many anchor tags as whatever is held in the variable numLinks.
Thank you for that but it doesn’t really work for my href tags. Let me show you what I was trying to explain:
<%if page="1" then%>
---text----
<a href="example.asp?page=1a">NEXT</a>
<%if page="1a" then%>
---text---
<a href="example.asp?page=1b">NEXT</a>
<%if page="1b" then%>
---text---
<a href="example.asp?page=1c">NEXT</a>
etc...That’s ASP (I guess), so yeah, I would look to do something along the lines of what you suggest.
Couple of points:
<%if page="1a" then%> seems to be an assignment. Surely it should be <%if page=="1a" then%>page variable coming from?The page is opened on a top menu that creates a session for all of page 1. That I don’t want to restrict or alter. I just want the ability that once on page one, every time the page is open, you are restricted to go the “NEXT” page (can’t click it) until the time is up; then it’s clickable.
So my first question would be, why? Only because if your looking to keep them on the page for X amount of time there has to be a reason and perhaps it can be solved in another way. BUT, if needed this should (basically) do what your looking for:
Time Disabled Links
The idea of adding links to the page after a certain time has its own accessibility concerns. You would need some sort of aria-live region to announce to the screen reader they were added. Only issues with THAT would be:
a) if there multiple, each one would have to be read out and that can be a bit noisy and
b) while the user now knows there ON the page, he wouldn’t know WHERE they are.
The one thing that would also be a great help would be some sort of mechanism to say how long they are disabled for. From a UX perspective, if I was stuck on a page for reasons unknown, Id want a reason and how long I’m gonna be stuck there.
Not a public website, required reading for a min specific time. I will look at you link. Thanks