Cleanup: active pseudo class for current element with JavaScript
I've implemented my own kinetic scrolling component which usually works pretty well. My problem is that link elements on the page that use the : active pseudo class maintain their: active state even when the user searches and thus scrolls the screen (which means the mouse won't generate a "click") ...
Currently I can already avoid the "click" event, but the visual feedback (: active) is not consistent with the behavior.
So I need to clear ": active" directly or indirectly with JavaScript. Perhaps creating a dummy link and "activating" it with JavaScript will fix the problem, but I had no luck with that.
To find a solution, made a simple test case that demonstrates this: http://jsfiddle.net/LkAXd/2/
Any ideas?
Note. I just need a solution that works with Webkit.
Update
This dirty hack cleans the: active pseudoclass from the element l1
(basically by briefly removing it from the document):
var next = l1.nextSibling;
document.body.removeChild(l1);
document.body.insertBefore(l1, next);
The problem is that document.activeElement
, apparently, contains references not that just got mousedown (they do not get the focus in this way), so I do not know what element at the moment: the active.
source to share
I'm not sure if I fully understood what you are trying to do, but you can get the active element using document.querySelector
.
The following code worked for me for a test test:
var aEl = document.querySelector("a:active"), // Active Element
nEl = aEl && aEl.nextSibling, // The node following it
pEl = aEl && aEl.parentNode; // The parent node
if (aEl && pEl) {
pEl.removeChild(aEl);
pEl.insertBefore(aEl, nEl);
}
Working demo: http://jsfiddle.net/AndyE/LkAXd/3/
Since you marked webkit, I'm assuming you are in control of the environment and you don't need to worry about older browsers.
source to share