-
Notifications
You must be signed in to change notification settings - Fork 225
Run javascript after annotations have been highlighted? #5046
Hey, I have hypothesis embedded on my blog website. I'm trying to style the annotations so that they have a little comment icon next to them (to better signal to readers that yellow highlight = annotation).
I have some code like this:
var ps = document.getElementsByTagName("p");
for(var i = 0; i < ps.length; i++){
if(ps[i].querySelector("hypothesis-highlight") !== null){
var clone = commenticon.cloneNode(true);
ps[i].prepend(clone);
}
}
Which adds a commenticon div next to the annotation highlight.
My question: how do I run this function only after the highlights have finished loading? Is there a callback or something I can hook into?
Thanks
All reactions
Replies: 2 comments
My question: how do I run this function only after the highlights have finished loading? Is there a callback or something I can hook into?
MutationObserver should be of help.
All reactions
style the annotations so that they have a little comment icon next to them (to better signal to readers that yellow highlight = annotation).
You could also use the CSS ::before pseudo-element with an emoji or a background image.