Mutiple CSS (a:links) for each link in the TOC
February 17, 2015 12:00 AM
I have created a custom table of contents that tracks whether a page has been viewed or not and changes the icon based on the status.
if (parent.Varc1p1_visited.getValue()==1) {
insertEntry(aux1, NewLink("GenIntro", "general_genintro.html", "pagevisited", 2))
} else {
insertEntry(aux1, NewLink("GenIntro", "general_genintro.html", "page", 2))
}
The next step I am looking to implement is disabling pages that the user has not viewed yet in the table of contents.
I found that if you added pointer-events: none; to the .css file associated with the TOC that this would disable the click ability of the table of content objects.
What I am wondering is if it possible to have more then 1 a:link in the .css file and load the 2 different a:links based on the state of the page
Ex: if the page is visited use the.css file that enables clicking otherwise enable the .css file the disables clicking
if (parent.Varc1p1_visited.getValue()==1) {
insertEntry(aux1, NewLink("GenIntro", "general_genintro.html", "pagevisited", 2))
a { text-decoration:none;font-size:13px; font-family:"Arial", sans-serif; color:#000000;}
} else {
insertEntry(aux1, NewLink("GenIntro", "general_genintro.html", "page", 2))
a { text-decoration:none;font-size:13px; font-family:"Arial", sans-serif; color:#757575; pointer-events: none; }
}
thanks in advance if any one can give me hand with this really stumped on how to get this table of contents working. If you know a better way to disable the user from being able to select pages they haven't yet viewed in the table of contents I would be happy to hear of those as well
cheers,
Discussion (1)
Here's the markup you're looking for:
a {
/* something that works for both visited and not visited links */
}
a.visited {
pointer-events: none;
/* also anything else you want to do to visited links */
}
Just make sure that your NewLink function adds a "visited" class to visited links.
Also, keep in mind that pointer-events CSS property is not supported in older browsers: http://caniuse.com/#feat=pointer-events
Discussions have been disabled for this post